* {
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
  font-weight: bold;
}
body {
  min-height: 100vh;
  background-color: #f6cd86;
}

.navy {
  width: 101%;
  position: relative;
  background: url("./images/compass.png") no-repeat, url("./images/logo-trasure-map.png") no-repeat,
    url("./images/treasure-map-navy.png") no-repeat;
  background-size:10% 15%, 19% 12%, 100% 100%, 15% 20%;
  background-position:80% 85%, 15% 13%, center, 75% 70%;
}
.navy div {
  position: absolute;
  font-size: 1.3rem;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
  text-decoration: none;
  color: #713700;
}
a {
  text-decoration: none;
  color: #616161;
}
.navy i {
  font-size: 3rem;
}
.visited {
  color: #f1951d !important;
}
.logo {
  position: fixed;
  width: 18rem;
  padding-top: 3rem;
  padding-left: 2rem;
}
.logo img {
  width: 100%;
}

main {
  min-height: 100vh;
  position: relative;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  overflow: hidden;
}

section {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  padding: 0 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  background: url("./images/logo-trasure-map.png") no-repeat,
    url("./images/treasure-map.png") no-repeat;
  background-size: 19% 12%, 100% 100%;
  background-position: 15% 13%, center;
}

.active-sec {
  animation: show-sec 0.5s linear forwards;
}
@keyframes show-sec {
  to {
    opacity: 1;
  }
}
section h2 {
  margin-bottom: 3rem;
  padding: 1rem;
  text-align: center;
  font-family: "Alumni Sans SC", sans-serif;
  font-weight: bold;
  color: #713700;
}
section p {
  font-size: 1.1rem;
  color: #4d4d4d;
}
.benefits {
  align-items: flex-start;
}
.benefits h2 {
  margin: 3rem auto;
}
.benefits p {
  margin-bottom: 3rem;
}
.contact div {
  scale: 1.5;
}
.contact span {
  font-size: 2.5rem;
  color: #ff9800;
}

.live-demos .row {
  translate: 0 3rem;
}
.live-demos .game {
  font-weight: bold;
  cursor: pointer;
}
.live-demos .game img {
  width: 75%;
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

button {
  padding: 0.4rem 2rem !important;
  border: none;
  outline: none;
  padding: 0.5rem 0;
  font-weight: bold;
  background-color: #713700;
  border-radius: 10px;
}
button a {
  color: #f3d194;
  text-decoration: none;
  text-align: center;
}
button a:hover {
  color: #fccb71;
}
.game-image {
  border-radius: 10px;
}
.description {
  font-size: 1.2rem;
}
strong {
  color: #000;
}
.how-it-works {
  p {
    margin-bottom: 3rem;
  }
}

.concept-nav {
  top: 67%;
  left: 15%;
}
.benefits-nav {
  top: 41%;
  left: 13%;
}
.live-demos-nav {
  top: 32%;
  left: 32%;
}
.how-it-works-nav {
  top: 56%;
  left: 37%;
}
.products-test-nav {
  top: 30%;
  left: 56%;
}
.contact-nav {
  top: 59%;
  left: 69%;
}
.back-to-map {
  top: 88%;
  left: 73%;
  color: #713700;
  cursor: pointer;
}