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

html {
    font-family: "Chocolate Classical Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #001F3F;
    color: #F5F5DC;
}

@keyframes up {
    0% {
        top: -20px;
        color: transparent;
    }

    100% {
        top: 0px;
        color: #F5F5DC;
    }
}

.hd {
    color: #F5F5DC;
    text-decoration: none;
}

.up {
    animation: up 1s ease-in-out;
}

h1 {
    color: #F5F5DC;
    text-decoration: none;
    padding: 15px;
    display: block;
    text-align: center;
    transition: transform ease-in-out 0.3s;
    top: 20px;
    font-size: 40px;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
}

    .navbar ul {
        list-style-type: none;
        background-color: #007B76;
        padding-top: 10px;
        overflow: hidden;
        text-align: center;
    }

    .navbar a {
        color: #F5F5DC;
        text-decoration: none;
        padding: 0px;
        display: block;
        text-align: center;
        transition: transform ease 0.3s;
        position: sticky;
        top: 0px;
    }

        .navbar a:hover {
            color: black;
            transform: translateY(10px);
            background-color: orange;
        }

    .navbar li {
        float: left;
    }

footer {
    color: #F5F5DC;
    background-color: #007B76;
    backface-visibility: 80%;
}

.big {
    font-size: 20px;
}

.normal {
    font-size: 16px;
}

.small {
    font-size: 10px;
}

p {
    font-size: larger;
    text-align: left;
    margin: 30px;
}

a {
    text-decoration: none;
    color: #F5F5DC;
}

footer {
    text-align: center;
    padding: 20px;
    margin: 15px;
}

.image-container {
    width: 50%; /* or any other width less than 100% */
    margin: auto; /* This will center the container itself */
    text-align: center; /* This will center the image inside the container */
}

.img {
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition: 0.3s;
}

/* Dropdown styles */
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #007B76;
}

.navbar li {
    float: left;
}

    .navbar li a, .dropdown {
        display: block;
        color: #F5F5DC;
        text-align: center;
        padding: 10px;
        text-decoration: none;
    }

        .navbar li a:hover, .dropdown:hover .dropbtn {
            background-color: orange; /* Changed to orange */
            color: #F5F5DC; /* Ensuring text is visible on orange background */
        }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content li {
        float: none;
    }

        .dropdown-content li a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

            .dropdown-content li a:hover {
                background-color: orange
            }

.dropdown:hover .dropdown-content {
    display: block;
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
}