/*  global CSS   */
body{   
    background-color:#A4A89A;
    font-family: 'Quicksand';
    font-size: 22px;
}
/*remove bullets on list*/
ul{
    list-style-type:none;
    margin: 0;
    padding: 0;
}
a{
    color: red;
}
a:link{
    text-decoration: none;
}

/*  header image    */
#header {
    margin-top:5%;
    display:block;
    height:40%;
    background-image: url('header.png');
    background-repeat: no-repeat;
    background-position:center;
    background-size: auto 100%;
}
/*  options menu */
#optionsMenu{
    position:absolute;
    top:30px;
    right:10px;

    border-radius:25px;
    border: 2px solid black;
    padding: 25px;

    cursor: pointer;
}
/*CSS for the 3 bars on the options menu button.*/
.bar1, .bar2, .bar3{
    width: 35px;
    height: 5px;
    background-color: Black;
    margin: 6px 0;
    transition: 0.4s;
}
/* options menu animations*/
.change .bar1 {transform: translate(0, 11px) rotate(-45deg);}
.change .bar2 {opacity: 0;}
.change .bar3 {transform: translate(0, -11px) rotate(45deg);}

/*
Each of the menu items on the dropdown menu.
*/
.optionsItem{
transition: 0.3s;

}
.optionsItem:hover{
    border-radius: 10px;
    background-color: black;
}

/*
display of dropdown menu will toggle with Javascript.
This code means that by default the dropdown menu will not be open
*/
#dropdown{
    display:none;
}
/*
cover photo is the photo underneath the header.
*/
.coverphoto{
    margin-top:-5%;
    height:50%;
    object-fit:fill;
    background-repeat: no-repeat;
    background-position:center;
}
/*  FB icon */
#fbLink{
    position: absolute; 
    top:30px;
    left: 10px;
    background-color:#A4A89A;
    fill:#1877F2;
    padding: 0;
    border:none;
    cursor: pointer;
}