body{background-color: #b8dff5;}
* {margin: 0;padding: 0;color:#181c1b;}
img{border:0}
*, *::before, *::after {box-sizing: border-box;}

#top{width: 100%;height:840px;background: url(../images/main-background.webp) no-repeat right top;}
#top h1{font-weight: 900;font-family: Arial, Helvetica, sans-serif;font-size: 57px;padding: 6% 0 0 0;}
#top p{padding: 3% 57% 1% 0;font-family: tahoma, Helvetica, sans-serif;font-size: 19px;}
#top a{padding: 10px;margin: 3% 0% 0% 0%;border: 0;background-color: #181c1b;border-radius: 10px;cursor: pointer;display: block;width: 250px;text-decoration: none;}
#top a:hover{background-color: #262b29;}
#top b{color: #fff;font-family: tahoma, Helvetica, sans-serif;font-size: 15px;}
#main {height: 100%;position: relative;z-index: 1;padding-left: 8%;}
#main::before {content: "";position: absolute;top: 0; left: 0;width: 100%;height: 100%;background: url(../images/gradient.png) no-repeat left top;opacity: 1;z-index: -1;}

#center{position: fixed;bottom: 200px;left: 0;width: 100%;padding: 2% 0;background-color: #fff;display: flex;justify-content: center;z-index: 1;}
#center div{position: relative;float: left;height: 100%;text-align: center;align-content: center;font: 500 12px tahoma, Helvetica, sans-serif;}
#center div h2{font: 700 23px tahoma, Helvetica, sans-serif;}
#center div p{margin-top: 6px;width: 100%;}
#center a{width: 14%;margin: 0 1% 0 1%;display: flex;justify-content: center;text-decoration: none;}

#bottom{position: fixed;bottom: 0;left: 0;width: 100%;height:200px;z-index: 1;}

.modal, .auth-modal {display: none;position: fixed;z-index: 999;left: 0;top: 0;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.7);align-items: center;justify-content: center;}
.modal-content {background-color: #fff;padding: 30px 20px;border-radius: 10px;width: 300px;text-align: center;box-shadow: 0 5px 20px rgba(0,0,0,0.2);}
.language-option {font-weight: bold;margin: 12px 0;cursor: pointer;font-size: 18px;transition: 0.2s;}
.language-option:hover {color: #007bff;}
.auth-modal a{text-decoration: none;font-size: 15px;font-family: tahoma, Helvetica, sans-serif;}
.auth-modal a:hover{text-decoration: underline;}

.auth-modal__content {background-color: #fff;padding: 30px 25px;border-radius: 10px;width: 320px;text-align: center;box-shadow: 0 5px 20px rgba(0,0,0,0.2);}
.auth-modal__content h3 {margin-bottom: 20px;font-family: tahoma, Helvetica, sans-serif;}
.auth-modal__input {width: 100%;padding: 10px;margin: -3px 0 10px;border: 1px solid #ccc;border-radius: 4px;font-size: 16px;}

.auth-modal__submit {margin-top: 6px;padding: 10px 20px;font-size: 16px;cursor: pointer;background-color: #181c1b;color: white;border: none;border-radius: 10px;font-family: tahoma, Helvetica, sans-serif;}
.auth-modal__submit:hover {background-color: #262b29;}
.reg-message{font-weight: 700;}

#lang{position: absolute;top: 10px;right: 10px;z-index: 2;}

@media (min-width: 821px) and (max-width: 1200px) {
  #center div h2{font-size: 1.5em;}
  #center div p{font-size: 0.95em;}
  #top p {padding: 3% 41% 1% 0;}
  #main::before {opacity: 0.9;}
}

@media (min-width: 481px) and (max-width: 820px) {
  #center div h2{font-size: 1.1em;}
  #center div p{font-size: 0.9em;}
  #main::before {opacity: 0.9;}
  #top p {padding: 3% 20% 2% 0;}
  #top h1 {padding: 10% 0 0 0;}
}

@media (min-width: 360px) and (max-width: 480px) {
  #top {height: 100%;}
  #center{position: revert;flex-wrap: wrap;}
  #center div h2{font-size: 2em;}
  #center div p{font-size: 1em;}
  #main{padding: 4%;text-align: center;}
  #main::before {opacity: 0.9;}
  #top h1 {font-size: 50px;padding: 10% 0 6% 0;}
  #top p {padding: 0% 0% 10% 0%;font-size: 17px;}
  #top b {font-size: 14px;display: block; text-align: center; margin: auto 0;}
  #top button {padding: 2% 5%;font-size: 25px; display: block; margin: 18% auto 10px;}
  #center a {width: 80%; padding: 5%;border-bottom: 1px dashed #b8dff5;}
  #center a:last-child {border-bottom: none;}
  #bottom{position: revert;}
  #lang img{width: 85%;}
}

@media (max-width: 360px) {
  #top {height: 100%;}
  #center{position: revert;flex-wrap: wrap;}
  #center div h2{font-size: 1.7em;}
  #center div p{font-size: 1em;}
  #main{padding: 4%;text-align: center;}
  #main::before {opacity: 0.9;}
  #top h1 {font-size: 39px;padding: 10% 0 6% 0;}
  #top p {padding: 5% 0% 10% 0%;font-size: 17px;}
  #top b {font-size: 14px;display: block; text-align: center; margin: auto 0;}
  #top button {padding: 2% 5%;font-size: 21px; display: block; margin: 10px auto 10px;}
  #center a {width: 80%; padding: 5%;border-bottom: 1px dashed #b8dff5;}
  #center a:last-child {border-bottom: none;}
  #bottom{position: revert;}
  #lang img{width: 80%;}
}