:root {
  --primary-color: #202020;
  --secondary-color: #444;
  --text-color: #333;
  --light-bg: #f4f4f4;
  --white: #fff;
  --visited-link: #551a8b;
  --high-contrast-text: #000;
  --high-contrast-bg: #fff;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--light-bg);
  color: var(--text-color);
  line-height: 1.6;
  font-size: 1rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary-color);
  color: var(--white);
  padding: 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

header {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 1rem;
  text-align: center;
}

nav {
  margin-top: 1rem;
}

nav a {
  margin: 0 1rem;
  color: var(--white);
  text-decoration: underline;
  font-weight: bold;
}

nav a[aria-current="page"] {
  text-decoration: none;
  color: #ff9900;
}

a {
  color: var(--primary-color);
  text-decoration: underline;
}

a:visited {
  color: var(--visited-link);
  text-decoration: underline;
}

a:hover, a:focus {
  color: var(--secondary-color);
  text-decoration: underline;
}

main {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
h1{
  color: var(--white)
}
h2, h3 {
  color: var(--primary-color);
}

.szöveg {
  text-align: justify;
  margin-bottom: 1.5rem;
}

form {
  background-color: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.5rem;
}

fieldset {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

legend {
  font-weight: bold;
  padding: 0 0.5rem;
}

button {
  padding: 0.75rem 1.5rem;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

button:hover, button:focus {
  background-color: var(--secondary-color);
}

.bek1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px auto;
}

.bek1 p {
  max-width: 100%;
  text-align: justify;
  flex: 1;
  margin: 0;
}

.bek1 img {
  max-width: 100%;
  height: auto;
  align-self: center;
  flex: 1;
  margin-left: 0;
}

.bek1 figure {
  flex: 1;
  margin: 0;
  display: flex;
  justify-content: center;
}

.hasáb {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.bal, .jobb {
  flex: 1;
}

.coll {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.kepek{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin: 1rem auto;
}

.kepek2 {
  display: flex;
  flex-direction: row;     
  justify-content: center;   
  gap: 20px;                 
  margin: 20px auto;
  flex-wrap: wrap; 
}

.kepek img{
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
}

.kepek2 img {
  width: 100%; 
  max-width: 400px;
  height: auto;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: left;
}

th {
  background-color: var(--primary-color);
  color: var(--white);
}

td {
  background-color: var(--white);
}

caption {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.video-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 1rem auto;
}

.video-container video {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
}

.video-container details p {
  font-size: 0.9rem;
}

footer {
  background-color: var(--primary-color);
  color: var(--white);
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

.high-contrast {
  background-color: #000 !important;
  color: #FFD700 !important;
}

.high-contrast a {
  color: #00FFFF !important;
}

.high-contrast nav a {
  color: #FFD700 !important;
}

.high-contrast h1,
.high-contrast h2,
.high-contrast h3 {
  color: #FFD700 !important;
}

.high-contrast th,
.high-contrast td {
  background-color: #111 !important;
  color: #FFD700 !important;
  border-color: #FFD700 !important;
}

.high-contrast header,
.high-contrast footer {
  background-color: #111 !important;
  color: #FFD700 !important;
}

.high-contrast form {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

.high-contrast label,
.high-contrast legend {
  color: #fff !important;
}

.high-contrast input[type="text"],
.high-contrast input[type="email"],
.high-contrast textarea {
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

.high-contrast input::placeholder,
.high-contrast textarea::placeholder {
  color: #ccc !important;
}

.high-contrast fieldset {
  border-color: #fff !important;
}

.high-contrast button {
  background-color: #fff !important;
  color: #000 !important;
}

@media (min-width: 768px) {
  .bek1 {
    flex-direction: row;
    align-items: flex-start;
  }

  .bek1 p {
    max-width: 60%;
  }

  aside .bek1 p{
    max-width: 60%;
  }

  .bek1 img {
    max-width: 35%;
    margin-left: 2rem;
  }

  .hasáb {
    flex-direction: row;
  }

  .coll {
    flex-direction: row;
    align-items: flex-start;
  }

  .kepek2 {
    flex-wrap: nowrap;
  }
  
  .kepek2 img {
    width: auto;
    max-width: 100%;       
  }

  .kepek2 img:hover{
    transform: scale(1.03);
  }
}

@media (min-width: 1024px) {
  .bek1 p {
    max-width: 65%;
  }

  aside .bek1 p{
    max-width: 65%;
  }

  .bek1 img {
    max-width: 70%;
  }
}