:root {
    --main-clr: hsl(15, 99%, 40%);
    --first-acc-color: #002868;
    --second-acc-color: hsl(0, 0%, 100%);
    --main-bckgrnd-clr: hsla(0,0%,100%);
    --bg-image: url(
        "../images/back-image.jpg");
    --bg-image-opacity: .5;
    --footer-bg: hsl(0, 0%, 71%);
    
}

body {
    color: var(--main-clr);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--main-bckgrnd-clr);
    /* margin: 30px; */
}

/* body * { border: 1px solid red; } */

.header{
    display: flex;
    margin: 1rem;
}

.title-grp{
    display: flex;
    height: 9rem;
}
.title-text-grp > .title{
    font-size: xxx-large;
}
.prof-image > img{
    height: 128px;
}
.content{
    text-align: left;
}

.menu{
    position: absolute;
    display: grid;
    top: 2rem;
    right: 2rem;
    margin-top: 0rem;
    padding-left: 4rem;
    z-index: 10;
}

.menu-item{
    padding: 0rem 0.5rem;
    background-color: var(--main-clr);
    color: var(--main-bckgrnd-clr);
    border-bottom: 1px solid white;
}

.menu-item > a{
    text-decoration: none;
    color: var(--main-bckgrnd-clr);
}

.menu-items {
    left: 23vh;
    top: 2rem;
    position: absolute;
    width: 0px;
    left: 0px;
    overflow: hidden;
    transition: all .5s;
}

.checkbtn > img{
    max-width: 24px;
    margin: .2rem;
    padding: .2rem;
}

.checkbtn{
    display: block;
    min-height: 2.4rem;
    background-color: var(--main-clr);
    width: 2.4rem;
}

#check:checked ~ .menu-items{
    background-color: aqua;
    left: -72%;
    height: 0px;
    color: red;
    width: 11rem;
    overflow: unset;
}

.alt-menu-items{
    display: none;
}

.menu-thin{
    position: relative;
    z-index: 10;
    border-color: var(--main-clr);
    margin-top: -50px;
}

.bio{
    margin: 2rem 0rem;
}
.bio > .bio-title{
    font-size: x-large;
}
.bio > .bio-content{
    margin: 2rem 2rem 2rem 2rem;
}

.main-text{
    font-size:larger;
}

.footer{
    background-color: var(--footer-bg);
    color: var(--main-bckgrnd-clr);
    display: grid;
}

.contact-item{
    margin: 2rem;
}

.contact-title{
    font-size: larger;
    text-decoration: underline;
}

@media (min-width: 40em){
    .header {
        /* display: grid;
        grid-template-columns: 25vw 1fr;
        align-items: center;
        background-color: var(--clr-main-light); */
    }

    .main-content{
        display: flex;
    }

    .menu{
        position: absolute;
        display: grid;
        background-color: var(--main-clr);
        top: 7rem;
        left: 0rem;
        width: 92vw;
        z-index: 10;
    }
    
    .alt-menu-items{
        display: flex;
    }
    .menu-item{
        position: relative;
        left: unset;
        border: unset;
    }

    .checkbtn {
        display: none;
    }

    #check {
        display: none;
    }
    
    .simple-menu {
        display: none;
    }
    
    .menu-thin{
        display: none;
    }

    .content{
        margin-top: 0rem;
    } 
       
    .main-text{
        font-size:unset;
    }
}

#check {
    display: none;
}