@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body {
  background-color: black;
  padding-right: 0 !important;
  color: #D9EAFC;
  font-size: 21px;
  font-weight: 500;
}


::-webkit-scrollbar { /* chrome based */
  width: 3px;  /* ширина scrollbar'a */
  background: black;
}

::-webkit-scrollbar-thumb {
  background: #3167DF; 
}

::-webkit-input-placeholder {color:#636366; opacity:1;}/* webkit */
  ::-moz-placeholder          {color:#636366; opacity:1;}/* Firefox 19+ */
  :-moz-placeholder           {color:#636366; opacity:1;}/* Firefox 18- */
  :-ms-input-placeholder      {color:#636366; opacity:1;}/* IE */


a, a:hover, path, input, button, p, div, span, body, img {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

nav {
  position: fixed;
  width: 100%;
  z-index: 900; 
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  height: 52px;
  margin: 0px;
}

nav a {
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
align-items: center;
  color: #95A0B3;
  padding: 16px 9px;
}

nav a:hover {
  color: #D9EAFC;
  text-decoration: underline;
}

.bg {
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 855px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 99.99%), url(/img/first_bg.png);
  mix-blend-mode: normal;
} 

.bg2 {
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 1152px;
  opacity: 0.24;
  z-index: -1;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 52.08%, #000000 100%), url(/img/second_bg.png);
}

.joy {
position: absolute;
width: 350px;
height: 317px;
left: 300px;
top: 430px;
display: block;
background: url(/img/joy.gif);
mix-blend-mode: screen;
}

main {
  text-align: center;
}

main h1 {
  margin-top: 344px;
  color: #D9EAFC;
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 18px;
}

main p {
  color: #D9EAFC;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 30px;
}

main a {
  color: #D9EAFC;
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  padding: 18px 36px;
  background: linear-gradient(93.07deg, #3DB3EA 0%, #4E4AF3 100%);
border: 1px solid rgba(217, 234, 252, 0.12);
box-sizing: border-box;
box-shadow: 0px 0px 48px rgba(82, 81, 255, 0.5);
border-radius: 6px;
margin-bottom: 165px;
}

main a:hover {
  text-decoration: none;
  transform: scale(0.96);
  color: #D9EAFC;
  box-shadow: 0px 0px 24px rgba(82, 81, 255, 1);
}

.games {
  padding-bottom: 72px;
}

.game {
  font-size: 17px;
  font-weight: 700;
}

.game .poloska {
  background: #D9EAFC;
  opacity: 0.03;
  width: 100%;
  border-radius: 100%;
  height: 1px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.game img {
border: 1px solid rgba(217, 234, 252, 0.12);
box-sizing: border-box;
border-radius: 12px;
display: inline-block;
margin-bottom: 18px;
width: 88px;
}

.game:hover img {
  transform: scale(1.04);
}

.game p {
  font-size: 15px;
  color: #D9EAFC;
  opacity: 0.72;
  font-weight: 300;
  margin-top: 6px;
  margin-bottom: 18px;
}

.game .game_dl {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  background: linear-gradient(93.07deg, rgba(54, 66, 106, 0.06) 0%, rgba(30, 36, 52, 0.06) 100%);
border: 1px solid #3DB3EA;
box-sizing: border-box;
box-shadow: 0px 0px 48px rgba(82, 81, 255, 0.24);
border-radius: 6px;
color: #D9EAFC;
}

.game .game_dl:hover {
  text-decoration: none;
  transform: scale(0.98);
   background: linear-gradient(93.07deg, #3DB3EA 0%, #4E4AF3 100%);
  box-shadow: 0px 0px 24px rgba(82, 81, 255, 0.48);
}

.game .more_info {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  padding: 9px 18px;
  color: #D9EAFC;
  opacity: 0.72;
}

.game .more_info:hover {
  opacity: 1;
}

.info {
  padding-bottom: 144px;
}

.info img {
  margin-bottom: 36px;
}

.info a {
  color: #D9EAFC;
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  padding: 18px 36px;
  background: linear-gradient(93.07deg, #3DB3EA 0%, #4E4AF3 100%);
border: 1px solid rgba(217, 234, 252, 0.12);
box-sizing: border-box;
box-shadow: 0px 0px 48px rgba(82, 81, 255, 0.5);
border-radius: 6px;
float: right;
}


.info a:hover {
  text-decoration: none;
  transform: scale(0.96);
  color: #D9EAFC;
  box-shadow: 0px 0px 24px rgba(82, 81, 255, 1);
}

.info h2 {
  font-size: 42px;
  margin-bottom: 24px;
}

.info p {
  font-size: 15px;
  font-weight: 300;
  opacity: 0.72;
  margin-bottom: 36px;
}

.info img {
  width: 100%;
}

footer {
  padding-bottom: 52px;
  width: 100%;
  z-index: 900; 
}

footer a {
font-style: normal;
font-weight: 400;
font-size: 13px;
color: #95A0B3;
padding: 16px 9px;
}

footer a:hover {
  color: #D9EAFC;
  text-decoration: underline;
}