* {
  margin: 0;
  box-sizing: border-box;
  border: 0;
  padding: 0;
}

:root {
  /* colors */
  --dark-blue: #17213d;
  --light-blue: #b0f6ff;
  --dark-green-low-opacity: #21554e34;
  --light-green-low-opacity: #68e19e28;
  --lighter-blue: #d0f9ff;
  --champagne: #fcf8e8;
  --champagne-half-opacity: rgba(252, 248, 232, 0.685);
  --champagne-quarter-opacity: rgba(252, 248, 232, 0.161);
  --dark-blue-half-opacity: #17213d85;
  --light-blue-half-opacity: #b0f6ffd0;

  /* link colors */
  --silver: #e7e7e7;
  --light-green: #ade1c6;
  --light-pink: #f9c2dd;
  --light-purple: #beb0ff;

  /* fonts */
  --sans: "Noto Sans", sans-serif;
  --header-weight: 800;
  --header-letter-spacing: 0.25rem;
  --title-weight: 500;
  --title-letter-spacing: 0.1rem;
  --serif: "Noto Serif", serif;
  --body-weight: 500;

  font-size: 20px;

  /*drop shadows*/
  --splash-drop-shadow-1: 
    drop-shadow(0px 0.5px 0px var(--light-green-low-opacity))
    drop-shadow(0px 0.5px 0px var(--dark-blue))
    drop-shadow(1px 1px 1px var(--dark-green-low-opacity));
  --splash-drop-shadow-2: 
    drop-shadow(0px 1px 0px var(--light-green-low-opacity))
    drop-shadow(0px 0.5px 0 var(--dark-blue))
    drop-shadow(2px 2px 2px var(--dark-green-low-opacity));
  --splash-drop-shadow-3: 
    drop-shadow(0px 1px 0px var(--champagne-half-opacity))
    drop-shadow(0px 0.5px 0px var(--dark-blue))
    drop-shadow(2px 2px 2px var(--dark-blue-half-opacity))
    drop-shadow(4px 4px 3px var(--dark-blue)) 
    drop-shadow(5px 5px 6px black);
  --splash-drop-shadow-4: 
    drop-shadow(0px 1px 0px var(--champagne-half-opacity))
    drop-shadow(4px 4px 2px var(--dark-blue-half-opacity));
  
  --drop-shadow-1: 
    drop-shadow(0px 0.5px 0px var(--dark-blue))
    drop-shadow(0px 0px 2px black);
  --drop-shadow-2:
    drop-shadow(0px 1px 0px var(--dark-blue))
    drop-shadow(0px 0px 2px black) 
    drop-shadow(0px 0px 4px black);

  --body-gradient: linear-gradient(
    black,
    2%,
    var(--dark-blue-half-opacity),
    5%,
    var(--dark-blue),
    8%
  );
}

/* unvisited link */
a:link {
  color: var(--silver);
}

/* visited link */
a:visited {
  color: var(--light-pink);
}

/* mouse over link */
a:hover {
  color: var(--light-green);
}

/* selected link */
a:active {
  color: var(--light-purple);
}

body {
  background-color: var(--dark-blue);
}

.splash-header {
  position: relative;
  height: 6rem;
  width: 100%;
  margin: auto;
  padding-top: 0.5rem;
  text-align: center;
  color: var(--dark-blue);
  font-family: var(--sans);
  font-weight: var(--header-weight);
  letter-spacing: var(--header-letter-spacing);
  filter: var(--splash-drop-shadow-1);
  border-bottom: 1px solid var(--light-blue-half-opacity);
  background-image: linear-gradient(
     var(--dark-green-low-opacity),
     2%, var(--light-blue), 
     5%, white, 
     20%, var(--lighter-blue), 
     50%, white, 
     80%, var(--light-blue), 
     99%, var(--dark-blue-half-opacity),
     100%, var(--dark-green-low-opacity)
  ); 
  box-shadow: 0px 2px 4px var(--light-green);  
  z-index: 99;      
              

}



/* splash header animation */
@keyframes splash-header-opacity-change {
  from {
  }
  to {
    opacity: 0;
  }
}

/* splash header animation class */
.splash-header-fading {
  animation: splash-header-opacity-change 0.9s ease-in 0s 1 forwards;
}

.splash-header-letter-icon {
  height: 2rem;
  width: 1rem;
  filter: var(--splash-drop-shadow-2);
}

.splash-header-text {
  display: inline-block;
  position: relative;
  top: -0.55rem;
  filter: var(--splash-drop-shadow-1);
}

.splash-subheader {
  font-family: var(--sans);
  font-weight: var(--body-weight);
  letter-spacing: 0;
}

.splash-bg {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: radial-gradient(
    circle at 50% 500%,
    var(--light-blue), 
    85%, var(--champagne),
    89%, var(--lighter-blue),
    95%, var(--light-blue),
    97.5%, var(--champagne)
    
  );
  overflow: hidden;
  z-index: 9;

  border: 1px solid var(--dark-blue);
  border-top: 1px solid var(--champagne-half-opacity);
}
@keyframes fade-splash-bg {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.splash-bg-fading {
  animation: fade-splash-bg 3s ease-in 1s 1 forwards;
}


.splash-fg {
  position: relative;
  top: 40vh;
  height: 50vh;
  width: 100%;

  background-image: linear-gradient(
    var(--champagne-half-opacity),
    1%, var(--light-green-low-opacity),
    2%, var(--champagne-half-opacity),
    5%,var(--light-blue),
    10%,var(--light-blue),
    20%,var(--lighter-blue),
    80%, var(--dark-blue),
    99%, black
  );
  border-top: 1px solid var(--light-blue);
  box-shadow: 
      0px -1px 2px var(--dark-blue-half-opacity),
      0px -3px 6px var(--dark-blue-half-opacity)
  ;
  

}
@keyframes slide-splash-fg {
  from {
  }
  to {
    transform: translate(0, 100%) scale(200%, 200%);
    filter: grayscale(0.5);
  }
}
.splash-fg-sliding {
  animation: slide-splash-fg 3s ease-in 1s 1 forwards;
}

.stars-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 4rem);
  grid-template-rows: repeat(3, 4rem);
  width: 12rem;
  top: -70%;
  margin: auto;
  cursor: pointer;
}
@keyframes slide-stars-container {
  from {
  }
  to {
    transform: translate(0, -200%);
  }
}
.stars-container-sliding {
  animation: slide-stars-container 3s ease-in 1s 1 forwards;
}

.splash-logo {
  width: 5rem;
  position: relative;
  left: -10%;
  top: -10%;
  transition: all;
  transition-duration: 1s;
  filter: var(--splash-drop-shadow-2);
}

.star {
  width: 1.8rem;
  margin: auto;
  transition: all;
  transition-duration: 1s;
  filter: var(--splash-drop-shadow-1);
}

/* animations to move stars */

/* there are only 8 stars. They are numbered for their position in the grid */
/* stars diagram */
/* 1      2     3*/
/* 4      5     6*/
/* 7      8     9*/
@keyframes slide-and-rotate-star-1 {
  from {
  }
  to {
    transform: translate(-1000%, -1500%) rotate(540deg);
    filter: var(--drop-shadow-2);
  }
}
.star-1-moving {
  animation: slide-and-rotate-star-1 5s ease-out 0s 1 forwards;
}
@keyframes slide-and-rotate-star-2 {
  from {
  }
  to {
    transform: translate(0, -1500%) rotate(540deg);
  }
}
.star-2-moving {
  animation: slide-and-rotate-star-2 5s linear 0s 1 forwards;
}
@keyframes slide-and-rotate-star-3 {
  from {
  }
  to {
    transform: translate(1500%, -1500%) rotate(540deg);
    filter: var(--drop-shadow-2);
  }
}
.star-3-moving {
  animation: slide-and-rotate-star-3 5s ease-out 0s 1 forwards;
}
@keyframes slide-and-rotate-star-4 {
  from {
  }
  to {
    transform: translate(-1500%, 0) rotate(540deg);
    filter: var(--drop-shadow-2);
  }
}
.star-4-moving {
  animation: slide-and-rotate-star-4 5s linear 0s 1 forwards;
}
/* star 5 doesn't exist */
@keyframes slide-and-rotate-star-6 {
  from {
  }
  to {
    transform: translate(1500%, 0) rotate(540deg);
    filter: var(--drop-shadow-2);
  }
}
.star-6-moving {
  animation: slide-and-rotate-star-6 5s linear 0s 1 forwards;
}
@keyframes slide-and-rotate-star-7 {
  from {
  }
  to {
    transform: translate(-1500%, 1500%) rotate(540deg);
  }
}
.star-7-moving {
  animation: slide-and-rotate-star-7 5s ease-out 0s 1 forwards;
}
@keyframes slide-and-rotate-star-8 {
  from {
  }
  to {
    transform: translate(0, 1500%) rotate(540deg);
    filter: var(--drop-shadow-2);
  }
}
.star-8-moving {
  animation: slide-and-rotate-star-8 5s linear 0s 1 forwards;
}
@keyframes slide-and-rotate-star-9 {
  from {
  }
  to {
    transform: translate(1500%, 1500%) rotate(540deg);
    filter: var(--drop-shadow-2);
  }
}
.star-9-moving {
  animation: slide-and-rotate-star-9 5s ease-out 0s 1 forwards;
}

/* animation for JC logo */
@keyframes slide-and-scale-splash-logo {
  from {
  }
  50%{
    filter: var(--splash-drop-shadow-3);
  }
  to {
    transform: translate(0, -100%) scale(250%);
    filter: var(--splash-drop-shadow-4);
  }
}
.splash-logo-moving {
  animation: slide-and-scale-splash-logo 5s linear 1s 1 forwards;
}


.idle-star-background-container{
width: 100%;
height: 24rem;
position: absolute;
top:0;
margin-top: 3.5rem;
background-image: linear-gradient(
  var(--light-blue),
  20%, var(--light-green-low-opacity),
  80%, var(--dark-green-low-opacity),
  90%, var(--dark-blue)
);
opacity: .8;
}

.idle-star-background-overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url('../assets/splash\ bg\ pattern.svg');
  background-size: cover;

}

.idle-star-container{
  display: block;
  width: 5rem;
  height: 5rem;
  padding: 1rem;
  border-radius: 50%;
  margin-left: -15%;
  margin-top: 5%;
  opacity: 0;
  animation: idle-star-container-animation 13s linear 0s infinite alternate;
  border: 2px solid var(--dark-blue-half-opacity); 
  filter: var(--drop-shadow-2); 
  background-image: radial-gradient(
                    var(--champagne),
                    45%, var(--dark-blue-half-opacity),
                    90%, var(--dark-blue),
                    95%, black

                  );
}

.idle-star-highlight{
  display: block;
  position: absolute;
  z-index: 99;
  height: 1rem;
  left: 1.6rem;
  top: 1rem;
  width: 1rem;
  background-image: radial-gradient(
                    var(--champagne),
                    10%, white,
                    25%, var(--champagne),
                    40%, var(--champagne-half-opacity),
                    75%, var(--champagne-quarter-opacity),
                    transparent

                    );
  border-radius: 50%;
  opacity: .9;
  border: 1px solid var(--champagne-quarter-opacity);
}

.idle-star{
position: absolute;
height: 4rem;
width: 4rem;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
opacity: .8;
animation: idle-star-animation 13s linear 0s infinite alternate;
background-image: radial-gradient(
                  transparent,
                  5%, var(--dark-blue-half-opacity),
                  10%, white,
                  30%, transparent
  
);
border-radius: 50%;
}

@keyframes idle-star-animation {
  11.1%{transform: translate(50%, 50%)  rotate(45deg);
        filter: invert(.9);
        opacity: .7;}
  22.2%{transform: translate(50%, 50%)  rotate(90deg);
        filter: invert(.1);
        opacity: .9;}
  33.3%{transform: translate(50%, 50%)  rotate(135deg);
        filter: invert(.9);
        opacity: .7}
  44.4%{transform: translate(50%, 50%)  rotate(180deg);
        filter: invert(.1);
        opacity: .9;}
  55.5%{transform: translate(50%, 50%) rotate(225deg);
        filter: invert(.9);
        opacity: .7}
  66.6%{transform: translate(50%, 50%) rotate(270deg);
        filter: invert(.1);
        opacity: .9;}
  77.7%{transform: translate(50%, 50%) rotate(315deg);
        filter: invert(.9);
        opacity: .7;}
  88.8%{transform: translate(50%, 50%) rotate(360deg);
        filter: invert(.1);
        opacity: .9;}
  99.9%{transform: translate(50%, 50%) rotate(405deg);
        filter: invert(.9);
        opacity: .7}
}

@keyframes idle-star-container-animation {
  11.1%{margin-left: -15%;
      margin-top: 5%;
      opacity: .5;
      border-color: var(--champagne-half-opacity);}
  22.2%{margin-left:  6.6%;
      margin-top: 80%;
      opacity: .8;
      border-color: var(--dark-blue);}
  33.3%{margin-left: 19.9%;
      margin-top: 5%;
      opacity: 1;
      border-color: var(--champagne-half-opacity); }
  44.4%{margin-left: 33.2%;
      margin-top: 80%;
      opacity: 1;
      border-color: var(--dark-blue);}
  55.5%{margin-left: 46.5%;
      margin-top: 5%;
      opacity: 1;
      border-color: var(--champagne-half-opacity);}
  66.6%{margin-left: 59.8%; 
      margin-top: 80%;
      opacity: 1;
      border-color: var(--dark-blue);
     }
  77.7%{margin-left: 73.1%;
      margin-top: 5%;
      opacity: 1;
      border-color: var(--champagne-half-opacity);
     }
  88.8%{margin-left: 86.4%;
      margin-top: 80%;
      opacity: 1;
      border-color: var(--dark-blue);}
  99.9%{margin-left: 100%;
      margin-top: 5%;
      opacity: 0;
      border-color: var(--champagne-half-opacity);
      }
   

}



.main {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid var(--dark-blue);
  background: linear-gradient(
    black,
    5%,
    var(--dark-blue),
    95%,
    var(--light-blue)
  );
}

header {
  position: relative;
  height: 6rem;
  width: 100%;
  margin: auto;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  text-align: center;
  color: var(--champagne);
  font-family: var(--sans);
  font-weight: var(--header-weight);
  letter-spacing: var(--header-letter-spacing);
  cursor: pointer;
  background: var(--body-gradient);

}


.return-to-splash-popup{
 position: absolute;
 left: 0.5rem;

 
}
.return-to-splash-arrow{
  width: 1rem;
  height: 1rem;
  background-image: url('../assets/down\ arrow\ champagne.svg');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(90deg);
  filter: var(--drop-shadow-1)
  
  
}


.return-to-splash-tooltip{
  font-size: .5rem;
  width: 4rem;
  color: var(--light-blue);
  background-color: var(--dark-green-low-opacity);
  border: 1px solid var(--champagne-half-opacity);
  border-radius: 10%;
  box-shadow: 1px 1px, 2px 2px, 3px 3px, 4px 4px, -1px -1px;
  filter: var(--drop-shadow-1);
  position: absolute;
  top: 0;
  z-index: 99;
  background-image: url('/assets/star\ dark\ blue.svg');
  background-size: cover;
  background-size: 1rem 1rem;
  

}
.return-to-splash-tooltip-hidden{
  visibility: hidden;
}


.header-letter-icon {
  height: 2rem;
  width: 1rem;
  filter: var(--drop-shadow-2);
}



.header-text {
  display: inline-block;
  position: relative;
  top: -0.55rem;
  filter: var(--drop-shadow-1);
}

.subheader {
  font-family: var(--sans);
  font-weight: var(--body-weight);
  letter-spacing: 0;
}

.return-to-top-btn-container{
  width: 2rem;
  height: 2rem;
  position: fixed;
  top: 1rem;
  left: 85%;
  z-index: 9;
  color: var(--lighter-blue);
  font-family: var(--sans);
  z-index: 9;
}
.return-to-top-btn{
  width: 2rem;
  height: 2rem;
  background-image: url('../assets/down\ arrow\ champagne.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-position: 50% 100%;
  transform: rotate(180deg);
  border-radius: 10%;
  box-shadow: -1px -1px, -2px -2px, 1px 1px;
  filter: var(--drop-shadow-1);
  padding: 50%;
  padding-bottom: 120%;
  text-align: center;
  background-color: var(--dark-green-low-opacity);


}

.return-to-top-btn-text{
 display: block;
 width: 2rem;
 height: 3rem;
 transform: rotate(-180deg) translate(50%, 50%);
 font-size: .5rem;
 padding: .25rem;

 
}
.arrow-container {
  display: flex;
  justify-content: space-evenly;
}
.nav-arrow {
  position: relative;
  height: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.1rem;
  transform: translate(0, -2.5rem);
  transition: all;
  transition-duration: 0.3s;
}
nav {
  display: grid;
  width: 100%;
  height: 2rem;
  grid-template-columns: repeat(2, 50%);
  overflow: hidden;
  margin-top: -1rem;
  transition: all 0.3s;
  transform: scaleY(1);
  transform-origin: top;
}
.nav-hidden {
  visibility: hidden;
  transform: scaleY(0);
}
.nav-btn {
  text-align: center;
  color: var(--champagne);
  font-family: var(--sans);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-letter-spacing);
  padding-top: 0.5rem;
  border: 2px solid var(--dark-blue-half-opacity);
  background: linear-gradient(
    var(--champagne-half-opacity),
    0.1%,
    var(--dark-blue),
    99.9%,
    var(--light-blue)
  );
}

/* animations and classes for rotating arrows */

.arrowRotatingClockwise {
  animation: rotateArrowClockwise 0.3s ease-out 0s 1 forwards;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  filter: var(--drop-shadow-2);
}

.arrowRotatingCounterclockwise {
  animation: rotateArrowCounterclockwise 0.3s ease-out 0s 1 reverse;
  filter: var(--drop-shadow-1);
}

@keyframes rotateArrowClockwise {
  from {
  }
  to {
    transform: scale(-100%, 100%) rotate(180deg) translate(0, 115%);
  }
}

@keyframes rotateArrowCounterclockwise {
  from {
  }
  to {
    transform: scale(-100%, 100%) rotate(-180deg) translate(0, 115%);
  }
}

.language-logos-container {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.5rem;
  color: var(--light-blue);
  display: flex;
  justify-content: space-evenly;
  border-top: 1px solid var(--dark-blue-half-opacity);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.language-logo-container {
  margin-top: 2rem;
  flex-direction: column;
  background-color: var(--dark-blue);
  padding: 0.3rem;
  border-radius: 10%;
  border: 1px solid var(--dark-blue-half-opacity);
  background-color: var(--champagne-half-opacity);
  box-shadow: 1px 1px, 2px 2px, 3px 3px, 4px 4px, -1px -1px;
  filter: var(--drop-shadow-1);
}
.language-title {
  display: block;
  color: var(--dark-blue);

  padding-bottom: 1rem;
  padding-top: 0.5rem;
}

.language-logo {
  height: 3.2rem;
  filter: var(--splash-drop-shadow-1);
}

.language-text {
  display: block;
  font-family: var(--sans);
  color: var(--light-blue);
  font-size: 0.8rem;
  width: 80%;
  margin: auto;
  margin-top: 2rem;
  text-align: center;
}

.projects-section {
  padding-top: 5rem;
  margin-top: 5rem;
  padding-bottom: 5rem;
  margin-bottom: 5rem;
  text-align: center;
  font-family: var(--sans);
  color: var(--champagne);
  border-top: 1px solid var(--light-blue);
}

h1 {
  font-size: 2rem;
  filter: var(--drop-shadow-1);
}

.projects-container {
  padding-top: 2.5rem;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.project-container {
  width: 10rem;
  height: 12rem;
  margin: 0.1rem;
  background-color: var(--dark-blue);
  padding: 0.3rem;
  border-radius: 10%;
  border: 1px solid var(--champagne-half-opacity);
  background-color: var(--dark-blue-half-opacity);
  box-shadow: 1px 1px, 2px 2px, 3px 3px, 4px 4px, -1px -1px;
  filter: var(--drop-shadow-1);
}

.project-thumbnail {
  width: 8rem;
  height: 8rem;
  border: 3px double var(--light-blue);
  margin-top: 1rem;
}

.project-title {
  font-size: 0.8rem;
}

.about-section {
  padding-top: 5rem;
  margin-top: 5rem;
  padding-bottom: 5rem;
  margin-bottom: 5rem;
  text-align: center;
  font-family: var(--sans);
  color: var(--champagne);
  border-top: 1px solid var(--light-blue);
}
.about-container{
  width: 15rem;
  margin: auto;
  margin-top: 2.5rem;
  padding: 0.25rem;

}
.about-text{
  display: block;
  font-family: var(--sans);
  color: var(--light-blue);
  font-size: 0.8rem;
  width: 100%;
  margin: auto;
  text-align: justify;
}

.contact-section {
  padding-top: 5rem;
  margin-top: 5rem;
  padding-bottom: 5rem;
  margin-bottom: 5rem;
  text-align: center;
  font-family: var(--sans);
  color: var(--champagne);
  border-top: 1px solid var(--light-blue);
}

.contact-container {
  width: 15rem;
  margin: auto;
  margin-top: 2.5rem;
  padding: 0.25rem;
  border: 3px double var(--light-blue);
}

footer {
  display: block;
  text-align: center;
  font-family: var(--sans);
  color: var(--dark-blue);
  border-top: 3px double var(--light-blue);
  font-size: 0.5rem;
  height: 1rem;
}

@media screen and (orientation: landscape) {
  .splash-header {
    height: 4rem;
  }

  .stars-container {
    grid-template-columns: repeat(3, 2rem);
    grid-template-rows: repeat(3, 2rem);
    width: 6rem;

    top: -80%;
  }

  .star {
    width: 2rem;
  }

  .splash-logo {
    width: 1.5rem;
    margin-left: 0.25rem;
    margin-top: 0.25rem;
  }
  .idle-star-background-container{
    
    transform: translate(0, -20%);
    
  }

  


  


  .splash-fg {
    top: 50vh;
    height: 60vh;
  }

}

@media screen and (min-width: 800px) {
  :root {
    font-size: 30px;
  }

  .splash-fg {
    top: 50vh;
    height: 40vh;
  }
  .stars-container{
    top: -120%;
  }

}

@media screen and (min-width: 1000px) {
  :root {
    font-size: 40px;
  }

}


@media screen and (min-width: 1200px) {
  :root {
    font-size: 60px;
  }
}