@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

body{margin:0;font-family: Spectral, Arial;}

header{
    background-color: white;
    z-index:5;
    position:sticky;
    top:0;
    font-size: 18px;
}

header .main{
    width:100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

header .logo{
    height: 65px;
    width: auto;
    justify-self: start;
    align-self: center;
    padding: 10px;
    margin-left: 15px;
    -webkit-user-drag: none;
}

header .sections{
    align-self: center;
    justify-self: center;
    display: flex;
    max-width: 50vw;
    vertical-align: middle;
}

header .sections .articles{
    anchor-name: --articlea;
    margin-right:75px;
    padding-bottom: 10px;
    color: black;
    text-decoration: none;
}

header .sections .articles:hover{
    color:grey;
}

header .sections .articledrop{
    background-color: rgb(36, 36, 36);
    padding-inline:5px;
    min-width: 60px;
    position-anchor: --articlea;
    position:absolute;
    inset-block-start: anchor(end);
    inset-inline-start:anchor(left);
    display:none;
    color: white;
}

header .sections .articledrop:hover, header .sections .articles:hover + .articledrop{
    display:unset;
}

header .sections .photos{
    margin-right: 75px;
    color: black;
    text-decoration: none;
}

header .sections .photos:hover{
    color:grey;
}

header .sections .calendar{
    margin-right: 75px;
    color: black;
    text-decoration: none;
}

header .sections .calendar:hover{
    color:grey;
}

header .sections .aboutus{
    anchor-name: --abouta;
    padding-bottom: 10px;
    color: black;
    text-decoration: none;
}

header .sections .aboutus:hover{
    color:gray;
}

header .sections .aboutdrop{
    background-color: rgb(36, 36, 36);
    padding-inline:10px;
    min-width: 70px;
    position-anchor: --abouta;
    position:absolute;
    inset-block-start: anchor(end);
    inset-inline-start:anchor(left);
    overflow: hidden;
    color: white;
    max-height:0;
    transition: max-height 0.15s ease-out;
    margin-top: 6.5px;
}

header .sections .aboutdrop:hover, header .sections .aboutus:hover + .aboutdrop{
    max-height: 100px;
    transition: max-height 0.25s ease-in;
}

header .sections .option{
    margin-block: 7px;
    padding-inline:5px;
}

header .sections .option:hover{
    background-color: grey;
}

header .sections .option a{
    color: white;
    text-decoration: none;
}

header .menu{
    justify-self: end;
    align-self: center;
    padding:10px;
}

header .menubutton{
    height: 45px;
    width:auto;
    margin: 10px;
    cursor: pointer;
    -webkit-user-drag: none;
}

header .menubuttonbis{
    height: 45px;
    width:auto;
    margin: 10px;
    cursor: pointer;
    -webkit-user-drag: none;
    display: none;
}

.dropdownmenu{
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    font-size: 18px;
    padding-block: 0px;
    padding-inline:20px;
    display: flex;
    flex-direction: column;
    position:fixed;
    left: 0;
    right:0;
    z-index: 4;
    max-height: 0px;
    overflow: scroll;
    transition: padding-block 0.25s ease-in;
    transition: max-height 0.25s ease-in;
}

.dropdownmenu a{
    color:white;
    text-decoration: none;
    margin-block:5px
}

.dropdownmenu a:hover{
    color:grey;
}

.dropdownmenu div{
    margin-block:5px
}

@media screen and (max-width:800px) {
    header .sections{
        display: none;
    }
    header .menubutton{
        display: none;
    }
    header .menubuttonbis{
        display: block;
    }
    header #hamburger{
        display: block;
    }
    header #x{
        display: none;
    }
    .dropdownmenu{
        padding-block: 0px;
        max-height: 0px;
    }
}

@media screen and (width >= 800px) {
    header .sections{
        display: flex !important;
    }
    header .menubutton{
        display: block !important;
    }
    header .menubuttonbis{
        display: none !important;
    }
    .dropdownmenu{
        padding-block: 0px !important;
        max-height: 0px !important;
    }
}