@import url('https://fonts.googleapis.com/css2?family=Merriweather&family=Oswald:wght@300&display=swap');

html, body { height: 100%; margin: 0; }
body { background-color: #F8E6FC; }


.main { 
    width: 1000px; 
    margin: 0px auto; 
    background-color: #fff; 
    min-height: 100%;
}


.header, .navbar { background-color: #EB84F2; }


.dropdown { display: inline-block; position: relative; }
.dropdown:hover .submenu { display: block; }


.button { 
    margin: 0px; 
    font-family: 'Oswald', sans-serif; 
    font-size: 19px; 
    font-weight: bold; 
    padding: 10px 16px; 
    text-align: left; 
    display: inline-block; 
    width: 160px; 
    background-color: #FF43E8; 
    color: #000; 
    cursor: pointer; 
    border: none;
}

.button a { 
    color: #000; 
    text-decoration: none; 
    display: inline-block; 
    width: 100%; 
}

.button:hover { background-color: #DB02CF; }

.submenu { 
    font-family: 'Arial', sans-serif; 
    font-size: 16px; 
    text-align: left; 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}

.submenu a { 
    width: 160px; 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
}

.submenu a:hover { background-color: #f1f1f1; }


h1 { font-family: 'Merriweather', serif; font-size: 28px; margin: 20px; color: #333; }
p { font-family: 'Oswald', sans-serif; font-size: 19px; line-height: 140%; margin: 20px; color: #333; }
img { display: block; margin: 20px auto; max-width: 100%; height: auto; }


@media screen and (max-width: 1000px) {
    .main { width: 95%; }
}

@media screen and (max-width: 500px) {
    .main { width: 100%; }
    .button { width: 100%; box-sizing: border-box; }
    .dropdown { display: block; width: 100%; }
    .submenu { position: static; width: 100%; box-shadow: none; }
    .submenu a { width: 100%; box-sizing: border-box; padding-left: 30px; }
    
    #menuButton { display: block; background: #797CF6; color: white; padding: 10px; text-align: center; cursor: pointer; }
    #menu { display: none; } 
}