@charset "UTF-8";

/* Fonts */
@font-face {
  font-family: "bold";
  src: url("../files/font/HelveticaNowDisplay-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "regular";
  src: url("../files/font/HelveticaNowDisplay-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Base / Reset */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: #000;
  text-decoration: none;
}

/* Typography */
body {
  background-color: #f2fe42;
  font-family: "regular";
  font-size: 21px;
  line-height: 1.1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.name {
  font-family: "bold";
}

/* Layout */
.wrapp {
  position: fixed;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
}

.head {
  line-height: 0;
}

li span {
  display: inline-block;
  width: 1.5em;
}

li:nth-child(2),
li:nth-child(4) {
  margin-bottom: 1em;
}

.logo {
  position: fixed;
  left: 65px;
  bottom: 65px;
  width: 8%;
}

/* Media Queries */
@media (max-width: 1300px) {
  body {
    font-size: 30px;
  }
}

@media (max-width: 1000px) {
  .head img {
    width: 100%;
  }

  .logo {
    left: 45px;
    bottom: 45px;
    width: 15%;
  }

  body {
    font-size: 50px;
  }

  li:nth-child(2),
  li:nth-child(4) {
    margin-bottom: 0.6em;
  }
}

/*
@media (max-width: 800px) {
  body {
    font-size: 40px;
  }
}*/

@media (max-width: 800px) {
  li span {
    display: none;
  }
  .name {
    font-size: 6.2vw;
  }
  body {
    font-size: 5.5vw;
  }
}