/************************* General *************************/
@import url("https://use.typekit.net/jfp6voy.css");

:root{
  --dark-blue: #24293D;
  --dark-blue-30: #3a3e50;
  --dark-blue-60: #1d2131;
  --medium-blue: #2F3855;
  --medium-blue-20: #979caa;
  --medium-blue-60: #262d44;
  --light-blue: #8EBBFF;
  --light-blue-60: #6383b3;
  --off-white: #F4F4FC;
  --white: #FFFFFF;
  --black: #000000;
}

html, body{margin: 0;height: 100%;width: 100vw;}
body{font-family: proxima-nova, sans-serif;font-style: normal;background-color: var(--dark-blue);}

.section{opacity: 0;transition: 3s ease;}
.section.active{opacity: 1;}

.topnav{top: -100px;}


/************************* Landing Section *************************/
.landing{width: 100%;height: 100%;margin: 0;}
.landing_page{width: 100%;height: 100%;background-color: var(--dark-blue);display: flex;justify-content: center;align-items: center;}

.logo_section{width: 33%;height: 100%;background-color: var(--medium-blue);border-left: 8px solid var(--white);transform: skewX(20deg);display: flex;justify-content: center;align-items: center;z-index: 2;transition: .5s;}
.logo{background: linear-gradient(-90deg, var(--light-blue), var(--medium-blue), var(--dark-blue), var(--medium-blue));background-size: 400% 400%;animation: GradientAnimation 8s ease infinite;width: 370px;height: 370px;transform: skewX(-20deg);border-radius: 50%;display: flex;justify-content: center;align-items: center;box-shadow: 8px 8px 32px rgba(36, 41, 61, 0.5);}
.logo_image{background-image: url("../images/logo/Logo_ColoredBackground.png");background-position: center;background-size: contain;background-repeat: no-repeat;width: 97%;height: 97%;transform: skewX(0deg);margin-left: 0px;}

.border_top_thick{position: absolute;top:24px;width: 50vw;left:50vw;height: 8px;background-color: var(--white);}
.border_top_thin{position: absolute;top:40px;width: 50vw;left:50vw;height: 3px;background-color: var(--white);}
.border_bottom_thick{position: absolute;bottom:24px;width: 50vw;height: 8px;background-color: var(--white);}
.border_bottom_thin{position: absolute;bottom:40px;width: 50vw;height: 3px;background-color: var(--white);}

.scrolldown{position: absolute;bottom: 80px;;display: flex;justify-content: center;align-items: center;flex-direction: row;color: var(--off-white);z-index: 2;}
.scrollleft{left: 24px;animation: ArrowAnimation 0.6s ease infinite;writing-mode: vertical-lr;}
.scrollright{right: 24px;animation: ArrowAnimation 0.6s ease infinite;writing-mode: vertical-lr;}

#credit_section{position: absolute;bottom: 6vh;left:32px;z-index: 10;color: var(--light-blue);transition: .5s;}


/************************* Home Section *************************/
.home{width: 100vw;height:100vh;background-color: var(--dark-blue);position: absolute;background-color: var(--medium-blue);background-image: url("../images/bkg1.png");background-position:right;background-size: cover;background-repeat: no-repeat;transition: ease-in .2s;}

.intro_section{width: 100%;height: 100%;display: flex;justify-content: center;align-items:flex-start;flex-direction: column;padding: 0 40px;transition: .5s;}
.intro_text{height: 100%;width: max-content;display: flex;justify-content: center;align-items:flex-start;position: relative;flex-direction: column;padding: 0;margin-top: -30vh;}
.intro_text .text{position: relative;color: var(--light-blue);font-family: stix-general, serif;margin-top: 0;}

.intro_text .text.first-text{font-weight: 600;color:var(--white);font-size: 24px;;padding: 0;transition: .5s;}
.intro_text .text.first-text a:hover{color: var(--light-blue);}

.intro_text .text.sec-text{margin: 16px 0;background-color: transparent;max-height: 100px;display: flex;justify-content: center;align-items: center;flex-direction: row;}
.intro_text .text.sec-text a{padding: 0;font-size: 80px;font-weight: 600;text-shadow: 5px 5px 8px var(--dark-blue);transition: .5s;}
.intro_text .text.sec-text a:hover{color: var(--white);}

.intro_text .text.third-text{display: flex;justify-content: center;align-items: center;flex-direction: row;}
.intro_text .text.third-text a{padding: 0;font-size: 80px;font-weight: 600;color: var(--light-blue-60);text-shadow: 5px 5px 8px var(--dark-blue);transition: .5s;}
.intro_text .text.third-text a:hover{color: var(--white);opacity:1;}
.intro_text .space{margin-right: 16px;}

.intro_cta{margin: -25vh 0px 0 0;display: flex;justify-content:left;align-items:center;flex-direction: row;}
.intro_cta .button:nth-child(2){margin-left: 16px;}

.intro_container{width: 50vw;height: 100%;background-color: inherit;display: flex;justify-content:left;align-items:flex-end;transition: .5s;}
.intro_image{width: 100%;height: 85%;background-image: url("../images/intro_image.png");background-position: center;background-size: contain;background-repeat: no-repeat;transition: .5s;}


/************************* Responsive *************************/
@media only screen and (max-width: 1250px) and (max-height: 900px) {
  /* Landing */
  .logo_section{width: 45%;transition: .5s;}

  /* Home */
  .home{background-position: 50% 50%;background-repeat: no-repeat;}
  .intro_text .text.sec-text .border{background-color: transparent;animation: none;border: none;display: none;}
  .intro_section_col{padding: 0 40px;}
}

@media only screen and (max-width: 1000px) and (max-height: 900px) {
  /* Landing */
  .logo_section{width: 65%;transition: .5s;}

  /* Home */
  .intro_container{margin-left: -25vw;transition: .5s;}
  .intro_text .text.first-text{font-size: 24px;}
  .intro_text .text.sec-text a, .intro_text .text.third-text a{font-size: 64px;}
}


@media only screen and (max-width: 800px) and (max-height: 900px) {
  .intro_section{padding: 0 24px;}
  #credit_section{left:24px;}
}




@media only screen and (max-width: 750px) and (max-height: 900px) {
  /* Home */
  .home{background-position: 50% 50%;}
  .intro_section_col{padding: 0;}
  .intro_text .text.sec-text a, .intro_text .text.third-text a{font-size: 48px;}
  .intro_text .space{margin-right: 8px;}
}

@media only screen and (max-width: 550px) and (max-height: 900px) {
  /* Landing */
  .logo_section{background-color: transparent;transform: skewX(0deg);border: none;width: 110%;}
  .logo{transform: skewX(0deg);}
  .logo_image{transform: skewX(0deg);width: 100%;}

  .border_top_thick{position: absolute;top:24px;width: 100vw;left:0;height: 8px;background-color: var(--white);}
  .border_top_thin{position: absolute;top:40px;width: 100vw;left:0;height: 3px;background-color: var(--white);}
  .border_bottom_thick{position: absolute;bottom:24px;width: 100vw;height: 8px;background-color: var(--white);}
  .border_bottom_thin{position: absolute;bottom:40px;width: 100vw;height: 3px;background-color: var(--white);}

  /* Home */
  .home{background-position: 60% 50%;}

  .intro_text .text.sec-text a, .intro_text .text.third-text a{font-size: 40px;}
  
  .intro_cta{margin: -35vh 0px 0 0;display: flex;justify-content:left;align-items:flex-start;flex-direction: column;}
  .intro_cta .button{width: 140px;}
  .intro_cta .button:nth-child(2){margin-top: 16px;margin-left: 0;}
}

@media only screen and (max-width: 450px) and (max-height: 900px) {
  /* Landing */
  .scrollleft{left: -16px;}
  .scrollright{right: -16px;}

  /* Home */
  .intro_text{width: fit-content;pointer-events: none;}
  .intro_text .text.first-text{font-size: 16px;}
  .intro_text .text.sec-text a, .intro_text .text.third-text a{font-size: 32px;}
  .intro_text .text.sec-text{line-height: 4.5em;height: min-content;}
  .intro_text .text.sec-text p{margin: 0 -24px 0 0px;}

  .intro_section{padding: 0 24px;}
  .intro_section_col{flex: 100%;padding: 0px;width: 100vw;}
}



/************************* Tablet *************************/
@media screen and (width: 768px) and (height: 1024px) {
  .logo_section{width: 80%;height: 100%;background-color: var(--dark-blue);border: none;transform: skewX(0deg);z-index: 0;}
  .logo{transform: skewX(0deg);}

  .scrolldown{z-index: 3;}
  .intro_text .text.sec-text a, .intro_text .text.third-text a{font-size: 56px;}

  .landing{width: 100vw;}

  .border_top_thick{position: absolute;top:24px;width: 100vw;left:0;height: 8px;background-color: var(--white);}
  .border_top_thin{position: absolute;top:40px;width: 100vw;left:0;height: 3px;background-color: var(--white);}
  .border_bottom_thick{position: absolute;bottom:24px;width: 100vw;height: 8px;background-color: var(--white);}
  .border_bottom_thin{position: absolute;bottom:40px;width: 100vw;height: 3px;background-color: var(--white);}

  .home{background-position:70% 50%;}
  .intro_cta{margin-top: -32vh}
}

/************************* Phone *************************/
@media screen and (max-width: 414px) and (max-height: 896px){
  .intro_text .text.sec-text a, .intro_text .text.third-text a{font-size: 28px;}
  .intro_text .text.sec-text{margin: 0;background-color: transparent;}
  .scrollleft{left: 8px;}
  .scrollright{right: 8px;}

  .logo_section{width: 75%;height: 100%;}
  .logo{width: 60vw;height: 60vw;}

  .home{background-position:67% 50%;}

  .intro_cta .button{width: 150px;pointer-events: all;}
}


/************************* Animations *************************/
@keyframes GradientAnimation{
	0%{background-position: 0% 50%;}
	50%{background-position: 100% 50%;}
	100%{background-position: 0% 50%;}
}

@keyframes LetterAnimation{
  50%{left:100%;width: 20px;}
}

@keyframes ArrowAnimation{
  0%{bottom: 80px;}
  50%{bottom: 90px;}
  100%{bottom: 80px;}
}