html{
    scroll-behavior: smooth;
}

body{
    font-family: "Assistant",sans-serif;
    background-image: linear-gradient(270deg, #A5CBAB, #74BD80);
    margin: 0; /*some browsers add margin to body, which makes the top-bar not take up full screen width somehow */
    padding: 0;
    color: F5F5DC;
}


a:hover{
    /* color:#2079AB; */
    filter: brightness(130%);
}

a:visited{
    color: inherit;
}

#navbar{
    background-color: rgb(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 25px;
    padding-bottom: 25px;
}


#home{
    background-image: linear-gradient(50deg, black, hsl(202, 38%, 46%));
    background-clip: text;
    color: transparent;
    text-decoration: none;
    padding: 0;
    font-size: calc(0.5vw + 25px);
    font-weight: bold;
    /* color: black; */
    /* -webkit-text-fill-color: black; fix for different color in Safari */

}


@media  (orientation: portrait){
    #home{
        margin: auto; /*ensures equal spacing on L and R when home is the only element in the row*/
    }
}

@media  (orientation: landscape){
    #home{
        position: relative;
        left: 12vw;
    }
}

#menu{
    display: inline;
    color: #F5F5DC;
    font-size: calc(0.5vw + 18px);
    /* margin: 10px auto; */
    /* font-size: 26px; */
}

@media  (orientation: portrait){
    #menu{
        margin: auto;
    }
}

@media  (orientation: landscape){
    #menu{
        position: relative;
        left: -12vw;
    }
}


#home:hover{
    opacity: 80%;
}


.menulink{
    color: #F5F5DC;
    text-decoration: none;
}

#menu > * {
    margin: 20px;
    font-weight: 500;
}

#info{
    padding: 5px;
    /* padding-left: 100px;
    padding-right: 100px; */
    font-size: 20;
    font-weight: 400;
    /* margin-left: auto;
    margin-right: auto; */
    margin-top: calc(25vmin - 60px); 
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

#bio > p > a {
    color: #2079AB;
}

/* #info > * {
    margin: auto; 
    text-wrap: wrap;
} */

#profile_pic{
    position: static;
    display: block;
    /* margin: auto; */
    width:250px;
}

@media (max-aspect-ratio: 8/7){
    #profile_pic{
        /* margin-right: 50vw; */
        margin: auto;


        /* margin: auto; */
    }
}

@media (min-aspect-ratio: 8/7) {
    #profile_pic{
        position: relative;
        left: -12vw;
    }
}

#bio{
    width: calc(50vmax - 5vmin);
    /* max-width: 50vw;
    min */
}

@media (max-aspect-ratio: 8/7){ /* designed for portrait */
    #bio{
        margin: auto;
        width: 90vw;

    }
}

@media (min-aspect-ratio: 8/7){ /* landscape on desktop */
    #bio{
        width: calc(42vmax);
        position: relative;
        left: 12vw;
    }
}

@media only screen and (max-width: 768px) and (min-aspect-ratio: 8/7){
    #bio{
        width: 38vmax;
        position: relative;
        left: 12vw;
    }
}

#hello{
    font-size: 24;
    font-weight: 600;
}

#company{
    text-decoration: none;
}


.invisible{
    opacity: 0;
    /* -webkit-animation: fading ease-in 1s; */
    animation: fadeInAnimation ease-in .5s;
    /* -webkit-animation-fill-mode: forwards; */
    animation-fill-mode: forwards;
    /* -webkit-animation-duration: 1s; */
    animation-duration: 1s;
}

.half_s_delay{
    animation-delay: 0.5s;
}

.one_s_delay{
    animation-delay: 1s;
}

.one_and_a_half_s_delay{
    animation-delay: 1.5s;
}

.two_s_delay{
    animation-delay: 2s;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}