@font-face {
   font-family: 'Oswald-Demi-BoldItalic';
   font-style: normal;
   font-weight: normal;
   src: url('fonts/Oswald-Demi-BoldItalic.ttf') format('woff2');
}

body {
   margin: 0;
   height: 100vh;
   font-weight: 100;
   background: radial-gradient(#4939a2, #1f1013);
   overflow-y: hidden;
   -webkit-animation: fadeIn 1 1s ease-out;
   -moz-animation: fadeIn 1 1s ease-out;
   -o-animation: fadeIn 1 1s ease-out;
   animation: fadeIn 1 1s ease-out;
   position: relative;
   color: #e9f1f1;
}

.light {
   position: absolute;
   width: 0px;
   opacity: .75;
   background-color: rgb(255, 255, 255);
   box-shadow: #e9f1f1 0px 0px 20px 2px;
   opacity: 0;
   top: 100vh;
   bottom: 0px;
   left: 0px;
   right: 0px;
   margin: auto;
}

.x1 {
   -webkit-animation: floatUp 4s infinite linear;
   -moz-animation: floatUp 4s infinite linear;
   -o-animation: floatUp 4s infinite linear;
   animation: floatUp 4s infinite linear;
   -webkit-transform: scale(1.0);
   -moz-transform: scale(1.0);
   -o-transform: scale(1.0);
   transform: scale(1.0);
}

.x2 {
   -webkit-animation: floatUp 7s infinite linear;
   -moz-animation: floatUp 7s infinite linear;
   -o-animation: floatUp 7s infinite linear;
   animation: floatUp 7s infinite linear;
   -webkit-transform: scale(1.6);
   -moz-transform: scale(1.6);
   -o-transform: scale(1.6);
   transform: scale(1.6);
   left: 15%;
}

.x3 {
   -webkit-animation: floatUp 2.5s infinite linear;
   -moz-animation: floatUp 2.5s infinite linear;
   -o-animation: floatUp 2.5s infinite linear;
   animation: floatUp 2.5s infinite linear;
   -webkit-transform: scale(.5);
   -moz-transform: scale(.5);
   -o-transform: scale(.5);
   transform: scale(.5);
   left: -15%;
}

.x4 {
   -webkit-animation: floatUp 4.5s infinite linear;
   -moz-animation: floatUp 4.5s infinite linear;
   -o-animation: floatUp 4.5s infinite linear;
   animation: floatUp 4.5s infinite linear;
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
   left: -34%;
}

.x5 {
   -webkit-animation: floatUp 8s infinite linear;
   -moz-animation: floatUp 8s infinite linear;
   -o-animation: floatUp 8s infinite linear;
   animation: floatUp 8s infinite linear;
   -webkit-transform: scale(2.2);
   -moz-transform: scale(2.2);
   -o-transform: scale(2.2);
   transform: scale(2.2);
   left: -57%;
}

.x6 {
   -webkit-animation: floatUp 3s infinite linear;
   -moz-animation: floatUp 3s infinite linear;
   -o-animation: floatUp 3s infinite linear;
   animation: floatUp 3s infinite linear;
   -webkit-transform: scale(.8);
   -moz-transform: scale(.8);
   -o-transform: scale(.8);
   transform: scale(.8);
   left: -81%;
}

.x7 {
   -webkit-animation: floatUp 5.3s infinite linear;
   -moz-animation: floatUp 5.3s infinite linear;
   -o-animation: floatUp 5.3s infinite linear;
   animation: floatUp 5.3s infinite linear;
   -webkit-transform: scale(3.2);
   -moz-transform: scale(3.2);
   -o-transform: scale(3.2);
   transform: scale(3.2);
   left: 37%;
}

.x8 {
   -webkit-animation: floatUp 4.7s infinite linear;
   -moz-animation: floatUp 4.7s infinite linear;
   -o-animation: floatUp 4.7s infinite linear;
   animation: floatUp 4.7s infinite linear;
   -webkit-transform: scale(1.7);
   -moz-transform: scale(1.7);
   -o-transform: scale(1.7);
   transform: scale(1.7);
   left: 62%;
}

.x9 {
   -webkit-animation: floatUp 4.1s infinite linear;
   -moz-animation: floatUp 4.1s infinite linear;
   -o-animation: floatUp 4.1s infinite linear;
   animation: floatUp 4.1s infinite linear;
   -webkit-transform: scale(0.9);
   -moz-transform: scale(0.9);
   -o-transform: scale(0.9);
   transform: scale(0.9);
   left: 85%;
}

button:focus {
   outline: none;
}

@-webkit-keyframes floatUp {
   0% {
      top: 100vh;
      opacity: 0;
   }

   25% {
      opacity: 1;
   }

   50% {
      top: 0vh;
      opacity: .8;
   }

   75% {
      opacity: 1;
   }

   100% {
      top: -100vh;
      opacity: 0;
   }
}

@-moz-keyframes floatUp {
   0% {
      top: 100vh;
      opacity: 0;
   }

   25% {
      opacity: 1;
   }

   50% {
      top: 0vh;
      opacity: .8;
   }

   75% {
      opacity: 1;
   }

   100% {
      top: -100vh;
      opacity: 0;
   }
}

@-o-keyframes floatUp {
   0% {
      top: 100vh;
      opacity: 0;
   }

   25% {
      opacity: 1;
   }

   50% {
      top: 0vh;
      opacity: .8;
   }

   75% {
      opacity: 1;
   }

   100% {
      top: -100vh;
      opacity: 0;
   }
}

@keyframes floatUp {
   0% {
      top: 100vh;
      opacity: 0;
   }

   25% {
      opacity: 1;
   }

   50% {
      top: 0vh;
      opacity: .8;
   }

   75% {
      opacity: 1;
   }

   100% {
      top: -100vh;
      opacity: 0;
   }
}

@-webkit-keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@-moz-keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@-o-keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@-webkit-keyframes fadeOut {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   80% {
      opacity: .9;
   }

   100% {
      opacity: 0;
   }
}

@-moz-keyframes fadeOut {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   80% {
      opacity: .9;
   }

   100% {
      opacity: 0;
   }
}

@-o-keyframes fadeOut {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   80% {
      opacity: .9;
   }

   100% {
      opacity: 0;
   }
}

@keyframes fadeOut {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   80% {
      opacity: .9;
   }

   100% {
      opacity: 0;
   }
}

@-webkit-keyframes finalFade {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   80% {
      opacity: .9;
   }

   100% {
      opacity: 1;
   }
}

@-moz-keyframes finalFade {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   80% {
      opacity: .9;
   }

   100% {
      opacity: 1;
   }
}

@-o-keyframes finalFade {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   80% {
      opacity: .9;
   }

   100% {
      opacity: 1;
   }
}

@keyframes finalFade {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   80% {
      opacity: .9;
   }

   100% {
      opacity: 1;
   }
}

#footer {
   font-family: 'Roboto', sans-serif;
   font-size: 1.2em;
   color: white;
   position: fixed;
   -webkit-transform: translate(95vw, 90vh);
   -moz-transform: translate(95vw, 90vh);
   transform: translate(95vw, 90vh);
   transform: translate(95vw, 90vh);
}

.blok {
   position: fixed;
   top: 20%;
   right: 100px;
   left: 100px;
   width: 40%;
   padding: 30px;
   border-radius: 5px;
   margin: 0 auto;
   text-align: center;
   color: #242424;
   background-image: url(../images/fon_meny.png);
   box-shadow: 10px 10px 20px rgb(0, 0, 0);
}

.logo {
   height: 120px;
   filter: drop-shadow(3px 3px 4px rgb(7, 7, 7));
}

.img_block {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   margin-bottom: 10px;
}

.h1_text {
   font-family: 'Oswald-Demi-BoldItalic', Helvetica, Arial;
   font-size: 200%;
   color: rgb(44, 44, 44);
   text-align: center;
   user-select: none;
}

.info_block {
   position: fixed;
   top: 30%;
   right: 35%;
   left: 35%;
   padding: 30px;
   border-radius: 5px;
   margin: 0 auto;
   text-align: center;
   color: #242424;
   background-image: linear-gradient(0deg, rgb(86, 129, 75), rgb(168, 204, 158));
   font-family: 'Oswald-Demi-BoldItalic', Helvetica, Arial;
   font-size: 110%;
   box-shadow: 10px 10px 20px rgb(0, 0, 0);
   transition: 5s;
   animation: Menu_Up 1s linear;
   z-index: 1;
}

@keyframes Menu_Up {
   0% {
      top: 100vh;
   }


   50% {
      top: 28%;
   }

   100% {
      top: 30%;
   }
}

.btn_meny_enter {
   margin: 0px 10px;
   text-align: center;
   font-family: 'Oswald-Demi-BoldItalic', Helvetica, Arial;
   font-size: 100%;
   padding: 5px 30px;
   border-radius: 5px;
   border: 1px solid rgb(24, 24, 24);
   background-color: rgb(100, 81, 190);
   color: rgba(223, 223, 223, 0.705);
   user-select: none;
   transition: 0.1s linear;

}

.btn_meny_enter:hover {
   color: rgb(255, 230, 0);
   background-color: rgb(100, 81, 190);
   box-shadow: 2px 2px 5px rgb(31, 27, 27);
}