html {
    font-family: Avenir, Helvetica, sans-serif;
    margin: 0; 
    padding: 0;
    height: 100%;
    background-color: midnightblue;
}

body {
    margin: 0; 
    padding: 0;
}

h1 {
    column-span: all;
    text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: left;
}

.container {
    display: flex;
    overflow: auto;
    flex: none;
    width: 100vw;
    max-height: 100vh;
    flex-flow: column nowrap;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    scroll-behavior: smooth;
    text-align: justify;
  }

.container > div {
    scroll-snap-align: start;
    height: 100%;
    width: 100%;
    flex: none;
  }


  a:link {
    text-decoration: none;
  }


nav > a:link {
    text-decoration: underline;
    color: #305291;
  }
  
nav > a:visited {
    text-decoration: underline;
    color: indigo;
}

.page {
    min-height: 100vh;
    color: midnightblue;
    border-bottom: 5px dashed midnightblue;
    background-color: whitesmoke;
}

.standard {
    padding-left: min(400px, 12vw);
    padding-right: 12vw;
    padding-top: 12vh;
    padding-bottom: 12vh;
    margin: auto;
    box-sizing: border-box;
    columns: auto 40ch;
    column-gap: 4rem;
    column-fill: balance;
}

.callout {
    display: grid;
    font-size: 3rem;
    justify-content: center;
    align-content: center;
    text-align: center;
}

/*
.page.standard {
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
}
*/

.hero {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    
}

.first {
    grid-column: 1/2;
    grid-row: 1/2;
    background: midnightblue; /*rgb(48, 82, 145);*/

}
header {
    grid-column: 2/3;
    grid-row: 2/3;
    background: maroon;/*rgb(228, 89, 64);*/
    font-size: 1rem;
    overflow-wrap: break-word;
    writing-mode:vertical-lr;
    color: white; 
    padding-left: 1rem;
    padding-top: 0.8rem;
}

.lastname {
    writing-mode: sideways-lr;
    color: maroon;
    background: white;
    padding-right: 0rem;
    margin-right: 0rem;
    padding-bottom: 0.8rem;
}

.firstname {
    padding: 0.5rem; 
    padding-bottom: 1rem;
}

footer {
    scroll-snap-align: start;
    display: grid;
    align-items: center;
    min-height: 75vh;
    padding: 2rem;
    background-color: midnightblue;
    color: whitesmoke;
    text-align: center;
    box-sizing: border-box;
}
footer a:link {
    text-decoration: underline;
    color: whitesmoke;
    }
    
footer a:visited {
    text-decoration: underline;
    color: aliceblue;
}


/* NAVIGATION ELEMENTS */
nav {
    grid-row: 2/3;
    display: grid;
    grid-template-rows: 1fr min-content min-content min-content min-content;
    margin: 1rem; 
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-decoration: none;
    list-style: none;
    
}

#CV {
    grid-row: 2/3;
    margin: 0.5rem;
}
#github {
    grid-row: 3/4;
    margin: 0.5rem;
}

#resume {
    grid-row: 4/5;
    margin: 0.5rem;
}

#projects {
    grid-row: 5/6;
    margin: 0.5rem;
}

.page.image {
    display: grid;
    height: 100vh;
    width: 100vw;
    background-color: white;
  }

  img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: 30px;
    width: max(50vw, 65ch);
    margin: auto;
  }

.nobg {
    background-color: white !important;
}

.highlight {
    color: maroon;
    font-weight: bold;
}

/**********/ 

.new_page {
    min-height: 100vh;
    color: midnightblue;
    border-bottom: 5px dashed midnightblue;
    background-color: whitesmoke;
    display: grid;
    justify-content: center;
    align-content: center;
}

.new_standard {
    padding-left: 12vw;
    padding-right: 12vw;
    padding-top: 12vh;
    padding-bottom: 12vh;
    margin: auto;
    box-sizing: border-box;
    columns: 2 43ch;
    column-gap: 3rem;
    column-fill: balance;
}