.playfair-display-AL {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.lobster-regular {
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
}

*, *::before, *::after {
  box-sizing: border-box;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Link styles */
a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: black;
}

a:active {
  text-decoration: none;
  color: black;
}

body {
  background-color: #f9f9f9;
  position: relative;
  overflow-x: hidden;
  margin: 0;
  height: 100%;
  width: 100vw;
}
/* Header and name* */
#HB {
  position: relative;
  display: flex;
  width: 100%;
  height: 10vh;
}

#name {
  font-family: "Lobster", sans-serif;
  display: flex;
  position: relative;
  color: black;
  width: 50%;
  height: 100%;
}

#nameContainer {
  width: fit-content;
  margin: auto;
  font-size: clamp(23px, 4vw, 398px);
}

#contactLinks {
  font-family: "Playfair Display", serif;
  position: relative;
  width: 50%;
  height: 100%;
  font-size: clamp(15px, 4vw, 60px);
  text-decoration: none;
  display: flex;
  flex-direction: row;
}

#resumecontainer {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
}

#reelscontainer {
  margin-top: auto;
  margin-bottom: auto;
}

#socialscontainer {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: auto;
}

#contactLinksSpacers {
  margin-top: auto;
  margin-bottom: auto;
  padding-left: 1vw;
  padding-right: 1vw;
}

/* Content body styles */
#ContentBody {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  margin-top: 15%;
}

#topcontentcontainer {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  margin-top: 5%;
}

#bottomcontentcontainer {
  position: relative;
  width: 100%;
  margin-top: 10%;
}

#ytcontentcontainer {
  display: grid;
  position: relative;
  width: 100%;
  margin-top: 5%;
}

#ImageContainer {
  position: relative;
  width: 50%;
  margin-left: 10%;
}

#ContentImageTop {
  position: relative;
  width: 100%;
  object-fit: contain;
}

#DescriptionContainer {
  position: relative;
  width: 50%;
  margin-left: 3%;
  margin-right: 10%;
}

#DescriptionTextTop {
  position: relative;
  font-family: "Playfair Display", serif;
  font-size: clamp(16px, 3.5vw, 100px);
}

#ImageContainerBottom {
  position: relative;
  width: 42%;
  margin-left: auto;
  margin-right: auto;
}

#ContentImageBottom {
  position: relative;
  width: 100%;
  object-fit: contain;
}

#DescriptionContainerBottom {
  position: relative;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}

/* Youtube Video styles */
#YtVideoContainer {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

#YtVideospacerleft {
  width: 30%;
}

#YtVideospacerright {
  width: 30%;
}

#YtVideo {
  position: relative;
  width: 55vw;
  height: 44vh;
}

#DescriptionTextBottom {
  position: relative;
  font-family: "Playfair Display", serif;
  font-size: clamp(16px, 3vw, 100px);
}

/* Footer and Socials */
#CF {
  position: relative;
  padding-top: 6vh;
  padding-left: 39vw;
  padding-bottom: 1vh;
}

#Socials {
  position: relative;
  font-size: 200%;
  color: black;
}

#IMDbLogo {
  position: relative;
  width: 9vw;
}

#InstagramGlyph {
  position: relative;
  width: 4.3vw;
  padding-left: 1vw;
}

#threadsLogo {
  position: relative;
  width: 4vw;
  padding-left: 1vw;
}

.resume-container {
  display: flex;
}

.resume-container > div {
  font-size: 100%;
}

#resumediv {
  margin-top: 5%;
  margin-left: 20%;
  margin-right: 20%;
  margin-bottom: 5%;
}

.resumelogo {
  display: flex;
  font-size: 150%;
  padding-top: 5%;
}

/* Media Queries */
@media (max-width: 900px) {
  #resumediv {
    width: 90%;
    font-size: 73%;
    margin: 5%;
  }

  .resumelogo {
    display: flex;
    font-size: 100%;
  }

  #HB {
    height: 6vh;
  }

  #topcontentcontainer {
    flex-direction: column;
  }

  #ImageContainer {
    position: relative;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }

  #DescriptionContainer {
    position: relative;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }

  #ImageContainerBottom {
    width: 90%;
  }

  #YtVideo {
    position: relative;
    width: 77vw;
    height: 26vh;
  }

  #CF {
    padding-top: 2vh;
    padding-left: 26vw;
  }

  #IMDbLogo {
    position: relative;
    width: 20vw;
  }
  
  #InstagramGlyph {
    position: relative;
    width: 9.3vw;
    padding-left: 1vw;
  }
  
  #threadsLogo {
    position: relative;
    width: 8vw;
    padding-left: 1vw;
  }
}
@media (max-width: 800px) {
  #resumediv {
    width: 90%;
  }
}