/* General */

@font-face {font-family:'OutfitBold'; src: url('../fonts/Outfit/Outfit-ExtraBold.ttf')}
@font-face {font-family:'Outfit'; src: url('../fonts/Outfit/Outfit-Regular.ttf')}

h1,h2,a,input,textarea,button {font-family:'OutfitBold', sans-serif; font-weight: 400;}
p,ul,li,span {font-family:'Outfit', sans-serif; font-weight: 400;}

:root {
  --contentWidth: 1500px;
  --contentSpacing: 20px;
  --contentRadius: 15px;
  --actionRadius: 30px;
  --color1: #ffffff; /* White */
  --color2: #000000; /* Black */
  --color3: #0d1020; /* Primary */
  --color4: #252847; /* Elevated */
  --color5: #dbe7ff; /* Accent */
  --color6: #f2bf73; /* Highlight */
  --color7: #ff6277; /* Danger */
}

body {
  background-image: radial-gradient(#ffffff14 1px, transparent 1px);
  background-color: var(--color3);
  background-size: 40px 40px;
  overflow-y: scroll;
  min-width: 375px;
  margin: 0;
}

html {
  background: var(--color2);
}

/* Header */

.header {
  background: linear-gradient(to bottom, #000000e7, #0000007c, #00000000);
  position: fixed;
  z-index: 998;
  width: 100%;
}

.header-content {
  justify-content: space-between;
  max-width: var(--contentWidth);
  padding: var(--contentSpacing);
  align-items: center;
  display: flex;
  margin: auto;
}

.header-svg {
  width: clamp(11rem, 10.5rem + 1.5vw, 12rem);
  transition: 0.3s;
}

.header-svg.scrolled {
  width: clamp(9rem, 8.5rem + 1.5vw, 10rem);
}

.header-button {
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  transition: 0.3s;
  cursor: pointer;
  display: grid;
  z-index: 999;
  height: 30px;
  width: 30px;
}

.header-dot {
  background-color: var(--color1);
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.header-button.active {
  transform: rotate(45deg);
}

/* Overlay */

.overlay {
  background: #121426f8;
  visibility: hidden;
  transition: 0.3s;
  position: fixed;
  display: flex;
  z-index: 998;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  top: 0;
}

.overlay.active {
  visibility: visible;
  opacity: 1;
}

.overlay-content {
  padding: var(--contentSpacing);
  transform: translateX(-20px);
  width: var(--contentWidth);
  transition: 0.3s;
  margin: auto;
  opacity: 0;
}

.overlay-content.active {
  transform: translateX(0);
  opacity: 1;
}

.overlay-content a {
  font-size: clamp(4rem, 1.5rem + 5.5vw, 7rem);
  text-decoration: none;
  color: var(--color1);
  transition: 0.3s;
  display: block;
}

.overlay-content a:hover {
  color: var(--color6);
}

.overlay-content svg {
  width: clamp(13rem, 2.5rem + 12.5vw, 23rem);
  margin-top: var(--contentSpacing);
  animation: 5s sweepGlow infinite;
  stroke-dasharray: 1500;
  stroke: #f8b95a;
  fill: #e8b974;
}

@keyframes sweepGlow {
  0% {
    filter: drop-shadow(0 0 0px #f8b95a);
    stroke-dashoffset: 1500;
    stroke-width: 1;
    opacity: 0.5;
  }
  50% {
    filter: drop-shadow(0 0 10px #f8b95a);
    stroke-dashoffset: 0;
    stroke-width: 3;
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 0px #f8b95a);
    stroke-dashoffset: 1500;
    stroke-width: 1;
    opacity: 0.5;
  }
}

/* Footer */

.footer {
  background-color: var(--color2);
  width: 100%;
}

.footer-content {
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 20vw, 300px), 1fr));
  padding: 50px var(--contentSpacing);
  max-width: var(--contentWidth);
  gap: var(--contentSpacing);
  display: grid;
  margin: auto;
}

.footer-column h2 {
  color: var(--color6);
  margin-top: 0;
}

.footer-column a {
  text-decoration: none;
  color: var(--color1);
  margin-bottom: 10px;
  transition: 0.2s;
  display: block;
}

.footer-column a:hover {
  color: var(--color6);
}

.footer svg {
  justify-self: center;
  align-self: center;
  width: 75%;
}

/* Hero */

.hero {
  position: relative;
  height: 100vh;
  width: 100%;
}

.hero img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.hero-shadow {
  background: #00000091;
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
}

.hero-content {
  padding: var(--contentSpacing);
  width: var(--contentWidth);
  margin: auto;
}

.hero-content h1 {
  font-size: clamp(5rem, 1.5rem + 5.5vw, 10rem);
  color: var(--color1);
  margin: 0;
}

.hero-content p {
  font-size: clamp(0.8rem, 0.25rem + 3.5vw, 1.3rem);
  color: var(--color5);
}

.hero-buttons a {
  font-size: clamp(1rem, 5vw + 0.4rem, 1.2rem);
  border-radius: var(--actionRadius);
  background-color: var(--color4);
  display: inline-block;
  text-decoration: none;
  color: var(--color1);
  margin-right: 5px;
  transition: 0.3s;
  padding: 15px;
}

.hero-buttons a:nth-of-type(2) {
  box-shadow: inset 0 0 0 3px var(--color4);
  background-color: transparent;
}

.hero-buttons a:hover {
  background-color: var(--color6);
  box-shadow: var(--color6);
}

/* Subhero */

.subhero {
  position: relative;
  height: 50svh;
  width: 100%;
}

.subhero img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.subhero-shadow {
  background: #00000091;
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
}

.subhero-content {
  padding: var(--contentSpacing);
  width: var(--contentWidth);
  align-self: flex-end;
  margin-right: auto;
  margin-left: auto;
}

.subhero-content h1 {
  font-size: clamp(4rem, 1.5rem + 5.5vw, 10rem);
  color: var(--color1);
  margin: 0;
}

.subhero-content p {
  font-size: clamp(0.8rem, 0.25rem + 3.5vw, 1.3rem);
  color: var(--color5);
  margin: 0;
}

/* Cards */

.cards {
  max-width: 1900px;
  overflow-x: auto;
  height: 450px;
  margin: auto;
}

.cards-wrapper {
  padding: var(--contentSpacing);
  gap: var(--contentSpacing);
  box-sizing: border-box;
  min-width: 1900px;
  display: flex;
  height: 100%;
  width: 100%;
}

.card {
  border-radius: var(--contentRadius);
  position: relative;
  transition: 0.3s;
  height: 100%;
  flex: 1 1 0;
}

@media (min-width: 600px) {
  .card:hover {
    box-shadow: 0 0 0 3px var(--color6);
    transform: scale(1.02);
  }
}

@media (max-width: 600px) {
  .card.in-view {
    box-shadow: 0 0 0 3px var(--color6);
    transform: scale(1.02);
  }
}

.card img {
  border-radius: var(--contentRadius);
  pointer-events: none;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.card-shadow {
  background: linear-gradient(to top, #000000, #00000000);
  border-radius: var(--contentRadius);
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
}

.card-content {
  padding: var(--contentSpacing);
  color: var(--color1);
  text-align: center;
  position: absolute;
  bottom: 0;
}

.card-content h1 {
  font-size: clamp(1.8rem, 1.85rem + 0.5vw, 2.2rem);
  margin: 0;
}

.card-content a {
  text-decoration: none;
  color: var(--color6);
}

/* Text Grid */

.textgrid {
  grid-template-columns: 1fr 1.3fr;
  max-width: var(--contentWidth);
  padding: var(--contentSpacing);
  gap: var(--contentSpacing);
  color: var(--color1);
  display: grid;
  margin: auto;
}

@media (max-width: 900px) {
  .textgrid {
    grid-template-columns: 1fr;
  }
}

.textgrid-text h1 {
  font-size: clamp(2.2rem, 2.25rem + 0.5vw, 2.8rem);
  color: var(--color6);
  margin: 0;
}

.textgrid-text a {
  font-size: clamp(1rem, 5vw + 0.4rem, 1.2rem);
  border-radius: var(--actionRadius);
  background-color: var(--color4);
  display: inline-block;
  text-decoration: none;
  color: var(--color1);
  margin-right: 5px;
  transition: 0.3s;
  padding: 15px;
}

.textgrid-text a:nth-of-type(2) {
  box-shadow: inset 0 0 0 3px var(--color4);
  background-color: transparent;
}

.textgrid-text a:hover {
  background-color: var(--color6);
  box-shadow: var(--color6);
}

.textgrid img {
  border-radius: var(--contentRadius);
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Projects */

.projects {
  max-width: var(--contentWidth);
  padding: var(--contentSpacing);
  margin: auto;
}

.projects h1 {
  font-size: clamp(2.2rem, 2.25rem + 0.5vw, 2.8rem);
  color: var(--color6);
  margin-top: 0;
}

/* Projectgrid */

.projectgrid {
  grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 20vw, 500px), 1fr));
  gap: var(--contentSpacing);
  max-width: 100%;
  display: grid;
}

.projectgrid-item {
  border-radius: var(--contentRadius);
  background-color: var(--color4);
  transform: translateY(30px);
  flex-direction: column;
  transition: 0.8s;
  display: flex;
  opacity: 0;
}

.projectgrid-item.in-view {
  transform: translateY(0);
  opacity: 1;
}

.projectgrid-item-text {
  padding: var(--contentSpacing);
  color: var(--color1);
}

.projectgrid-item-text h2 {
  margin-top: 2.5px;
  margin-bottom: 0;
}

.projectgrid-item-text p:nth-of-type(1) {
  color: var(--color6);
  margin: 0;
}

.projectgrid-item-action {
  border-radius: var(--actionRadius);
  background-color: var(--color3);
  position: absolute;
  padding: 10px;
  left: 10px;
  top: 10px;
}

.projectgrid-item-action a {
  text-decoration: none;
  color: var(--color5);
  padding: 4px 8px;
}

.projectgrid-item-action a:nth-of-type(1) {
  color: var(--color7);
}

/* Projectgrid gallery */

.projectgrid-gallery {
  position: relative;
  overflow: hidden;
}

.projectgrid-gallery-image {
  border-radius: var(--contentRadius) var(--contentRadius) 0 0;
  aspect-ratio: 5 / 3;
  position: absolute;
  object-fit: cover;
  transition: 0.3s;
  width: 100%;
  opacity: 0;
}

.projectgrid-gallery-image.active {
  position: relative;
  opacity: 1;
}

.projectgrid-gallery-counter {
  border-radius: var(--actionRadius);
  background-color: var(--color3);
  color: var(--color1);
  position: absolute;
  padding: 4px 10px;
  font-size: small;
  right: 10px;
  top: 10px;
}

.projectgrid-gallery button {
  background-color: var(--color3);
  transform: translateY(-50%);
  color: var(--color1);
  border-radius: 50%;
  position: absolute;
  padding: 2px 8px;
  transition: 0.3s;
  font-size: 23px;
  cursor: pointer;
  border: none;
  opacity: 0;
  left: 10px;
  top: 50%;
}

.projectgrid-gallery button:nth-of-type(2) {
  right: 10px;
  left: unset;
}

.projectgrid-gallery:hover button {
  opacity: 1;
}

/* Contact Grid */

.contactgrid {
  grid-template-columns: 1fr 1fr;
  max-width: var(--contentWidth);
  padding: var(--contentSpacing);
  gap: var(--contentSpacing);
  color: var(--color1);
  column-gap: 50px;
  display: grid;
  margin: auto;
}

@media (max-width: 700px) {
  .contactgrid {
    grid-template-columns: 1fr;
  }
}

.contactgrid-text h1 {
  font-size: clamp(2.2rem, 2.25rem + 0.5vw, 2.8rem);
  color: var(--color6);
  margin: 0;
}

.contactgrid-icons {
  margin-bottom: 50px;
  margin-top: 50px;
}

.contactgrid-icons img {
  vertical-align: middle;
  margin-right: 10px;
  width: 40px;
}

/* Legal */

.legal {
  padding: var(--contentSpacing);
  max-width: var(--contentWidth);
  color: var(--color1);
  margin: auto;
}

.legal-content {
  max-width: 1000px;
}

.legal-content h1 {
  color: var(--color6);
}

.legal-content h2 {
  color: var(--color5);
}

/* Prompt  */

.prompt {
  padding: 175px var(--contentSpacing);
  color: var(--color1);
  text-align: center;
  max-width: 400px;
  margin: auto;
}

.prompt h1 {
  font-size: clamp(2.2rem, 2.25rem + 0.5vw, 2.8rem);
  color: var(--color6);
}

.prompt a {
  font-size: clamp(1rem, 0.5rem + 5.5vw, 1.2rem);
  border-radius: var(--actionRadius);
  background-color: var(--color4);
  text-decoration: none;
  display: inline-block;
  color: var(--color1);
  transition: 0.3s;
  padding: 15px;
  border: none;
}

.prompt a:hover {
  background-color: var(--color6);
}

/* Buttonrow */

.buttonrow {
  padding: var(--contentSpacing) var(--contentSpacing) 0 var(--contentSpacing);
  max-width: var(--contentWidth);
  margin: auto;
}

.buttonrow a {
  border-radius: var(--actionRadius);
  border: 2px solid var(--color5);
  display: inline-block;
  text-decoration: none;
  color: var(--color5);
  margin-right: 5px;
  padding: 10px;
}

.buttonrow a:nth-of-type(1) {
  border: 2px solid var(--color7);
  color: var(--color7);
}

/* Form */

.form input,
.form textarea {
  font-size: clamp(0.8rem, 0.5rem + 2.5vw, 1.1rem);
  margin-bottom: var(--contentSpacing);
  border-radius: var(--actionRadius);
  box-sizing: border-box;
  color: var(--color4);
  padding: 15px;
  border: none;
  resize: none;
  width: 100%;
  outline: 0;
}

.form button {
  font-size: clamp(0.8rem, 0.5rem + 2.5vw, 1.1rem);
  border-radius: var(--actionRadius);
  background-color: var(--color4);
  color: var(--color1);
  transition: 0.3s;
  cursor: pointer;
  padding: 15px;
  border: none;
}

.form button:hover {
  background-color: var(--color6);
}

.form-captcha {
  margin-bottom: var(--contentSpacing);
  border-radius: var(--actionRadius);
  border: 2px solid var(--color4);
  background: #17192d;
  padding: 15px;
}

.form-captcha p {
  font-size: clamp(0.45rem, 0.45rem + 0.15vw, 0.55rem);
  font-style: italic;
  color: #687bb9;
  margin-top: 0;
}

/* Message */

.message {
  border-radius: 0 0 var(--actionRadius) var(--actionRadius);
  transform: translateX(-50%) translateY(-120px);
  background-color: var(--color2);
  color: var(--color1);
  text-align: center;
  transition: 0.3s;
  position: fixed;
  padding: 20px;
  z-index: 999;
  left: 50%;
  margin: 0;
  top: 0;
}

.message.show {
  transform: translateX(-50%) translateY(0);
}

.message.hide {
  transform: translateX(-50%) translateY(-120px);
}