* {
  margin: 0;
  padding: 0;
}
body {
  background: url(assets/bodybg.png);;
  background-attachment: fixed;
  background-size: cover;
}
.exo-2-text {
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.unbounded-text {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
h1 {
  font-size: 6em;
}
.stars {
  position: fixed;
  z-index: -10;
}
.twinkle {
  position: fixed;
  z-index: -11;
}

.star1 {
  position: fixed;
  top: 31%;
  left: 3%;
}
.star1 img {
  width: 2.6em;
}
.star1 .twinkle {
  top: inherit;
  left: inherit;
  z-index: -11;
}

.star2 {
  position: fixed;
  animation-delay: 1s;
  top: 14%;
  left: 42%;
}
.star2 img {
  width: 1.8em;
}
.star2 .twinkle {
  animation-delay: 1s;
  top: inherit;
  left: inherit;
  z-index: -11;
}

.star3 {
  position: fixed;
  animation-delay: 2s;
  animation-direction: backwards;
  top: 40%;
  left: 61%;
}
.star3 img {
  width: 2.6em;
}
.star3 .twinkle {
  animation-direction: backwards;
  animation-delay: 2s;
  top: inherit;
  left: inherit;
  z-index: -11;
}

.star4 {
  position: fixed;
  animation-delay: 1s;
  top: 30%;
  left: 93%;
}
.star4 img {
  width: 2.5em;
}
.star4 .twinkle {
  top: inherit;
  left: inherit;
  z-index: -11;
}

/* -------------- STAR GENERAL ANIMATION -------------- */
.stars img {
  animation-name: twinkle;
  animation-duration: 5s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}
@keyframes twinkle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.twinkle img {
  animation-name: shine, twinkle;
  animation-duration: 6s, 5s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-composition: add;
}
@keyframes shine {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes star2path {
  0% {
    transform: translateX(0%);
    transform: translateY(0%);
  }
  35% {
    transform: translateX(2vw);
  }
  70% {
    transform: translateX(1vw);
    transform: translateY(-5.5vh);
  }
  100% {
    transform: translateX(200%);
    transform: translateY(200%);
  }
}
.header {
  position: fixed; 
  z-index: 2;
  font-weight: 600;
  font-style: normal;
  color: black;
  height: 9vh;
  width: 100%;
}
.header img {
  float: left;
  height: 80%;
  background-size: contain;
}
.navbar {
  float: right;
  height: 100%;
  min-width: 60%;
  background-image: url(assets/navbar.png);;
  background-size: 100% 100%;
}
.header ul {
  color: black;
  float: right;
  display: flex;
  position: static;
  height: 70%;
  width: 95%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.header li {
  float: left;
  flex: 1;
  color: black;
}
.header li a {
  align-content: center;
  height: 100%;
  flex-wrap: nowrap;
  display: block;
  text-align: center;
  color: black;
  text-decoration: none;
  font-size: 3vmin;
}
a:hover:not(.active) {
  color: violet;
}
.header li a.active {
  color: rgb(188, 16, 223);
}
#home {
  display: flex;
  align-items: center;
  height: 91vh;
  padding-top: 7vh;
}
.space.side {
  flex: 0 1;
  flex-basis: 9%;
}
.space.mid {
  flex: 1;
}
.hook {
  float: left;
  /*border: 2px solid rgb(141, 120, 109);*/
  padding: 2%;
  border-radius: 2% 8% 8% 2%;
  background-color: #fff2e8;
}
.projgroup {
  animation: projfall 20s linear infinite;
}
.reelbox{
  width: 22%;
  height: 100%;
  float: right;
  display: inline;
  position: relative;
}
.reel {
  text-align: center;
  display: flex;
  flex-direction: column-reverse;
  margin: auto;
  width: 82%;
  height: 98%;
  overflow-y:hidden;
  z-index: 0;
  &:hover .projgroup {
    animation-play-state: paused;
  }
}
.cloud-box{
  bottom: 0%;
  width: 100%;
  height: 25%;
  position: absolute;
  z-index: 1;
  background-image: url(assets/cloudbox.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}

.projbox {
  margin: 8% 5% 0%;
  border-radius: 2% 25% 25%;
  width: 90%;
  background-color: #cadff6;
}
.projbox img {
  border-radius: 20%;
  padding: 10%;
  height: auto;
  width: 75%;
}
.projbox img:hover{
  width: 80%;}

@keyframes projfall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

#about {
  /*display:none;*/
  margin: 1em 0px;
  padding-top: 9vh;
  
}
.name{
  display: grid;
  gap: 5%;
  grid-template-columns: 4fr 1fr 4fr;
  grid-template-rows: 0fr;
  grid-template-areas: 
    "f star l";
  margin: 0 6%;
  font-size: 2vmin;
}
.f{
  grid-area: f;
  text-align: right;
  align-self: center;
}
.name img{
  grid-area: star;
  width: 100%;
  object-fit: scale-down;
}
.l{ 
  text-align: left;
  grid-area: l;
  align-self: center;
}
.information {
  margin: 2% 10%;
  padding: 1.25%;
  display: grid;
  grid-template-columns: 2.02fr 0.99fr 0.99fr;
  grid-template-rows: 0fr 1fr 0fr 1fr;
  grid-template-areas:
    "exp skl skl"
    "expcon sklcon1 sklcon2"
    "expcon edu edu"
    "expcon educon educon";
  gap: 2% 1.25%;
  font-size: 1.5em;
  background-color: #331045;
  border-radius: 2.5vmin;
}
.information li {
  padding: 2%;
  text-indent: -1.5em;
  padding-left: 1.75em;
  list-style-position: inside;
}
.info-bold{
  font-size: 2em;
  text-align: center;
}
.information > div {
  padding: 2%;
  background-color: #f5eaff;
  border-radius: 2vmin;
  font-weight: 400;
}
.information img{
  height: 1em;
  display: inline;
}
.exp {
  grid-area: exp;
}
.exp.con {
  grid-area: expcon;
  padding: 4%;
}
.edu {
  grid-area: edu;
  padding: 0%;
}
.edu.con {
  grid-area: educon;
  display: flex;
  justify-content: space-evenly;
  line-height: 135%;
  flex-direction: column;
}
.skl {
  grid-area: skl;
  
}
.skl.con1 {
  grid-area: sklcon1;
}
.skl.con2 {
  grid-area: sklcon2;
}

.information h2 {
  font-size: 1.3em;
}

.information h4 {
  color: #8a7296;
  display: inline;
}

#projects {
  padding-top: 9vh;
  border: 2px  black;
  text-align: center;
  padding: 9vh 3% 0;
  margin-bottom: 3vh;
  font-size: 3vmin;
}
.projects.flex-con {
  padding: 0 0;
  margin-top: 2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.projects.flex-item {
  flex-basis: 25%;
  padding: 2%;
  background-color: #ffe4fb;
  border-radius: 5%;
}
.projects a{
  font-weight: 300;
  text-decoration: none;
  color: black;
}
.projects.flex-item img {
  height: auto;
  width: 90%;
  border-radius: 5%;
}
/* ------------------- Project Pages ------------------- */
.cloud-header{
  width: 97.5%;
  padding-left: 2.5%;
  background-color: white;
}
.cloud-bar{
  margin-top: -1px;
  width: 100%;
  background-image: url(assets/portfolio-project/cloud-bar.png);
  position: sticky;
  top: 0;
  background-size: 100% 93%;
  background-repeat: no-repeat;
}
.cloud-bar ul {
  color: black;
  font-size: 3vmin;
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}
.cloud-bar li{
  background-image: url(assets/portfolio-project/cloud-button.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  width: 15%;
  padding: 2%;
}
.cloud-bar li a {
  text-decoration: none;
  color: black;
}
.cloud-bar li:hover:not(.active) {
  /*want the active or hovered to stretch a little downwards*/
  color: violet;
}
.cloud-bar li a.active {
  color: rgb(188, 16, 223);
}
.subtitle{
  padding-top: 6.5vh;
  margin: 0 2em;
  font-size: 5em;
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal; 
}
.portfolio{
    border-radius: 2vmin;
    margin: 1% 9%;
    padding: 2.5%;
    font-weight: 400;
    font-size: 1.25em;
}
.portfolio li{
    padding: 1.5%;
}
.features-box{
    background-color: #FFE8FF;
}
.features-flex{
  display: flex;
  flex-wrap: wrap;
}
.features-flex li{
  padding-bottom: 0;
}
.example-image{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5%;
}
.example-image img{
  height: 50vh;
}
.example-support{
    display: flex;
    gap: 3%;
    max-height: 60vh;
}
.example-support img{
  min-width: 0;
  max-height: 50vh;
  width: auto;
}
.process-box{
    background-color: #F4E8FF;
    line-height: 1.75;
}
.process-box h3{
  text-align: center;
}
.sketches{
  display: flex;
  justify-content: center;
}
.sketches img{
  width: 20%;
  margin: 2.5%;
}
.return{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2vmin;
    padding: 2.5%;
    width: 45%;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 6%;
    background-color: #e1cfff;
}
.return a{
  text-decoration: none;
  color: black;
}
.return a:hover{
  color: #520876;
}
.return a .subtitle{
  padding: 0;
}
/* -------------------- Mobile Versions -------------------- */
@media (max-width: 800px) {
  h1 {
    font-size: 5em;
  }
  .unbounded-text {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 13vw;
}
  #home {
    height: 80vh;
    justify-content: center;
  }
  .space{
    display: None;
  }
  .header img {
    height: 0;
  }
  .navbar {
    width: 95%;
  }
  .header li a {
    font-size: 4vmin;
  }
  .reelbox {
    display: none;
  }
  .hook {
    float: none;
    font-size: 90%;
  }
  .name{
  display: flex;
  flex-direction: column;
  margin: 0 6%;
  font-size: 3.5vmin;
  align-items: center;
}
  .f{
  grid-area: f;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: bottom;
}
  .name img{
  grid-area: star;
  width: 25%;
  object-fit: scale-down;
}
.l{ 
  text-align: center;
  grid-area: l;
  display: flex;
  justify-content: space-between;
  align-items: top;
}
  .information {
  margin: 2% 5%;
  padding: 1%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0fr 4fr 0fr 1fr 0fr 1fr;
  grid-template-areas:
    "exp exp"
    "expcon expcon"
    "skl skl"
    "sklcon1 sklcon2"
    "edu edu"
    "educon educon";
  gap: 0.5% 1%;
  font-size: 3vh;  
  border: 2px solid black;

}
.info-bold{
  font-size: 10vw;
  text-align: center;
}
  .projects.flex-con {
  padding: 0 7%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: column;
  
}
  .projects.flex-item {
  flex-basis: 25%;
  padding:5%;
  margin: 5%;
  border-radius: 5%;
}

.projects.flex-item img {
  height: auto;
  width: 85%;
  margin: 5% 0;
}
  .construction{
    margin: 25% 0;
  }
  .nmem{
  flex-direction: column;
  align-items: left;
}
  .message textarea{
  border: 0;
  border-radius: 0.5em;
  margin-top: 2%;
  width: 100%;
  height: 50vh;
}
/* ------------------- Mobile Project Pages ------------------- */
.subtitle{
  font-size: 3em;
  margin: 0;
  text-align: center;
}
.cloud-header h1{
  font-size: 14vmin;
}
.cloud-header p{
  font-size: 4vmin;
}
.cloud-bar{
  background-size: 100% 85%;
}
.cloud-bar li{
  overflow: visible;
  background-size: 100% 100%;
  text-align: center;
  font-size: 4vmin;
  width: 30%;
  padding: 2%;
}
.example-image{
  flex-direction: column;
  align-items: center;
}
.example-image img{
  max-width: 55%;
  height: auto;
  padding-top: 5%;
}
.example-support{
  max-height: fit-content;
  flex-direction: column;
  align-items: center;
}
.example-support img{
  padding-top: 5%;
  width: auto;
  max-width: 100%;
}
.return a h2{
  font-size: 2em;
}
.portfolio{
  font-size: 1.15em;
}
.portfolio li{
  list-style-position: inside;
  text-indent: -1.5em;
  padding-left: 1.5em;
}
.process-box{
  font-size: 0.9em;
}


}