@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Open+Sans:wght@300;400&family=Oswald:wght@500&family=Roboto:wght@300&display=swap');

* {
    font-family: 'Roboto', sans-serif;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    text-align: center;
}

html {
    background-color: rgb(240, 240, 240);
}

h1, .cta, a {
    font-family: 'Oswald', sans-serif;
    color: rgb(30, 30, 30);
    text-transform: uppercase;
}

.cta {
    font-size: xx-large;
}
a {
    color:rgb(185, 50, 226);
}
a:hover {
    transition: .2s ease-in-out;
    color:rgb(121, 10, 155);
}
header {
    top: 0;
    display: flex;
    flex-direction: column; 
    align-items: center;
    background-color: rgb(30, 30, 30);
    color: rgb(240, 240, 240);
    padding: 5px 0;
    z-index: 1000;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6);
    background: linear-gradient(to top, rgb(15, 15, 15), rgb(19, 19, 19));
}

.header-imgs {
    display: flex;
    justify-content: center;
}

.logo img {
    width: 120px;
    height: auto;
    max-width: 100%
}

nav {
    width: 100%;
    display: flex;
    flex-direction: column; 
    align-items: center;
    background: linear-gradient(to bottom, rgb(15, 15, 15), rgb(30, 30, 30));
}

nav ul {
    display: flex;
    flex-direction: column; 
    gap: 10px; 
    padding: 0;
}

li {
    font-size: large;
    text-align: center;
}

nav a {
    font-family: 'Bangers', cursive;
    color: rgb(240, 240, 240);
    font-size: 22px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

nav li {
    font-size: 18px;
}

.container {
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
    flex-grow: 1;
}

.container-wrapper {
    flex: 0 1 48%; 
    box-sizing: border-box;
    text-align: right;
}

.video-wrapper {
    flex: 0 1 48%; 
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.video-wrapper iframe {
    width: 420px;
    height: 330px;
    border-radius: 7.5px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6);
}

footer {
    margin-top: auto;
    background-color: rgb(30, 30, 30);
    color: rgb(240, 240, 240);
    padding: 10px 0;
    text-align: center;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6);
    background: linear-gradient(to top, rgb(12, 12, 12), rgb(30, 30, 30));
}
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left-section, .right-section, .middle-section {
    padding: 5px;
}
@media (max-width: 767px) {
    header {
        max-height: 12vh;
    }
    .logo img {
        max-width: 60%;
        max-height: auto;
    }
    nav {
        display:none;
    }
    .container {
        flex-direction: column;
        align-items: center;
    }
    .container-wrapper,
    .video-wrapper {
        width: 100%;
    }
    .footer-container
    {
        max-height: 8vh;
    }
    .left-section, .right-section, .middle-section {
        font-size: x-small;
    }
}

@media (max-height: 650px) and (max-width: 500px){
    .logo img {
        transition: .2s;
        display:none;
    }
    nav {
        display: contents;
    }
}
@media (max-height: 400px){
    .logo img {
        transition: .2s;
        display:none;
    }
    nav {
        display: contents;
    }
}