body {
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #d0e7ff, #ffffff);
    color: #003d5c;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* ugras a tartalomra ful beallitasa */
.visually-hidden-focusable {
    position: absolute; 
    left: -9999px; 
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden; 
}

.visually-hidden-focusable:focus {
    position: static; 
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;
    background-color: #f0f0f0; 
    padding: 10px; 
    text-decoration: underline; 
}

/* kepek beallitasai */
.hover-image {
    width: 300px;
    transition: transform 0.3s ease, opacity 0.3s ease; 
}

.hover-image:hover {
    transform: scale(1.1); 
    opacity: 0.8; 
}

.bevezeto-kep {
    max-width: 300px; 
    height: auto; 
    border-radius: 8px; 
    margin: 0 auto; 
    display: block; 
}

/* flexbox */

.content-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between; 
    gap: 20px; 
    background-color: #e0f0ff; 
    border: 2px solid #005bb5; 
    border-radius: 10px; 
    padding: 20px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px auto; 
    max-width: 900px; 
}

.content-row figure {
    flex: 1 1 50%;
    max-width: 50%; 
    text-align: center; 
}

.content-row #bevezeto {
    flex: 1 1 50%;
    text-align: justify;
    padding: 10px; 
    max-width: 50%;
    line-height: 1.8;
}

.image-row {
    display: flex;  
    flex-wrap: wrap;
    justify-content: space-between; 
    align-items: center;
    gap: 20px; 
    margin: 20px 0; 
}

.image-row figure {
    flex: 1 1 calc(50% - 20px); 
    max-width: 300px;
    text-align: center; 
    margin: 0; 
    max-width: 50%;
}

.image-row img {
    width: 100%; 
    max-width: 80%;
    max-height: 80%;
    height: auto; 
    border-radius: 8px; 
    transition: transform 0.3s ease; 
}

.image-row img:hover {
    transform: scale(1.05); 
}

.image-row input[type="button"] {
    display: block;
    margin: 10px auto; 
    padding: 15px 30px; 
    font-size: 18px; 
    background-color: #005bb5; 
    color: white; 
    border: none;
    border-radius: 8px; 
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.tartalom-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center; 
    justify-content: space-between; 
    gap: 20px; 
    margin: 20px 0; 
}

.tartalom-row figure {
    flex: 1 1 180%; 
    max-width: 80%; 
    text-align: center; 
}

.tartalom-row figure img {
    width: 120%; 
    max-width: 100%;
    height: auto; 
    border-radius: 8px; 
}

.tartalom-row div {
    flex: 1 1 50%; 
    text-align: justify; 
    line-height: 1.8; 
    max-width: 50%;
}

h1, h2 {
    text-align: center;
    color: #004464;
}

#fomenu {
    display: flex;
    justify-content: center;
    background-color: #003d7a;
    padding: 10px;
    flex-wrap: wrap;
}

#fomenu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    margin: 5px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#fomenu a:hover {
    background-color: #005bb5;
}

#fomenu a.active {
    background-color: #005bb5; 
    color: white; 
    font-weight: bold; 
    border-bottom: 2px solid #003d7a; 
}

main {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f0f8ff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

figure {
    text-align: center;
    margin: 20px 0;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.hover-image:hover {
    transform: scale(1.05);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

caption p {
    font-weight: bold;
    margin-bottom: 5px;
}

th, td {
    border: 1px solid #004164;
    padding: 10px;
    text-align: center;
}

th {
    background-color: #cce4ff;
}

td {
    background-color: #e6f2ff;
}

#urlap {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background-image: url("sea.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#urlap h2 {
    color: #003d5c;
    font-size: 30px;
    background-color: white;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid #005bb5;
    display: inline-block;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form fieldset {
    border: 2px solid #005bb5;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #ffffff;
}

form p {
    font-weight: bold;
    margin-bottom: 10px;
}

input[type="radio"], input[type="checkbox"] {
    accent-color: #001aff; 
}

input[type="submit"], input[type="reset"], input[type="button"] {
    background-color: #005bb5;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    background-color: #003d7a;
}

textarea, input[type="text"], input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background-color: #f0f8ff;
    color: #003d5c;
    font-size: 15px;
}

textarea:hover, input[type="text"]:hover, input[type="email"]:hover {
    background-color: #e6f2ff; 
}

label {
    display: inline-block;
    margin-right: 10px;
}

a:link {
    color: #005bb5; 
}

a:visited {
    color: #7a005b; 
}

a:hover {
    color: #003d7a; 
    text-decoration: underline; 
}

a:active {
    color: #ff4500; 
}

footer {
    max-width: 900px; 
    margin: 20px auto; 
    padding: 20px; 
    background-color: #f0f8ff; 
    border-radius: 8px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    text-align: start; 
}

footer p {
    margin: 10px 0; 
    color: #003d5c; 
}

footer a {
    color: #005bb5; 
}

footer a:visited {
    color: #7a005b; 
}

#bevezeto {
    flex: 2;
    text-align: justify; 
    padding: 10px; 
    font-size: 18px; 
    line-height: 1.8; 
}

main video {
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 20px auto; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

/* kiskepernyoknek flex */

@media (max-width: 768px) {
    .content-row, .image-row, .tartalom-row {
        flex-direction: column; 
        gap: 10px;
    }

    .content-row figure, .image-row figure, .tartalom-row figure {
        flex: 1 1 100%; 
        max-width: 100%;
    }

    .content-row #bevezeto, .tartalom-row div {
        flex: 1 1 100%; 
        max-width: 100%;
    }

    img, video {
        max-width: 100%; 
        height: auto;
    }
}

/* tablet meret */ 
@media (max-width: 1024px) {
    .content-row, .image-row, .tartalom-row {
        flex-direction: column; 
        gap: 20px;
    }

    .content-row figure, .image-row figure, .tartalom-row figure {
        flex: 1 1 100%; 
        max-width: 100%;
    }

    .content-row #bevezeto, .tartalom-row div {
        flex: 1 1 100%; 
        max-width: 100%;
    }
}