@font-face {
  font-family: 'Apple Garamond';
  src: url("https://d33wubrfki0l68.cloudfront.net/68382d582a3b39a3cc4c4e968cd9f193a9a5bd91/d5440/fonts/applegaramond.woff");
}


@font-face {
  font-family: 'Apple Garamond Italic';
  src: url("https://d33wubrfki0l68.cloudfront.net/af1edfe04d5f2a8264aac5ee486e62a591bcaf22/ea111/fonts/applegaramond-italic.woff");
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

html,
body {
  background-color: #000;
  width: 100%;
  font-family: 'Apple Garamond', serif;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  align-items: center;
}

body{
  overflow: hide;
  scroll-snap-type: y mandatory;
  display: block;
}

/* @supports (-webkit-touch-callout: none) {
  h1, h2, h3{
    font-size: small;
  }
} */

.x {
  scroll-snap-align: center;
}

.snap {
  margin: 0;
  height: 100%;
  width: inherit;
  display: flex;
  flex-flow: column wrap;
  position: relative;
  margin-bottom: 50px;
}

.topnav {
  overflow: hidden;
}

.topnav div {
  padding: 1em;
}

.topnav a {
  text-transform: uppercase;
  font-family: 'Apple Garamond';
  font-size: 20pt;
  font-weight: 500;
  color: white;
  text-align: center;
  padding: 14px 16px;
}

.l {
  float: left;
}

.r{
  float: right;
}

.hello {
  padding: 1em;
  margin-bottom: 0;
  bottom: 0px;
}

.name {
  position: absolute;
  top: 280px;
  margin: 0;
  padding: 0%;
  padding-left: 0.5em;
  width: 100%;
}

#about {
color: black;
position: relative;
font-family: Garamond;
}

.desc {
  position: absolute;
  top: 620px;
  margin-left: 20px;
}

@media only screen and (min-width: 1600px) {
  .name h2 {
    margin-top: 70px;
  }

  .desc h3 {
    margin-top: 130px;
  }

}

h1 { color: white; font-family: Garamond; font-size: 20vw; font-style: italic; font-variant: normal; font-weight: 400; margin: 0; margin-left: 8px; padding: 0; border: 0; position: absolute; top: 80px;}

h2 {color: white; font-family: "Times New Roman"; font-size: 15vw; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: 3px; margin: 0; margin-left: 10px; padding: 0; border: 0; position: absolute; top: 90px; width: 100%;}


h3 {
  margin-left: 10px;
  margin-top: 0px;
  font-family: 'Apple Garamond';
  font-size: 10vw;
  font-weight: 500;
  color: white;
  margin-block-end: 0px;
}

section {
  display: flex;
  flex-flow: row wrap;
  padding-bottom: 20px;
}

P {
  color: lightgrey;
  overflow: hidden;
  font-size: 20px;
}

section h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  font-size: 28px;
}

img {
  margin: 0px;
  height: 216.625px;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

img:hover {
  opacity: 0.6;
  transition: all .3s linear;
}


.full {
  height: 100vmin;
}

.intro {
  margin-left: 30px;
  display: flex;
  flex-flow: column wrap;
}

#AI {
  background: black;
  margin-bottom: 150px;
}

#AI a, #AI img {
  height: 800px;
  width: 700px;
  align-self: center;
  padding-top: 20px;
  padding-right: 75px;
}

#email {
  display: flex;
  flex-flow: column wrap;
  height: 800px;
}
#email p {
  font-family: 'Roboto';
  align-self: center;
}

.section__left {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  align-items: center;
  margin-bottom: 50px;
}

.section__left hr {
  width: 97%;
  height: 1px;
  background-color: black;
}

.section__more h3 {
  margin-bottom: 40px;
  margin-left: 0px;
}

.section__more {
  color: white;
  width: 90%;
  margin-bottom: 5rem;
  margin-block-end: 3em;
}

.section__more a {
  color: white;
  text-decoration: none;
}

/* .section__more div {
  display: inline-flex;
  flex-wrap: wrap;
} */

.article__box {
  width: 25%;
  /* margin-right: 1.8rem;
  margin-top: 2rem; */
}

.article__box figure {
  padding-left: 10px;
  padding-right: 10px;
  margin-block-end: 10px;
  margin-inline-end: 0;
  margin-inline-start: 0;
  height: 100%;
}

.article__box figcaption {
  /* text-align: right; */
  font-size: 20px;
  color: grey;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}

.article__box h4 {
  font-weight: lighter;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: "IBM Plex Sans", sans-serif;
  margin-block-end: 0;
  margin-block-start: 0;
  font-size: 25px;
}

.section__more a:hover {
  color: blue
}

.article__box p {
  font-size: 1.2rem;
}

#title {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: space-between;
}

#title p {
  text-align: justify;
  float: inline-end;
  align-self: flex-end;
}

.scroll {
  display: flex;
  flex-flow: wrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

@media (max-width: 800px) {

  .snap {
    margin-bottom: 0px;
  }
  
  .intro {
    margin-top: 100px;
    flex: content;
    flex-flow: column wrap;
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
  h1 {
    margin-top: 50px;
    font-size: 30vw;
  }

  .desc{
    position: absolute;
    top: 450px;
    margin-left: 20px;
  }
  .scroll {
    flex-flow: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .intro h3 {
    margin-left: 0px;
  }

  .article__box figcaption {
    font-size: 3vmin;
  }

  .article__box figure {
    width: 50vw;
  }

  .article__box h4 {
    font-size: 3vmin;
  }

  .article__box {
    width: 90vw;
  }

  #AI a, #AI img {
    height: 75vh;
    width: 90vw;
  }

  #bs{
    display: flex;
    flex-flow: nowrap;
  }

  #email p {
    font-size: 3vh;
  }
}

@supports (-webkit-touch-callout: none) {

  h1 {
    font-size: 30vw;
  }
  
  h2 {
    margin-top: 50px;
    font-size: 20vw;
  }

  .intro h3 {
    margin-top: 150px;
    font-size: 13vw;
    margin-left: 0px;
  }

  h3 {
    font-size: 18vw;
  }

  .topnav a {
    font-size: 5vw;
  }

  .full {
    height: 85vh;
    margin-bottom: 50px;
  }

  .snap {
    overflow: hidden;
    margin-bottom: 0px;
  }
  
  .intro {
    position: absolute;
    top: 300px;
    flex: content;
    flex-flow: column wrap;
    margin-bottom: 50px;
    padding-bottom: 100px;
  }

  .desc{
    width: 100vw;
    position: absolute;
    top: 720px;
    margin-left: 20px;
  }
  .scroll {
    flex-direction: row;
    flex-wrap: nowrap;
    height: 70vh;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .article__box {
    width: 90vw;
  }

  .article__box figcaption {
    font-size: 4vmin;
  }

  .article__box figure {
    width: 50vw;
  }

  .article__box h4 {
    font-size: 5vmin;
  }

  #AI a, #AI img {
    height: 75vh;
    width: 90vw;
  }

  #AI {
    padding-bottom: 100px;
    margin-bottom: 200px;
  }

  #bs{
    display: flex;
    flex-flow: nowrap;
    flex-direction: row;
    height: 100vh;
  }

  #email{
    height: 100vh;
  }

  #email p {
    font-size: 10vh;
  }
}