@font-face {
  font-family: 'EchoHorizon';
  src: url('assets/fonts/EchoHorizonModern-nADZg.ttf') format('truetype');
}
@font-face {
  font-family: 'CSMorcant';
  src: url('assets/fonts/csmorcantmonodrawnregulardemo-7o7ml.otf') format('truetype');
}

html {
  justify-content: center;
}

body {
  box-sizing: border-box;
  background: #22211d;
  color: #d2cccc;
  max-width: 1000px;
  min-height: 570px;
  font-family: 'EchoHorizon', sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.8rem);
  letter-spacing: 0.12em;
  line-height: 1.2em;
  margin: 0;
  padding: 0;
}
main {
  width: 90%;
  min-width: 320px;
  padding-bottom: 200px;
}

ul {
  list-style: none;
  min-width: 320px;
  margin: 0;
  padding: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: space-around;
  font-size: clamp(2rem, 5vw, 2.5rem);
}

a {
  color: rgb(74, 74, 234);
}

a:visited {
  color: rgb(181, 138, 222);
}

a:hover {
  color: rgb(88, 88, 201);
}

h2, h3, h4 {
  margin: 0;
  color: rgb(181, 138, 222);
}

h2 {
  font-size: clamp(21px, 4vw, 2.2rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
  font-size: clamp(1rem, 2vw, 1.4rem);
}

nav, footer {
  width: 100%;
  max-width: 1000px;
  height: clamp(120px, 20vw, 180px);
  position: fixed;
  z-index: 100;
}

nav {
  background-image: linear-gradient(#22211d,#22211d, #22211dd0, #22211d59,  #22211d00);
}

footer {
  bottom: 0;
  background-image: linear-gradient(#22211d00, #22211d7a, #22211dd0, #22211d, #22211d);
}

img {
  border-radius: 3px;
}

figure, iframe, video, .nc-projects {
  padding: 0;
  margin: 0;
  width: 100%;
}

figcaption {
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  color: rgb(181, 138, 222);
}

iframe {
  height: 50vw;
  max-height: 350px
}

.nav-link, .foot-link {
  transition: transform 0.15s ease-in-out;
}

.nav-link:hover, .foot-link:hover {
  transform: scale(1.2);
}

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.self-left {
  align-self: flex-start;
}

.text-highlight  {
  color: rgb(179, 140, 216);
}

.subtitle {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 5vw;
}

.about-page{
  padding-top: clamp(90px, 10vw, 140px);
}

.projects-page {
  padding-top: clamp(70px, 9vw, 90px);
}

.about-gallery {
  width: 100%;
  max-width: 1000px;
  opacity: 0;
}

@keyframes about-gallery-animation {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.90;
    transform: scale(1);
  }
}

.about-gallery.in-view, .nc-projects-item.in-view, .personal-projects-item.in-view {
  animation:  about-gallery-animation .7s ease-in-out forwards;
}

.projects, .nc-projects, .personal-projects {
  gap: 60px;
}

.nc-projects-item, .personal-projects-item {
  max-width: 800px;
  border-radius: 5% 20% 8% 15%;
  transition: transform 0.25s ease-in-out;
}

.nc-projects-item {
  background-image: url("assets/images/paperBackground.jpg");
  color: #22211d;
  font-family: 'CSMorcant', monospace;
  padding: 1rem;
  padding-left: clamp(1rem, 2vw, 2rem);
}

.nc-projects-item:hover {
  animation: about-gallery-animation .7s ease-in-out forwards;
}

.nc-projects-item:hover > .logo-top-left  {
  animation: inherit;
}
.nc-projects-item:hover > .logo-bottom-left  {
  animation: inherit;
  animation-delay: 600ms;
}
.nc-projects-item:hover > .logo-bottom-right  {
  animation: inherit;
  animation-delay: 400ms;
}
.nc-projects-item:hover > .logo-top-right  {
  animation: inherit;
  animation-delay: 200ms;
}

.nc-projects-item:hover, .personal-projects-item:hover {
  outline: 5px groove rgba(88, 88, 201, 0.7);
}

.nc-projects-header {
  align-self: flex-start;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 2.4vw, 1.8rem);
}

.nc-projects-text {
  padding: 0 7vw;
  font-size: clamp(0.8rem, 1.7vw, 1.2rem);
  line-height: clamp(0.8rem, 2.2vw, 1.2rem);
  letter-spacing: 0.01em;
  z-index: 10;
}

.nc-projects-footer {
  align-self: flex-end;
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  letter-spacing: 0.01em;
  font-style: italic;
}

.nc-projects-logo {
  position: absolute;
  width: clamp(30px, 6.5vw, 90px);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.logo-top-left {
  top: 20%;
  left: 2%;
  animation-delay: 2000ms;
}

.logo-bottom-left {
  bottom: 15%;
  left: 2%;
  animation-delay: 8000ms;
}

.logo-bottom-right {
  bottom: 20%;
  right: 2%;
  animation-delay: 6000ms;
}

.logo-top-right {
  top: 15%;
  right: 2%;
  animation-delay: 4000ms;
}

.personal-projects, .personal-projects-a, iframe, video {
  width: 100%;
}

.form-main {
  height: 100vh;
  min-height: 800px;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 0;
}

.form-field, #submit-btn {
  width: 70%;
  opacity: 0.7;
  font-family: 'EchoHorizon', sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.recaptcha {
  margin-top: 8px;
}

#submit-btn {
  margin-top: 20px;
  padding: 10px;
  background-color: rgb(181, 138, 222);
  transition: transform 0.25s ease-in-out;
  border: none;
  border-radius: 3px;
}

#submit-btn:hover {
  transform: scale(1.05);
  opacity: 1;
  background-color: rgb(88, 88, 201);
}

#landing-screen {
  height: 100svh;
  justify-content: center;
}

#headshot {
  width: clamp(340px, 50%, 600px);
}

#animated-footer {
  height: 50px;
  justify-content: center;
}

.band-list {
  padding-bottom: 20px;
}

#footer-links {
  position: fixed;
  width: 100%;
  max-width: 1000px;
  bottom: 0;
}

#form-contents, .form-note {
  width: 40vw;
  max-width: 600px;
  min-width: 300px;
}

#form-contents {
  padding: 3vw 2vw;
  border: 2px solid rgb(166, 159, 172);
  border-radius: 3px;
}

.form-note {
  padding: 1vw 2vw;
  font-size: clamp(0.8rem, 1.5vw, 1.2rem);
  line-height: clamp(0.9rem, 1.7vw, 1.4rem);
}