/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

html {
  font-size: 1.4vw;
}

body {
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  color: #1124BA;
  font-size: 1rem;
  line-height: 1.1rem;
  text-align: center;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

a {
  color: #1124BA;
  text-decoration: none;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}


.dm-serif-display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}


.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.uppercase {
  text-transform: uppercase;
}


.font-size-big {
  font-size: 4rem;
  line-height: 4rem;
}

.intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  transition: .4s all ease;
}

.top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 60%;
  width: 100%;
}

.top .text {
  margin-top: 6.25vw;
  display: inline-block;
  width: 24vw;
  transition: .4s all ease;
}

.mail-opened .top .text {
  margin-top: 3vw;
}

.bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 85vw;
  margin: 0 auto 10vw;
  font-size: 1.2rem;
  line-height: 1.2rem;
  position: relative;
}

.contact {
  position: absolute;
  left: 0;
  right: 0;
  display: table;
  margin: 0 auto;
}

.bottom a {
  transition: .4s ease color;
}

.bottom a:before,
.bottom a:after {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
  content: "(";
  font-size: 4rem;
  position: relative;
  top: 0.55rem;
}

.bottom a:before {
  margin-right: 1rem;
}

.bottom a:after {
  content: ")";
  margin-left: 1rem;
}


.bottom a.inactive {
  color: #867E6D;
}

.mail {
  position: fixed;
  width: 100%;
  height: 36%;
  transform: translate3d(0, 101%, 0);
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .4s all ease;
  border-top: 1px solid #1124BA;
}

.mail-opened .intro {
  height: 64%;
}

.mail-opened .mail {
  transform: translate3d(0, 0, 0);
}


@media screen and (max-width: 960px) {
  html {
    font-size: 5vw;
  }

  .top .text {
    width: 80vw;
    margin-top: 10vw !important;
  }

  .bottom  {
    font-size: 0.64rem;
    line-height: 0.64rem;
  }

  .bottom a:before,
  .bottom a:after {
    content: "(";
    font-size: 1.5rem;
    top: 0.2rem;
  }

  .bottom a:before {
    margin-right: 0.25rem;
  }

  .bottom a:after {
    content: ")";
    margin-left: 0.25rem;
  }

  .mail {
    font-size: 1.5rem;
    height: 20%;
  }

  .mail-opened .intro {
    height: 80%;
  }
}