/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  background-color: black;
  color: white;
  font-family: var(--ff-nav);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: var(--clr-neutral-100);
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

img.logo-small {
  width: auto;
  height: auto;
  max-height: 4.5rem;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* GENERAL STYLING */

/* navigation */
  
.primary-header {
  --max-width: 1110px;
  --container-padding: 1rem;

  width: min(var(--max-width), 100% - (var(--container-padding) * 2));
  margin-inline: auto;
  padding-top: var(--size-200);
  padding-bottom: var(--size-200);
  z-index: 9999;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-nav);
  letter-spacing: 0;
  line-height: 1rem;
}

.mobile-nav-toggle {
  display: none;
}

.nav-list {
  font-size: var(--fs-nav);
}

.nav-list {
  color: var(--clr-neutral-100);
  display: flex;
  gap: clamp(var(--size-200), 5vw, var(--size-500));
  font-weight: var(--fw-semi-bold);
}

.nav-list a {
  text-decoration: none;
  color: var(--clr-neutral-100);
}

.nav-list a:hover,
.nav-list a:focus {
  font-family: var(--ff-nav-bold);
  font-weight: var(--fw-bold);
  /* color: var(--clr-neutral-900); */
}

.futuristic-button-wrapper{
  align-items: center;
}

.futuristic-button-wrapper .futuristic-button{
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 10.125rem;
  border: 0;
  color: var(--clr-neutral-100);
  background-color: var(--clr-accent-400);
  -webkit-clip-path: polygon(100% 0, 100% 60%, 80% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 60%, 80% 100%, 0 100%, 0 0);
}

@media (max-width: 50em) {
  .futuristic-button-wrapper .futuristic-button{
    margin-right: 3rem;
    height: 2rem;
    width: 6rem;
    
  }

  img.logo-small {
    width: 5rem;
    height: auto;
  }

  .hide-mobile{
      display: none;
  }

  .primary-navigation {
      display: none;
      position: fixed;
      padding: var(--size-700);
      inset: 7rem var(--size-400) auto;
      max-width: 25rem;
      margin-left: auto;
      background: var(--clr-neutral-900);
      border-radius: var(--size-100);
      box-shadow: 0 0 0.75em rgb(0, 0, 0, 0.05);
  }

  .primary-header[data-overlay]::before {
    content: "";
    position: fixed;
    inset: 0;
    /* height: 100vh; */
    background-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.8));
  }

  .nav-list {
    display: grid;
    gap: var(--size-600);
    text-align: center;
    font-weight: var(--fw-bold);
  }

  .primary-navigation[data-visible] {
    display: block;
    z-index: 1;
  }

  .mobile-nav-toggle {
    display: block;
    position: fixed;
    top: var(--size-300);
    right: var(--size-300);
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0.5em;
  }

  .mobile-nav-toggle .icon-close {
      display: none;
  }

  .mobile-nav-toggle .icon-hamburger {
      display: none;
  }
  
  .mobile-nav-toggle .icon-close[data-visible] {
      display: block;
  }

  .mobile-nav-toggle .icon-hamburger[data-visible] {
      display: block;
      fill: white;
  }
}

/* Main Section */

.main-content * {
  padding: 0.5rem;
  font-size: 1.25rem;
}

@media (max-width: 50em) {
  .message-success{
    font-size: 1rem;
  }
  .main-content * {
    padding: 0.25rem;
    font-size: 1rem;
  }
}

.main-title h1{
  font-size: 4rem;
  text-align: center;
  font-family: Bebas Neue;
  font-weight: 400;
  text-transform: uppercase;
  word-wrap: break-word;
  margin-top: 2rem;
  font-style: normal;
  line-height: 95.5%;
  letter-spacing: -0.16rem;
}

.main-title h1.accent{
  font-size: 6.7rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  line-height: 95.5%;
}

.main-title h2{
  font-size: 3rem;
  text-align: center;
  font-family: Bebas Neue;
  font-weight: 400;
  text-transform: uppercase;
  word-wrap: break-word;
  margin-top: 0rem;
  font-style: normal;
  line-height: 100%;
}

.main-section-wrapper{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}

.pdf-section-wrapper{
  height: 1200px;
}

@media (max-width: 50em){
  .pdf-section-wrapper{
    height: 800px;
  }
}

.main-action{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.grid-item{
  display: flex;
  justify-content: center;
  align-items: center;
}

.ma-big{
  width: 80%;
  height: calc(27.02969rem + 3.52969rem);
}

@media (max-width: 50em){
  .main-title > h1{
    font-size: 2.5rem;
    letter-spacing: 0;
  }
  .main-title h1.accent{
    font-size: 4rem;
    font-weight: 600;
    margin-top: 1rem;
  }
  .main-title > h2{
    font-size: 1.875rem;
    letter-spacing: 0;
  }


  .ma-big{
    width: 100%;
    min-width: 300px;
    height: 15rem;
  }
}

.ma-small{
  width: 15rem;
  height: calc(15rem + 3.4375rem);
}

.img-outter {
  display: flex;
  width: 100%;
  height: calc(100% - 3.52969rem);
  background: var(--clr-gradient-accent);
  justify-content: center;
  align-items: center;
}

.img-outter > img{
  width: calc(100% - 1.5rem);
  height: calc(100% - 1.5rem);
  object-fit: cover;
  border: 1px solid #000;
  background: lightgray 50% / cover no-repeat;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

@media (max-width: 50em) {
    .img-outter > img{
        object-fit: fill;
    }
}

.futuristic-button{
  border: 0;
  height: 3rem;
  color: var(--clr-neutral-100);
  background-color: var(--clr-accent-400);
  -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

.futuristic-button:disabled{
  background-color: var(--clr-neutral-500);
}

.futuristic-button:not(:disabled):hover,
.futuristic-button:not(:disabled):focus{
  cursor: pointer;
  border: 0;
  color: var(--clr-neutral-100);
  background-color: var(--clr-accent-300);
}

.fb-big{
  width: 19.06206rem;
  height: 3.52969rem;
  font-size: 1.25rem;
}

.fb-small{
  width: 15rem;
  height: 3.4375rem;
  font-size: 1rem;
}

.futuristic-button > span{
  text-transform: uppercase;
  color: var(--clr-neutral-100);
  text-align: center;
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0.15rem;
}

.secondary-button{
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.125rem;
  font-weight: 600;
  border: 0;
  height: 3rem;
  color: var(--clr-neutral-100);
  background-color: var(--clr-accent-400);
}

.secondary-button:disabled{
  background-color: var(--clr-secondary-400);
}

.secondary-button:not(:disabled):hover,
.secondary-button:not(:disabled):focus{
  cursor: pointer;
  border: 0;
  color: var(--clr-neutral-100);
  background-color: var(--clr-accent-300);
}

/* FOOTER */
.full-line{
  border: 1px solid white;
}
img.footer-logo{
  max-width: 10rem;
}

@media (max-width: 50em) {
  img.footer-logo{
    max-width: 11rem;
  }
  .futuristic-button{
    height: 2rem;
    font-size: 0.75rem;  
  }
  .fb-big{
    height: 3.52969rem;
    font-size: 1.25rem;
  }
  .secondary-button{
    font-style: normal;
    font-size: 0.9rem;
    letter-spacing: 0.075rem;
    font-weight: 600;
    border: 0;
    height: 2.5rem;
    color: var(--clr-neutral-100);
    background-color: var(--clr-accent-400);
  }
}

/* Utility classes */
  
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

.container {
  --max-width: 936px;
  --container-padding: 1rem;

  width: min(var(--max-width), 100% - (var(--container-padding) * 2));
  margin-inline: auto;
}

.border {
  border: 2px solid black;
}

.display-flex{
  display: flex;
  flex-direction: column;
}

.even-columns {
  display: grid;
  gap: 1rem;
}

.grid-2-2{
  grid-template-columns: 0.5fr 0.5fr;
  grid-row: auto auto;
  grid-column-gap: 0.25rem;
  grid-row-gap: 1rem;
  gap: 1rem;
  font-size: 0.85rem
}

@media (max-width: 50em) {
  .grid-2-2 > .grid-span-2-sm-only{
    grid-column: span 2;
  } 
}


@media (min-width: 50em) {
  .even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .grid-2-2{
    grid-template-columns: 1fr;
    font-size: 1rem;
    gap: 2rem;
  }
}

.vertical-align-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.justify-self-end {
  justify-self: end;
}

@media (min-width: 50em) {
  .justify-self-end-md {
    justify-self: end;
  }
}

:where(.flow :not(:first-child)) {
  margin-top: var(--flow-spacer, 3em);
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-center p {
  margin-inline: auto;
}

@media (max-width: 50em) {

  .text-center-sm-only {
    text-align: center;
  }

  .text-center-sm-only p {
    margin-inline: auto;
  }
}

.text-primary-400 {
  color: var(--clr-primary-400);
}
.text-accent-400 {
  color: var(--clr-accent-400);
}
.text-accent-100 {
  color: var(--clr-accent-100);
}
.text-neutral-100 {
  color: var(--clr-neutral-100);
}
.text-neutral-900 {
  color: var(--clr-neutral-900);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
}
.bg-accent-400 {
  background-color: var(--clr-accent-400);
}
.bg-accent-100 {
  background-color: var(--clr-accent-100);
}
.bg-neutral-100 {
  background-color: var(--clr-neutral-100);
}
.bg-neutral-900 {
  background-color: var(--clr-neutral-900);
}

.fw-bold {
  font-weight: var(--fw-bold);
}
.fw-semi-bold {
  font-weight: var(--fw-semi-bold);
}
.fw-regular {
  font-weight: var(--fw-regular);
}

.fs-primary-heading {
  font-size: var(--fs-primary-heading);
  line-height: 1.1;
}
.fs-secondary-heading {
  font-size: var(--fs-secondary-heading);
  line-height: 1.1;
}

.fs-200 {
  font-size: var(--fs-200);
}
.fs-300 {
  font-size: var(--fs-300);
}
.fs-400 {
  font-size: var(--fs-400);
}
.fs-500 {
  font-size: var(--fs-500);
}
.fs-600 {
  font-size: var(--fs-600);
}
.fs-700 {
  font-size: var(--fs-700);
}

.padding-block-900 {
  padding-block: var(--size-900);
}
.padding-block-700 {
  padding-block: var(--size-700);
}
.padding-block-500 {
  padding-block: var(--size-500);
}
.padding-block-400 {
  padding-block: var(--size-400);
}

.margin-bottom-700 {
  margin-block-end: var(--size-700);
}

.display-sm-none {
  display: none;
}

@media (max-width: 50em) {
  .fs-200 {
    font-size: calc(var(--fs-200) - 0.25rem);
  }
  .fs-300 {
    font-size: calc(var(--fs-300) - 0.25rem);
  }
  .fs-400 {
    font-size: calc(var(--fs-400) - 0.25rem);
  }
  .fs-500 {
    font-size: calc(var(--fs-500) - 0.25rem);
  }
  .fs-600 {
    font-size: calc(var(--fs-600) - 0.25rem);
  }
  .fs-700 {
    font-size: calc(var(--fs-700) - 0.25rem);
  }
}

@media (min-width: 50em) {
  .display-md-inline-flex {
    display: inline-flex;
  }
}