:root {
  --t1: clamp(3rem, calc(3vw + 1rem), 4rem);
  --t2: clamp(1.5rem, calc(1vw + 1rem), 2rem);
  --t3: clamp(1rem, calc(0.2vw + 1rem), 1.5rem);
  --par: clamp(0.90rem, calc(0.05vw + 1rem), 1.25rem);
}

body{
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
  font-family: "Monaco", monospace;
  /* background-color: #0b1a36; */
  background: #050E14;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1{
  margin: 0;
  font-size: var(--t1);
  color: rgb(240, 245, 243);
}
h2{
  margin: 0;
  font-size: var(--t2);
  color: rgb(240, 245, 243);
}
h3{
  margin: 0;
  font-size: var(--t3);
  color: rgb(240, 245, 243);
}
p{
  margin: 0;
  font-size: var(--par);
  /* font-size: 0.75rem; */
  color: rgb(240, 245, 243);
}

a{
  text-decoration: none;
}


/********************** HOME PAGE ********************/

/* .sun{
  width: 120vw;
  aspect-ratio: 1/1;
  background: url(assets/noise-light.png), radial-gradient(circle, #015ba0, #006CBC);
  border-radius: 50%;
  box-shadow: 0 0 60px 35px #277fc2 inset, 0 0 80px 5px #277fc2, 0 0 50px 20px #006CBC, 0 0 60px 20px #1A63C0,  0 0 400px 100px #006CBC;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0%);  
  z-index: -1;
} */

#navbar{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 7vh;
  background-color: #0F2739;
  gap: 2vw;
  position: sticky;
  top: 0;
  z-index: 3;
}

#hero{
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
}

.hero-text{
  width: 40vw;
}

#my-pic{
  width: 25vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  /* box-shadow: -10px -10px 30px -10px pink,
  10px 10px 30px -10px lightblue; */
  animation: breathe 10s linear infinite;
}

.section-title{
  display: flex;
  justify-content: center;
}

.section-divider{
  width: 60vw;
  margin: 1rem 0rem 0rem 1rem;
}

#projects{
  width: 100%;
  scroll-margin-top: 15vh;
  /* min-height: 100%; */
  display: flex;
  flex-direction: column;
  gap: 5vw;
}

.project-row{
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 2vw;
}

.project-row-alt{
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 2vw;
}

.project-text{
  /* width: 35vw; */
  width: 35vw;
}
.project-text-alt{
  /* width: 35vw; */
  width: 35vw;
  text-align: right;
}

.project-dark-text{
  color: gray;
}

.project-image{
  width: 25vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  /* position: relative; */
  /* z-index: 1; */
  animation: breathe 10s linear infinite;
}

.project-row:nth-child(1) .project-image {animation-delay: 0s;}
.project-row:nth-child(2) .project-image {animation-delay: -3s;}
.project-row:nth-child(3) .project-image {animation-delay: -6s;}

.spin-fast{
  animation: fast 1s cubic-bezier(.4,.82,.5,.94);
}

.spin-slow{
  animation: slow 4.5s linear infinite;
}

.project-card.big-card{
  transform: scale(1.1);
  z-index: 2;
}

#about{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 150vh;
  scroll-margin-top: -18vw;
  gap: 5vw;
}

.about-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
}

.about-text{
  width: 40vw;
}

#contact{
  background-color: #0F2739;
}

.contact-form{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  /* animation: breathe 10s linear infinite; */
}

.form-group{
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

input,
textarea{
  border-radius: 5px;
  background-color: #050E14;
  font-size: var(--par);
  color: rgb(240, 245, 243);
}

#submit{
  cursor: pointer;
  animation: breathe-small 10s linear infinite;
}

#submit.big-button{
  transform: scale(1.1);
}

.footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  aspect-ratio: 1/0.0625;
  margin: 1vw 2vw 0vw 2vw;
}

@keyframes breathe{
  0%{
    box-shadow: 0px 0px 30px 10px pink;
  }
  25%{
    box-shadow: -20px -20px 20px -10px pink,
    20px 20px 20px -10px lightblue;
  }
  50%{
    box-shadow:0px 0px 20px 10px lightblue;
  }
  75%{
    box-shadow: 20px -20px 20px -10px pink,
    -20px 20px 20px -10px lightblue;
  }
  100%{
    box-shadow: 0px 0px 30px 10px pink;
  }
}

@keyframes breathe-small{
  0%{
    box-shadow: 0px 0px 5px 1px pink;
  }
  25%{
    box-shadow: -5px -5px 5px -1px pink,
    5px 5px 5px -1px lightblue;
  }
  50%{
    box-shadow:0px 0px 5px 1px lightblue;
  }
  75%{
    box-shadow: 5px -5px 5px -1px pink,
    -5px 5px 5px -1px lightblue;
  }
  100%{
    box-shadow: 0px 0px 5px 1px pink;
  }
}

@keyframes fast{
  from { 
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(330deg);
  }
}

@keyframes slow{
  from { 
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(330deg);
  }
}

@media (max-width: 1200px){
  .project-row{
    flex-direction: column-reverse;
    align-items: center;
  }
  .project-row-alt{
    flex-direction: column;
    align-items: center;
  }
  .project-text-alt{
    width: 65vw;
    text-align: left;
  }
  .project-text{
    width: 65vw;
  }
  .project-image{
    width: 65vw;
  }
}