/* Import */
@import 'normalize.css';
@font-face {
  font-display: swap;
  font-family: "Nimbus";
  font-style: normal;
  font-weight: 400;
  src: url("../font/NimbusSanL-Reg.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Nimbus";
  font-style: normal;
  font-weight: 700;
  src: url("../font/NimbusSanL-Bol.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Nimbus";
  font-style: italic;
  font-weight: 700;
  src: url("../font/NimbusSanL-BolIta.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SouthPacific";
  font-style: normal;
  font-weight: 400;
  src: url("../font/SouthPacific.woff2") format("woff2");
}
/* global */
*,
*:after,
*:before {
  outline-offset: 5px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  height: 100%;
}

html,
body {
  background-color: white;
  font-size: 100%;
  min-width: 320px;
}

body {
  align-items: center;
  color: black;
  display: flex;
  flex-wrap: wrap;
  font-family: "Nimbus", Helvetica, Arial, sans-serif;
  font-weight: 400;
  justify-content: center;
  min-height: 100%;
  padding: 120px 30px;
  position: relative;
}
@media screen and (min-width: 770px) {
  body {
    padding: 160px 60px;
  }
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Nimbus", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-hyphens: auto;
          hyphens: auto;
  margin: 0 0 30px;
}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
  margin-bottom: 0;
}

h1, .h1 {
  font-family: "SouthPacific", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 50px;
  font-size: 3.125rem;
}
@media screen and (min-width: 570px) {
  h1, .h1 {
    font-size: 90px;
    font-size: 5.625rem;
  }
}
@media screen and (min-width: 1020px) {
  h1, .h1 {
    font-size: 120px;
    font-size: 7.5rem;
  }
}

h2, .h2 {
  font-size: 40px;
  font-size: 2.5rem;
}
@media screen and (min-width: 570px) {
  h2, .h2 {
    font-size: 70px;
    font-size: 4.375rem;
  }
}
@media screen and (min-width: 1020px) {
  h2, .h2 {
    font-size: 100px;
    font-size: 6.25rem;
  }
}

h3, .h3 {
  font-size: 30px;
  font-size: 1.875rem;
}
@media screen and (min-width: 570px) {
  h3, .h3 {
    font-size: 50px;
    font-size: 3.125rem;
  }
}
@media screen and (min-width: 1020px) {
  h3, .h3 {
    font-size: 80px;
    font-size: 5rem;
  }
}

h4, .h4 {
  margin-bottom: 20px;
  font-size: 25px;
  font-size: 1.5625rem;
}
@media screen and (min-width: 570px) {
  h4, .h4 {
    font-size: 40px;
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 1020px) {
  h4, .h4 {
    font-size: 60px;
    font-size: 3.75rem;
  }
}

h5, .h5 {
  margin-bottom: 20px;
  font-size: 20px;
  font-size: 1.25rem;
}
@media screen and (min-width: 570px) {
  h5, .h5 {
    font-size: 30px;
    font-size: 1.875rem;
  }
}
@media screen and (min-width: 1020px) {
  h5, .h5 {
    font-size: 40px;
    font-size: 2.5rem;
  }
}

h6, .h6 {
  margin-bottom: 20px;
  font-size: 15px;
  font-size: 0.9375rem;
}
@media screen and (min-width: 570px) {
  h6, .h6 {
    font-size: 20px;
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1020px) {
  h6, .h6 {
    font-size: 30px;
    font-size: 1.875rem;
  }
}

a {
  transition: all 0.1s ease 0s;
}
a:focus {
  outline: none;
}

p {
  line-height: 1.5;
  margin: 0 0 20px;
  font-size: 16px;
  font-size: 1rem;
}
p:last-child {
  margin-bottom: 0;
}
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
  margin-top: 40px;
}
p a {
  color: black;
  text-decoration: underline;
}
@media (hover: hover) {
  p a:hover {
    text-decoration: none;
  }
}
p a:active {
  color: #003aff;
}

/*------------------------------------*\
    COMPONENTS
\*------------------------------------*/
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li + li {
  margin-top: 10px;
}
.menu li a {
  color: black;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 16px;
  font-size: 1rem;
}
@media screen and (min-width: 770px) {
  .menu li a {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 1020px) {
  .menu li a {
    font-size: 20px;
    font-size: 1.25rem;
  }
}
@media (hover: hover) {
  .menu li a:hover {
    text-decoration: none;
  }
}
.menu li a:active {
  color: #003aff;
}

.logo {
  height: 33px;
  left: 30px;
  position: absolute;
  top: 30px;
  width: 28px;
}
@media screen and (min-width: 770px) {
  .logo {
    left: 60px;
    top: 60px;
  }
}

.content {
  max-width: 1600px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.content.content--home {
  text-align: center;
}
@media screen and (min-width: 1020px) {
  .content.content--home {
    text-align: right;
  }
}
.content.content--home .content__title {
  -webkit-hyphens: none;
          hyphens: none;
  margin: 0 auto 30px;
  max-width: 750px;
  text-align: center;
}
.content .content__text {
  margin: 0 auto;
  max-width: 1100px;
}
.content .content__name {
  font-weight: 700;
  margin-bottom: 70px;
  font-size: 25px;
  font-size: 1.5625rem;
}
@media screen and (min-width: 770px) {
  .content .content__name {
    margin-bottom: 150px;
    text-align: center;
    font-size: 35px;
    font-size: 2.1875rem;
  }
}
@media screen and (min-width: 1020px) {
  .content .content__name {
    font-size: 45px;
    font-size: 2.8125rem;
  }
}
@media screen and (min-width: 570px) {
  .content .content__title {
    width: 80%;
  }
}
.content .content__link {
  color: #003aff;
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
}
@media screen and (min-width: 1020px) {
  .content .content__link {
    align-items: flex-end;
    flex-direction: row;
    text-align: right;
  }
}
@media screen and (min-width: 1600px) {
  .content .content__link {
    margin-top: -190px;
  }
}
@media (hover: hover) {
  .content .content__link:hover .content__link__label {
    text-decoration: none;
  }
  .content .content__link:hover img {
    transform: rotate(-5deg);
  }
}
.content .content__link:active {
  color: black;
}
.content .content__link .content__link__label {
  font-weight: 700;
  margin-bottom: 20px;
  text-decoration: underline;
  text-underline-offset: 5px;
  font-size: 20px;
  font-size: 1.25rem;
}
@media screen and (min-width: 1020px) {
  .content .content__link .content__link__label {
    margin-right: 30px;
    font-size: 30px;
    font-size: 1.875rem;
  }
}
.content .content__link .content__link__label i {
  font-style: italic;
}
.content .content__link img {
  height: 193px;
  width: 204px;
  transition: all 0.2s ease 0s;
}
@media screen and (min-width: 1020px) {
  .content .content__link img {
    height: 292px;
    width: 310px;
  }
}

.year {
  position: absolute;
  right: 30px;
  top: 30px;
  font-size: 16px;
  font-size: 1rem;
}
@media screen and (min-width: 770px) {
  .year {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 1020px) {
  .year {
    right: 60px;
    top: 60px;
    font-size: 20px;
    font-size: 1.25rem;
  }
}

.navigation {
  bottom: 30px;
  left: 30px;
  position: absolute;
}
@media screen and (min-width: 1020px) {
  .navigation {
    bottom: 60px;
    left: 60px;
  }
}

.contact {
  bottom: 30px;
  position: absolute;
  right: 30px;
  text-align: right;
}
@media screen and (min-width: 1020px) {
  .contact {
    bottom: 60px;
    right: 60px;
  }
}

::-moz-selection {
  background: #003aff;
  color: white;
  text-shadow: none;
}

::selection {
  background: #003aff;
  color: white;
  text-shadow: none;
}

::-webkit-selection {
  background: #003aff;
  color: white;
  text-shadow: none;
}

::-moz-selection {
  background: #003aff;
  color: white;
  text-shadow: none;
}/*# sourceMappingURL=styles.css.map */