/***** ABOUT PAGE STYLING *****/

@font-face {
  font-family: LemonMilk;
  src: url("../css/LEMONMILK-Regular.otf");
}

:root {
  --theme-color-1: #343a56;
  --theme-color-2: #1A1313;
  --theme-color-3: #226371;
  --theme-color-4: #6acaa7;
}

html {
    background-size: cover;
}

body {
    /*the overflow is clipped, and the rest of the content is hidden */
    background-color: black;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
    max-width: 100%;
    margin: 0 auto;
}

/* This contains all the Slides */
.scroll-container {
    position: absolute;
    top: 100px;
    bottom: 0px;
    /*height: 90vh;*/
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    overflow-y: scroll;
    scroll-snap-type: y proximity;
}

/* This a slide */
.slide-block{
  height: 100%;
  width: 100%;
  max-width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  justify-content: center;
  display: flex;
  flex-direction:column;
  position:relative;
  z-index: 0;
}

/* This is the main section of a slide */
.main-content {
  position: absolute;
  top: 0;
  height: 90%;
  max-height: 90%;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-size: 20px;
  color: white;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction:column;
  overflow: hidden;
}

/* This is the text at the bottom of a slide */
.footer{
  position: absolute;
  height: 10%;
  width: 100%;
  color: white;
  font-size: 20px;
  animation: Pulsate 4s;
  animation-iteration-count: infinite;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}


@keyframes Pulsate {
  from { opacity: 0.7; }
  50% { opacity: 0.2; }
  to { opacity: 0.7; }
}

/* Link styling */
.main-content a {
  color: var(--theme-color-4);
}
.main-content a:visited {
  color: var(--theme-color-4);
}
.main-content a:hover {
  color: hotpink;
}
.main-content a:active {
  color: hotpink;
}

.main-content h2{
    font-size: 30px;
    font-family: LemonMilk;
}

.main-content h3{
    font-size: 30px;
    font-family: LemonMilk;
}

/* Link styling */
.footer a {
  color: white;
}
.footert a:visited {
  color: white;
}
.footer a:hover {
  color: white;
}
.footer a:active {
  color: white;
}

/* paragraph styling */
.slide-block p{
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: justify;
  max-width: 80%;
  line-height: 1.5;
}

/* image styling */
.scroll-container #about-logo{
  max-width: 40%;
  max-height:40%;
  margin:0 auto;
  animation: Pulsate2 4s;
  animation-iteration-count: infinite;
}
@keyframes Pulsate2 {
  from { opacity: 1; }
  50% { opacity: 0.7; }
  to { opacity: 1; }
}


/* the following is specifically for the "staff" Slide */
.team-container{
  display:flex;
  flex-direction: row;
  justify-content: center;
  width:80%;
  height:auto;
  /* padding-top:2%; */
  /* padding-bottom: 15%; */
  margin: 0 auto;
}
.team-member{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 2%;
  margin-right: 2%;
  height: auto;
  width: 25%;
  align-items: center;
  justify-content: center;
}

.scroll-container .team-member p{
  font-size: 20px;
  text-align: left;
  max-width: none;
}

.scroll-container .team-member a{
  color: white;
}
.scroll-container .team-member a:visited{
  color: white;
}

.scroll-container .team-member a:hover {
  color: hotpink;
}
.scroll-container .team-member a:active {
  color: hotpink;
}

.scroll-container .profile-picture{
  max-width: 100%;
  width:100%;
}

@media screen and (max-width: 1000px) {
    .scroll-container{
        top: 100px;
    }

    .team-container {
        flex-direction: column;
        padding: 0 !important;
        margin-top: 0 !important;
    }
    .team-member {
        width: 100%;
        height: 15%;
        padding-bottom: 5%;
        font: 0.7vh !important;
        display: flex;
        margin: 0 0 !important;
    }
    .team-member p {
        font-size: 1.5vh !important;
        text-align: left;
        max-width: none;
    }
    .scroll-container .profile-picture{
        width: 100px;
        margin: 0 0 !important;
        padding: 0;
        padding-right: 3%;
    }
    .main-content {
        font-size: 1.8vh !important;
    }

    #thanks{
        font-size: 20px !important;
    }

    .main-content h3{
        font-size: 1em;
    }
    .trailer-video {
      height: 30%!important;
    }
}

@media screen and (max-width: 1000px) and (max-height: 780px) {
    .scroll-container .profile-picture{
        width: 50px !important;
    }

    .scroll-container .team-member{
        padding: 0;
        padding-bottom: 4%;
    }
    .team-member p {
        font-size: 1em !important;
        width: 365px;
        text-align: left;
    }
}

.trailer-video {
  overflow: hidden;
  height: 40%;
}

.trailer-video iframe {
  height: 100%;
  width: 100%;
}

/* for paragraphs that should be centered, not justified */
#centered{
  text-align: center;
}

/* Section-specific styling */
#color1{
  background-image: linear-gradient(var(--theme-color-1), var(--theme-color-2));
}
#color2{
  background-image: linear-gradient(var(--theme-color-2), var(--theme-color-3));
}
#color3{
  background-image: linear-gradient(var(--theme-color-3), var(--theme-color-1));
}

#thanks{
  font-size: 20px;
}
#intro{
  width: 100% !important;
}