
body {
    background-color: rgb(255, 250, 250);
    color: rgb(23, 27, 59);
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-behavior: smooth;
}

p {
    font-family: 'roboto mono';
    color: rgb(23, 27, 59);
    font-size:small;
    font-weight: light;
}

a {
    font-family: 'Roboto Mono';
    font-size: medium;
    text-decoration: none;
    color: rgb(23, 27, 59);
    transition: .5s ease-in;
}

h1{
    font-family: 'roboto mono';
    color: rgb(23, 27, 59);
    font-size:larger;  
}

h2 {
    font-family: 'roboto mono';
    color: rgb(23, 27, 59);
    font-size: large;
    font-weight: bold;
}

h3 {
    font-family: 'roboto mono';
    color: rgb(23, 27, 59);
    font-size: large; 
    font-weight: normal;
}

hr {
    background-color:rgb(23, 27, 59);
    height: 1px;
    border: none;
    
}

.selnav {
    position:absolute;
    z-index: 1;
}

 header { 
    position:absolute;
 } 

#homepagelink {
    display: flex;
    position: fixed;
    margin: 0;
    bottom: 10px;
    max-width: 50vw;

}
nav {
    display: flex;
    position: fixed;
    justify-content:space-between;
    margin-top: 1%;
    right: 0;
    bottom: 10px;
    width: 50vw;
}


a.homelink {
    display: block;
    font-size: clamp(30px, calc(1vh + 1vw), 60px);
    font-family: 'roboto mono';
    text-decoration: none;
    color:  rgb(106, 103, 28);
}

a.worklink, a.aboutlink, a.cvlink {
    display: block;
    font-size: clamp(10px, calc(1vh + 1vw), 40px);
    padding-left: 5%; padding-right: 5%;
    color: rgb(23, 27, 59);
}

a.worklink:hover, a.aboutlink:hover, a.cvlink:hover {
    text-decoration: underline;
    cursor:crosshair;
}

a.homelink:hover {
    text-decoration: underline;
    cursor:crosshair;
}

#gallery {
    align-content: flex-start;
    display: grid;
    grid-auto-flow: column;
    overflow-x: scroll;
    scrollbar-width: none;
    margin-bottom: 5px;
    height: 93vh;
}

 #gallery img { 
    flex: 1 1 auto;
      display: block;
      object-position: center;
      margin: 0;
    height: 93vh;
    padding:0;
 } 


 @media (max-width: 992px) { 

    body {
    overflow-y: scroll;
    margin-top: 10%;
    }
    header {
        display: flex;
        width: 100%;
        height: 40px;

    }
    #homepagelink {
        display: flex;
        top: 5px;
    }  

    #homepagelink, nav {
        z-index: 10;
    }

    nav {
        align-items: flex-start;
        left: 50%;
        padding-left: 5px;
        width: 50%;
        top: 5px;
        padding-right: 50px;
  
    }

    #gallery {
        grid-auto-flow:row;
        overflow-y: scroll;
        overflow-x: scroll;
    }

    #gallery img {
    max-width: 100vw;
    height: 100%;
    }
}