/**
 * Set up a decent box model on the root element
 */
html {
  box-sizing: border-box;
}

/**
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*::before,
*::after {
  box-sizing: inherit;
}

@font-face {
  font-family: "ITC Avant Garde Gothic Std Medium";
  font-style: normal;
  font-weight: normal;
  src: local("ITC Avant Garde Gothic Std Medium"),
    url("../ITCAvantGardeStdMd.woff") format("woff");
}

@font-face {
  font-family: "ITC Avant Garde Gothic Std Book";
  font-style: normal;
  font-weight: normal;
  src: local("ITC Avant Garde Gothic Std Book"),
    url("../ITCAvantGardeStdBk.woff") format("woff");
}

@font-face {
  font-family: "ITC Avant Garde Gothic Std Bold";
  font-style: normal;
  font-weight: normal;
  src: local("ITC Avant Garde Gothic Std Bold"),
    url("../ITCAvantGardeStdBold.woff") format("woff");
}

/**
 * Basic styles for links
 */
a {
  text-decoration: none;
}

.icon {
  font-size: 1.25rem;
  color: #fff;
}

.icon:hover {
  color: #133346;
}

body {
  background-image: linear-gradient(to bottom right, #59a2c0, #a4c9d1);
  height: 100vh;
}

.main-nav {
  margin-top: 2vh;
}

.impact-notice {
  background-color: transparent;
  color: #fff;
  border: 0;
  text-align: center;
}

.impact-notice h2 {
  font-family: "ITC Avant Garde Gothic Std Bold";
  color: #133346;
  font-size: clamp(16px, 5vw, 3.875rem);
}

.impact-notice h1 {
  font-family: "ITC Avant Garde Gothic Std Bold";
  font-size: clamp(32px, 10vw, 5.8125rem);
}

#logo-text {
  font-family: "ITC Avant Garde Gothic Std Book";
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.0625rem);
}

#inquiries-text {
  font-family: "ITC Avant Garde Gothic Std Medium";
  color: #fff;
  font-size: clamp(1rem, 3vw, 1.25rem);
}

#contact-btn {
  font-family: "ITC Avant Garde Gothic Std Medium";
  color: #fff;
  background-color: rgba(255, 255, 255, 0.164);
  font-size: clamp(1rem, 3vw, 1.25rem);
}

#contact-btn:hover {
  background-color: #133346;
}

.logo {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 10000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 10000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 10000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 10000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}