@font-face {
    font-family: 'bignoodle';
    src: url(../font/big_noodle_titling.ttf);
}

@font-face {
    font-family: 'Roboto';
    src: url(../font/Roboto-Regular.ttf);
}

@font-face {
    font-family: 'Robotolit';
    src: url(../font/Roboto-LightItalic.ttf);
}

@font-face {
    font-family: 'Robotoboldit';
    src: url(../font/Roboto-BoldItalic.ttf);
}

body {
    margin: 0 auto;
    overflow-y: hidden; 
}

section.top-page {
    background: url("../img/background.png");
    background-size: cover;
}

section.map {
    background: url("../img/background2.png");
    background-size: cover;
}

header {
    display: flex;
    align-items: center;
    padding: 20px;
}

header img {
    width: 180px;
}

nav.index {
    display: flex;
    list-style: none;
    margin-left: 30px;
    width: 85%;
    justify-content: flex-end;
    font-family: 'Robotoboldit';

}

div.player {
    background-color: #e4b58d;
    border: none;
    color: #101a26;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin-left: 40px;
    border-radius: 4px;
}

div.ip {
    background-color: #8d87b5;
    border: none;
    transition: all .3s ease;
    color: #87dfe0;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin-left: 40px;
    border-radius: 4px;
    cursor: pointer;
}

div.ip:hover {
    background-color: #7f79a1; 
    color: #82c8c9;
}

.title {
    color: green;
    font-size: 95px;
    padding: 65px;
    font-family: 'bignoodle';
    font-weight: 300;
    text-shadow: #ffffff 3px 3px;
}

.scroll-down {
    color: white;
    font-size: 17px;
    font-family: 'bignoodle';
    text-decoration: none;
    display: block;
    text-align: center;
    margin-top: 11%;
}

section.map {
    background-color: #f7d1ab;
    align-items: center;
}

section.map img {
    width: 600px;
    padding: 60px;
    border-radius: 80px;
}

section.map h1 {
    text-align: center;
    font-family: 'Robotolit';
    font-size: 45px;
}

.btnmap {
    background-color: #101a26;
    border: none;
    transition: all .3s ease;
    font-family: 'Roboto';
    color: #ffffff;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin-left: 40px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 30px;
    text-decoration: none;
}

.btnmap:hover {
    background-color: #28405e;
}

.abtnmap {
    text-decoration: none;
}

.abtnmap:visited {
    color: white;
}

nav.scroll {
    position: fixed;
    top: 50%;
    right: 1%;
  }

  nav a {
    width: 3px;
    height: 40px;
    display: block;
    background: seashell;
    background-clip: content-box;
    padding: 0 7px;
    border-radius: 45%;
    margin: 10px 20px;
    cursor: pointer;

  }

  section {
    height: 100vh;
  }  

  .vivid:nth-child(odd) {
    background-color: #D67C2F;
  }
  
  .vivid:nth-child(even) {
    background-color: #688392
    ;
  }
  
  .line-before:before {
    content: "";
    height: 20px;
    width: 0;
    background-color: #50E3C2;
    display: block;
    margin-bottom: 40px;
    transition: 1s cubic-bezier(0.19, 1, 0.22, 1) width;
    transition-delay: .6s;
  }

  .text-mask span {
    display: block;
  }
  .text-mask > span {
    display: block;
    position: relative;
    overflow: hidden;
  }
  .text-mask > span:nth-child(1) {
    transition-delay: .7s;
  }
  .text-mask > span:nth-child(2) {
    transition-delay: .8s;
  }
  .text-mask > span:nth-child(3) {
    transition-delay: .9s;
  }

  .text-mask > span > span {
    transition: 1s cubic-bezier(0.19, 1, 0.22, 1) transform;
    transform: translateY(100%);
  }

  body.loaded .text-mask > span > span {
    transform: translateY(0);
    transition-delay: inherit;
  }
  body.loaded .text-reveal > span:nth-child(2) > span,
  body.loaded .text-reveal > span:nth-child(2) > span > span {
    transform: translateX(0);
  }
  
  .flexbox-container {
      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
  }

  .flexbox-container > div {
      flex: 1 35%;
  }

  .flexbox-container > div:nth-of-type(2) {
    flex: 2 75%;

}

.flexbox-container > div:first-child {
    padding-left: 40px;
}

.maptxt {
    background-color: #A1BCC3;
    border-radius: 10px;
    margin: 5%;
}