:root {
    --green: #00FF00;
    --white: #FFFFFF;
    --black: #000000;
}

.div1 {
    background: url(images/IMG_3527.PNG);    
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
    
.logo {
    display: flex;
    color: white;
    padding: 14px 16px;
    font-family: Impact;
    font-weight: 900;
    font-size: 20px;
}

.div2 {
    background-color: green;
}

html,
body,
div {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%; 
}


.navbar {
    display: flex;
    color: white;
    font-family: Impact;
    font-weight: 900;
    position: absolute;
    right: 0;
}

.navbar a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    height: 20px;
    text-decoration: none;
    font-size: 20px;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

.div1 #dropdown {
    display: none;
    position: absolute;
    top: 70px;
    right: 0;
    z-index: 1000;
}

.hamburger {
    display: none;
}

.name {
    color:white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    bottom: 0;
    width: 100%;
    margin: 0;
    position: absolute;
    text-align: center;
    white-space: nowrap;
    font-size: 19vw;
    transition: font-size 0.3s ease;  /* Smooth transition when resizing */
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {

    /*Hides navigation bar*/
    .navbar {
        display: none;
    }

    /*Hides dropdown menu*/
    .div1 #dropdown {
        display: none;
    }

    /*styles hamburger menu*/
    .hamburger { 
        color: white;
        display: block;
        text-align: right;
        padding: 14px 16px;
        height: 20px;
        width: 20px;
        font-size: 20px;
        position: absolute;
        margin-top: 22px;
        right: 0;
        z-index: 1100;
    }

    
    .hamburger:hover {
        background-color: #ddd;
        color: black;
    }

    .div1 {
        overflow: hidden;
        position: relative;
    }

    .div1 a {
        background-color: #5D8772;
        color: white;
        display: block;
        font-size: 17px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        padding: 14px 16px;
        text-align: center;
        text-decoration: none;
        position: relative;
        
        
    
    }

}