:root{
  --title-text: 6vw;
  --subtitle-text: 2.5vw;
  --content-text: 1.25vw;
  --scale-ratio: 0.6;
  --title-color: black;
  --background-color: #ffffff;
  --subtitle-color: #505050;
  --keywords: #151515;
  --border-color: grey;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: Georgia, Times, 'Times New Roman', serif;
  color: var(--title-color);
  background-color: var(--background-color);
  font-size: var(--content-text);
  scroll-behavior: smooth;
  overflow: scroll;
}

.section {
  height: calc(100vw * var(--scale-ratio));
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  overflow: scroll;
}

.image {
  margin: 1vw;
  padding: 2vw;
  display: inline;
}

.title {
  padding: 2vw;
  margin: 0;
  font-size: var(--title-text);
  font-weight: bold;
}

.subtitle {
  display: flex;
  padding: 1vw;
  font-size: var(--subtitle-text);
  color: var(--subtitle-color);
}

.content {
  padding: 1vw;
  padding-left: 1.7vw;
  padding-right: 1.7vw;
  color: var(--subtitle-color);
}

.scroll_container {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  width: 100%;
  padding: 0.7vw;
  margin-bottom: 0.7vw;
}

.scroll_container::-webkit-scrollbar {
  display: none;
}

.scroll_content {
  display: flex;
  flex-direction: row;
  opacity: 0;
}

.scroll_content--animate {
  animation: scroll-left-to-right 1.5s forwards;
}

@keyframes scroll-left-to-right {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


.project {
  display: flex;
  flex-direction: column;
  width: 21vw;
  min-width: 21vw;
  height: 35vw;
  padding: 1vw;
  border-color: var(--border-color);
  border-style: solid;
  border-width: 0.14vw;
  font-size: 1.75vw;
  text-wrap: wrap;
  overflow: hidden;
  overflow-y: scroll;
  margin-right: 8vw;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.project::-webkit-scrollbar {
  display: none;
}

.project a {
  font-size: 1.75vw;
  color: var(--title-color);
  text-decoration: none;
  text-decoration-thickness: 0.07vw;
}

.underline {
  text-decoration: underline;
  text-decoration-thickness: 0.07vw;
}

.project ul{
  padding-left: 1.75vw;
  margin-bottom: 0px;
}

.project li {
  font-size: 1.05vw;
  color: var(--keywords);
  padding-bottom: 0.35vw;
}


/* First Page */
#landing {
  padding-left: 8vw;
  height: calc(90vw * var(--scale-ratio));
  background-image: url(images/Light_Background.png);
  background-color:#cacaca;
  overflow: hidden;
}

.title_content {
  margin-top: calc(50vw * var(--scale-ratio));
}

#values {
  padding-left: 2vw;
}


/* Second Page */
#about {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: calc(80vw * var(--scale-ratio));
  padding: calc(10vw * var(--scale-ratio));
  padding-top: calc(20vw * var(--scale-ratio));
  background-color: var(--background-color);
  border-bottom-color: var(--border-color);;
  border-bottom-width: 3px;
  overflow: hidden;
}

#portrait img {
  position: relative;
  top: -1vw;
  max-width: 30vw;
  max-height: 40vw;
  justify-content: center;
  padding-right: 10vw;
  opacity: 0;
}

.portrait_img--animate {
  animation: fade_in_left 2s forwards;
}

@keyframes fade_in_left {
  0% {
    opacity: 0;
    transform: translateX(-5vw);
  }
  100% {
    opacity: 1;
    transform: translateX(0vw);
  }
}


#about_content {
  color: var(--keywords);
}

#about_content span {
  position: absolute;
  display: inline-block;
  overflow: wrap;
  opacity: 0;
  visibility: hidden;
  animation: swapWords 15s linear infinite;
}

#about_content span:nth-child(1) {
  animation-delay: 0s;
}
#about_content span:nth-child(2) {
  animation-delay: 3s;
}
#about_content span:nth-child(3) {
  animation-delay: 6s;
}
#about_content span:nth-child(4) {
  animation-delay: 9s;
}
#about_content span:nth-child(5) {
  animation-delay: 12s;
}

@keyframes swapWords {
  0% { opacity: 0.4; visibility: visible; }
  2.5% { opacity: 0.6; visibility: visible;}
  5% { opacity: 0.8; visibility: visible; }
  7.5% { opacity: 1; visibility: visible;}
  10% { opacity: 1; visibility: visible; }
  12.5% { opacity: 1; visibility: visible; }
  15% { opacity: 0.8; visibility: visible; }
  17.5% { opacity: 0.6; visibility: visible; }
  20% { opacity: 0.4; visibility: visible; }
  20.1% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}


/* Third Page */
#project_header {
  background-color: var(--background-color);
  padding-left: 10vw;
  font-size: var(--title-text);
}

.scroll_indicator {
  position: relative;
  left: 0vw;
  opacity: 0.7;
}

.scroll_indicator--animate {
  animation: fadeaway 5s forwards;
}

@keyframes fadeaway {
  0% {
    opacity: 0.7;
    left: 0vw;
  }
  100% {
    opacity: 0;
    left: 15vw;
  }
}

#projects {
  height: calc(85vw * var(--scale-ratio));
  padding: calc(10vw * var(--scale-ratio));
  background-color: var(--background-color);
  border-bottom-color: var(--border-color);;
  overflow: hidden;
}

.image_project_graphic {
  justify-content: center;
  align-items: center;
  max-width: 14vw;
  min-height: 10vw;
  padding: 0.35vw;
  padding-left: 2.1vw;
  padding-top: 0.7vw;
  margin: 0.35vw;
}

.graphic_container {
  max-width: 15.4vw; 
  max-height: 11.06vw;
  padding-bottom: 1vw;
}

.project_description {
  padding-top: 0px;
  margin-top: 1vw;
  display: flex;
  text-wrap: wrap;
  flex-direction: column;
  word-break: break-word;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  font-size: 1.05vw;
  color: var(--subtitle-color);
}

.project_description::-webkit-scrollbar {
  display: none;
}

/* Fourth Page */

#contact {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: calc(80vw * var(--scale-ratio));
  padding-left: 10vw;
  padding-top: calc(20vw * var(--scale-ratio));
  background-color: var(--backrgound-color);
  border-bottom-color: var(--border-color);;
  border-bottom-width: 3px;
  overflow: hidden;
}

#contact_content {
  color: var(--keywords);
  max-width: 67%;
}

#contact a{
  color: var(--keywords);
  text-decoration-thickness: 1px;
}

#picture img {
  max-width: 35vw;
  max-height: 35vw;
  justify-content: center;
  padding-right: 10vw;
  opacity: 0;
  position: relative;
  top: -5vw;
}

.picture_img--animate {
  animation: fade_in_right 2s forwards;
}

@keyframes fade_in_right {
  0% {
    opacity: 0;
    transform: translateX(5vw);
  }
  100% {
    opacity: 1;
    transform: translateX(0vw);
  }
}



@media (prefers-color-scheme: dark) {
  :root{
    --title-color: white;
    --background-color: #151515;
    --subtitle-color: grey;
    --keywords: #cacaca;
    --border-color: #cacaca;
  }

  #landing {
    background-image: url(images/Dark_Background.png);
  }
}