:root {
    font-size: 125%;
    --masthead-offset: 21.2%;
}

/* START OF HEADING TIMELINE FONTS */

    .caslon {
    font-family: adobe-caslon-pro, serif;
    font-weight: 400;
    font-style: normal;
    }
    
    .baskerville {
    font-family: berthold-baskerville-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    }
    
    .bodoni {
    font-family: bodoni-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    }

    p .bodoni {
        font-size: 1.17rem;
        letter-spacing: 0.009rem;
    }
    
    .egyptian {
    font-family: "bodoni-egyptian-pro", serif;
    font-weight: 400;
    font-style: normal;
    }
    
    .slab {
    font-family: "hwt-slab-antique", serif;
    font-weight: 400;
    font-style: normal;
    }

    p .egyptian {
        font-size: 1.1rem;
        letter-spacing: 0.009rem;
    }
    
    .clarendon {
    font-family: "clarendon-text-pro", serif;
    font-weight: 400;
    font-style: normal;
    }
    
    .vanlanen {
    font-family: "hwt-van-lanen", sans-serif;
    font-weight: 500;
    font-style: normal;
    }
    
   .american {
    font-family: "hwt-american-solid", sans-serif;
    font-weight: 400;
    font-style: normal;
    inset-block-start: 0.1vw;
    position: relative;
    }

    header .american {
    font-family: "hwt-american-solid", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
    inset-block-start: 0.52vw;
    }

    p .american {
    font-size: 0.94rem;
    }
    
    .tripoli {
    font-family: "am-tripoli", sans-serif;
    font-weight: 400;
    font-style: normal;
    }
    
    .akzidenz {
    font-family: "akzidenz-grotesk-next-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    }
    
    .futura {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    }

    p .futura {
        font-size: 1.175rem;
    }
    
    .helvetica {
    font-family: "helvetica-lt-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    }

    p .helvetica {
        font-size: 0.95rem;
    }
    
    .lores21 {
    font-family: "lores-21-serif", sans-serif;
    font-weight: 400;
    font-style: normal;
    }

    p .lores21 {
       font-size: 1.06rem; 
    }
    
    .lores9 {
    font-family: "lores-9-plus-narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    }

    p .lores9 {
        font-size: 0.95rem;
        position: relative;
        inset-block-start: 0.022rem;
    }

    .lores12 {
    font-family: "lores-12", sans-serif;
    font-weight: 400;
    font-style: normal;
    }
    
    .lores9 {
    font-family: "lores-9-minus-narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    }

    .didot {
    font-family: "aw-conqueror-didot", serif;
    font-weight: 400;
    font-style: normal;
    }


    p .didot {
        font-size: 1.1rem;
    }

    /* END OF HEADING TIMELINE FONTS */

h2 {
    font-family: "akzidenz-grotesk-next-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2rem;
    margin-block-start: 2.5em;
    margin-block-end: 0.5em;
    padding-block-start: 0.5rem;
    color: #141414;
    border-block-start: solid rgb(34, 79, 158) 0.25rem;
    line-height: 1.85ex;
}


header p {
    text-align: end;
    font-family: "akzidenz-grotesk-next-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    margin-block-start: -0.6em;
    margin-block-end: 5em;
    color: #141414;
    padding-block-end: 0.5rem; 
    line-height: 2ex;
}

.main {
    background-color: #F5F5F0;
    font-size: 6.425vw;
    transition: ease-in-out 300ms;
    color: #F5F5F0;
    inset-block-start: -13rem;
    padding: 2rem;
    position: sticky;
    width: 100%;
    height: 50vh;
    line-height: 1.3ex;
    z-index: 10;
}

.main h1 {
    position: absolute;
    inset-block-start: 55%;
    background-color: #f5f5f074;
    z-index: 100;
    text-shadow: 0.09rem 0.09rem 0.5rem rgb(97, 189, 255);

}

.maincontainer {
    /* background-color: green; */
    width: calc(100% - 2rem);
    height: 50%;
    position: absolute;
    inset-block-end: 2rem;
}

time {
    color: rgb(97, 189, 255);
    font-style: normal;
}

/* Had to use a bit of flex to make this effect work, reviewed here: https://developer.mozilla.org/en-US/docs/Web/CSS/flex */

.timeline {
    /* background-color: rgb(97, 189, 255); */
    /* background-color: green; */
    transition: ease-in-out 300ms;
    font-size: 0.65rem;
    width: 58.3vw;
    
    display: flex;
    align-items: center;
    gap: 1rem;
    height: auto;
    margin-block-start: 10rem;
}

.timeline .line {
  flex: 1 1 auto;
  height: 0.1rem;
  background-color: rgb(97, 189, 255);
  margin: 0;
}

.line {
    background-color: rgb(97, 189, 255);
    height: 0.2rem;
}

.timeline time {
    transition: ease-in-out 300ms;
    font-family: "akzidenz-grotesk-next-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: static;
}

.timeline time.right {
  margin-inline-start: 0;
}

.line { 
    width: auto; 
    margin-inline: 0;
    inset-block-end: auto; 
}

.main .timeline {
    inset-block-end: auto; 
}  

span, em {
    color: rgb(34, 79, 158);
    }

h1 span {
    color: #141414;
}

header p {
    font-size: 1rem;
}



p {
      line-height: 2.5ex;
      margin-block-start: 2rem;
      margin-block-end: 2rem;
      color: #141414;
      font-family: "akzidenz-grotesk-next-pro", sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: 0.006rem;
    }

body {
      background-color: rgb(217, 239, 255);
    } 

.lupton {
    padding-inline-end: 32em;
    padding-inline-start: 7rem;
    margin-block-start: 17rem;
}

footer {
   padding-block: 1em;
   padding-inline-start: 7rem;
   background-color: rgb(34, 79, 158);
   border-block-start: solid rgb(97, 189, 255) 0.25rem;

}

footer p {
    font-family: "akzidenz-grotesk-next-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    color:  #F5F5F0;
    line-height: 1.85ex;
    margin-block: 0.3rem;
}

footer a {
    color:  #F5F5F0;
}

blockquote {
    font-size: 1.5rem;
    font-style: italic;
    padding: 4.5rem;
    padding-inline-start: 3rem;
    padding-inline-end: 0rem;
    text-align: end;
    }

blockquote p {
    line-height: 2.75ex;
    font-style: italic;
    color: #5b5b5b;
}

h4 {
    font-family: "akzidenz-grotesk-next-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    color: rgb(34, 79, 158);
    line-height: 1.75ex;
    margin-block: 2.5rem;
}

.french em {
    color: #F5F5F0;
    text-shadow: none;
    font-style: italic;
}

.french {
    text-shadow: none;
    font-style: italic;
    background-color: rgb(34, 79, 158);
    padding-inline-end: 7rem;
    padding-inline-start: 32rem;
    padding-block-start: 3rem;
    padding-block-end: 7em;
    margin-block-start: 2rem;
}

.french p {
   color: #F5F5F0;
}

.french h2 {
   color: #F5F5F0;
   border-block-start: solid rgb(97, 189, 255) 0.25rem;
}

.designer {
    font-weight: 700;
    color: #141414;
    font-style: normal;
    transition: ease-in-out 300ms;
}

a {
    text-decoration: underline;
    transition: ease-in-out 300ms;
    color: #141414;
    text-shadow: none;
}

a:visited {
    color: rgb(34, 79, 158);
    transition: ease-in-out 300ms;
}

footer a:visited {
    color: #F5F5F0;
    transition: ease-in-out 300ms;
}

footer a:hover {
    color: rgb(97, 189, 255);
    transition: ease-in-out 300ms;
}

a:hover {
    color: rgb(97, 189, 255);
    transition: ease-in-out 300ms;
}


blockquote time {
    font-weight: 400;
} 


.cursor {
  animation: blink 1s step-start infinite;
  color: #141414;
  font-family: "lores-22-narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* Learned about backdrop-filter effect thanks to the other Michael F. */
.secondary {
    position: sticky;
    background-color: rgba(217, 239, 255, 0.654);
    z-index: 5;
    margin-inline: -2rem;
    padding-inline: 2rem;
    inset-block-start: var(--masthead-offset);
    margin-block-end: 15rem;
    backdrop-filter: blur(0.2rem);
}


.french .secondary {
    background-color: rgba(34, 79, 158, 0.764);
    margin-block-end: 13rem;
}

.secondary p, .secondary time {

    margin-block-start: 1rem;
}

button {
    color: #141414;
    font-family: "akzidenz-grotesk-next-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 0.7rem;
    inset-inline-end: 2rem;
    position: fixed;
    inset-block-start: -0.06rem;
    transition: ease-in-out 300ms;
}

.lupbutton {
inset-inline-end: 14rem;
}

button:hover {
    color: rgb(97, 189, 255);
    transition: ease-in-out 300ms;
}

html {
  scroll-behavior: smooth; 
}

/* I've done a blink effect in other code projects before, but did use this as a reminder: https://css-tricks.com/snippets/css/keyframe-animation-syntax/ */

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Using media queries here to scale down font size and margins for smaller screen sizes. Also used to make mobile version a single column. */

/* Also going to have to redo them after lots of edits to the rest of the code :/ */

@media (max-width: 1300px) {

.french, .lupton, footer {
    padding-inline: 4em;
}

}

@media (max-width: 500px) {

.french, .lupton, footer {
    padding-inline: 2em;
}

.secondary {
    position: static;
}

}