* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

body {
    background-color: rgb(237, 205, 147);
}

#container {
width: clamp(390px, 100%, 1440px);      

/* used to set a minimum, normal, and maximum.
 390px for height, 100% width, and width is 1440px */

min-height: 700px;
border: 3px solid black;
margin: 4px auto; /* centers this container */
}

#topbar {
border-bottom: 3px solid black; background-color: rgb(120, 119, 117);
height: 60px;
color: white;
text-align: center;
font-size: 2em;
}

#navbar {
background-color: rgb(209, 203, 203);height: 40px;
text-align: center;
font-size: 2em;
}

#hero {
position: relative;
aspect-ratio: 1000/400;
overflow: hidden;



/* creating the illusion of multiple borders */


box-shadow: 0px 20px 0px red,
0px 40px 0px orange,
0px 60px 0px yellow,
0px 80px 0px blue;



}

#hero video {
    position: absolute; top: 50%; left: 0; width: 100%;
aspect-ratio: 1000/562;
transform: translateY(-50%); /*moving the vid upward by 50% 
of the height of the vid */

text-align: center;
}

.gradient-overlay {
position: absolute; top: 0; left: 0; width: 100%;
aspect-ratio: 1000/400;
background-color: hsla(0, 70%, 68%, 0.3);
background-image: linear-gradient(90deg, hsla(0, 8%, 48%, 0.8), hsla(0,100%,0%, .1));


}

p.overlay-text {
    
    position: absolute; top: 20px; left: 8px;
    font-size: 1em; color: white;
    font-weight: bold;
    text-transform: capitalize;
    }

    div.hero-cta {
        
        position: absolute; bottom: 50px; right: 8px;

    }

    div.hero-cta a {
        border: 2px solid white;
        text-decoration: none;
        text-transform: uppercase;
        margin-right: 40px;
        padding: 20px 5px 5px 40px;
        color: white;
        font-size: .7em;
        font-weight: bold;
        width: 260px;
        text-align: right;
        background-image: url(../images/blue.png);
        background-size: 100% 0%; 
        background-repeat: no-repeat;
        background-position: left bottom;
        transition: background-size 200ms linear;
        
    
    }

div.hero-cta a:hover {
    background-size: 100% 100%;
}

    div.hero-cta a:last-child {
        background-color: white;
        color: black;
    }

    div .hero-cta a:last-child:hover {
        color: white;
    }