@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');

body {
  font-family: 'Play', sans-serif;
  font-size: 1rem;
  background-color: #000;
  color: #f1f1f1;
  background-image: url('./Tartalom/hatter.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.7);
  min-height: 100vh;
  width: 100%;
  color: white;
}

header, footer, nav {
  background-color: #000 !important;
  color: #fff;
}

.navbar-nav .nav-link {
  color: #cc4400 !important;
  font-weight: bold;
}

.navbar-nav .nav-link.active {
  background-color: #cc4400;
  color: #ffffff !important;
  border-radius: 0.5rem;
  font-weight: bold;
}

.navbar-brand {
  color: #000 !important;
  font-weight: bold;
  font-size: 1.4rem;
}

a {
  color: #ff5500;
  text-decoration: underline;
}

a:visited {
  color: #ffa87d;
}

.btn-primary {
  background-color: #cc4400;
  border-color: #cb4400;
}

.btn-secondary {
  background-color: #000000;
  border-color: #ffffff;
}

.btn-primary:hover {
  background-color: #e04800;
  border-color: #cb4400;
}

table {
  background-color: #111;
  color: #fff;
}

th {
  background-color: #222;
}

caption {
  background-color: #333;
  color: #ff5500;
  font-weight: bold;
}

.gradient-bar {
  height: 1.5rem;
  background: linear-gradient(to bottom, white, #000);
}
  
.half-size{
  width: 50%;
  height: auto;
}

.quarter-size{
  width: 25%;
  height: auto;
}

a.image-link {
  display: inline-block;
  width: fit-content;
}

h1, h2 {
  font-weight: bold;
  margin-bottom: 0.5em;
}

p {
  text-align: justify;
}

aside {
  background-color: #f8f9fa;
}

.visually-hidden-focusable {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 1em 0;
}

.high-contrast-mode {
  background-color: #000 !important;
  color: #FFF !important;
  font-size: 1.3em;
  font-family: Arial, sans-serif !important;
}

.high-contrast-mode a {
  color: #FFFF00 !important;
  font-weight: bold;
  text-decoration: underline;
}

.high-contrast-mode .btn,
.high-contrast-mode .navbar,
.high-contrast-mode footer,
.high-contrast-mode aside {
  background-color: #111 !important;
  color: #FFF !important;
  border-color: #FFF !important;
}

.high-contrast-mode img {
  filter: brightness(1.2) contrast(1.2);
}