@font-face {
  font-family: 'shadow';
  src: url('../fonts/Shadow_regular.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'inter';
  src: url('../fonts/Inter-Regular.otf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'interLight';
  src: url('../fonts/Inter-Light.otf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'interBold';
  src: url('../fonts/Inter-Bold.otf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

body {
  background: url("../img/bg.jpg") no-repeat center top;
  background-color: #ABBB9D;


  background-size: contain;
  position: relative;
}

.dekor1 {
  position: absolute;
  right: 0;
  top:20%;
  width: 15%;
  display: flex;
  justify-content: end;
}

.dekor2 {
  position: absolute;
  left: 0;
  top:10%;
  width: 15%;
}



.password {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-60%, -50%);
}

.password p {
  font-family: shadow;
  color: white;
  font-size: 35px;
}

.dekor3 {
  position: absolute;
  left: 10%;
  bottom:-300px;
  width: 20%;
}

.dekor4 {
  position: absolute;
  right: 15%;
  bottom:-300px;
  width: 20%;
}

.dekor5 {
  position: absolute;
  top: -300px;
  left: 200px;
  z-index: 1;
}

.dekor6 {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -20%);
}

.plashka {
  background: url("../img/plashka.png") no-repeat center;
  position: relative;
  z-index: 2;
  height: 600px;
}

.inputBlock {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputBlock input {
  width: 84px;
  height: 84px;
  margin: 5px;
  border-radius: 5px;
  border: 1px solid white;
  background-color: rgba(118,118,132, 0.5);
  color: white;
  font-family: shadow;
  font-size: 70px;
  text-align: center;
}

p {
  font-family: 'inter', sans-serif;
}


h1 {
  font-family: 'shadow';
  text-transform: uppercase;
  color: #767684;
  font-size: 48px;
}

h2 {
  font-family: 'shadow';
  text-transform: uppercase;
  color: #9DBBB8;
  font-size: 38px;
  text-align: left;
  margin: 0;

}

h3 {
  font-family: 'inter';
  font-size: 24px;
  color: #767684;
  text-align: left;
  margin-bottom: 30px;

}

img {
  max-width: 100%;
}

section {
 padding-top:300px;
  text-align: center;
}

section p {
  color: #767684;
  font-size: 19px;
  line-height: 25px;
  text-align: left;
  font-family: "interLight";
}

section p span {
  color:#DC6A65;
}

.infoBlock {
  margin-top:50px
}

.infoBlock p {
  font-weight: 600;
}

button {
  background: linear-gradient(90deg, rgba(220, 106, 101, 1) 0%, rgba(255, 174, 170, 1) 32%, rgba(234, 128, 123, 1) 43%, rgba(216, 130, 126, 1) 100%);
  color: white;
  font-family: shadow;
  font-size: 34px;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 20px 50px 10px;
  margin-top:50px
}

.booksBlock {
  display: flex;
  align-items: center;
  justify-content: end;
}

.bigImg {
  width: 85%;
}

.booksBlockMin {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 14px;
  bottom: 10%;
}

.booksBlockMin img {

  margin-bottom: 10px;
}

.item img {
  border-radius: 10px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  -moz-appearance:textfield; /* Firefox */
}

@media screen and (max-width: 768px) {

  body {
    background: url(../img/bg_mob.png) no-repeat center;
    background-color: #ABBB9D;
    background-size: contain;

  }

  section {
    padding-top: 150px;
  }

  .password p {
    font-size: 18px;
    text-align: center;
    margin: 0;
  }

  .inputBlock input {
    width: 40px;
    height: 40px;
  }

  .plashka {
    width: 100%;
    height: 300px;
    background-size: contain;
  }

  .password {
    width: 100%;
    transform: translate(-53%, -50%);
  }

  .dekor1 {
    top: 5%;
    width: 25%;
  }

  .dekor3 {
    display: none;
  }

  .dekor4 {
    width: 50%;
  }

  .dekor6 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90%);
  }

  .dekor2 {
    width: 20% ;
    top:10%
  }

  .inputBlock input {
    font-size: 30px;
  }


}



@media screen and (max-width: 550px) {

  body {
    
  }

  section {
    padding-top: 250px;
    margin-bottom: 200px;
  }
.dekor6 {
  width: 70%;
  transform: translate(-40%, -110%);
}

  .plashka {
    width: 100%;
  }

  .dekor4 {
    width: 40%;
    bottom: 0px;
  }



}

@media screen and (max-width: 1200px) and (min-width: 768px) {
  section {
    padding-top: 300px;
  }

  .dekor5 {
    top:-150px
  }
}

@media screen and (max-width: 1250px) and (min-width: 551px) {

  .password p {
    font-size: 30px;
  }

  .dekor4 {
    width: 30%;
  }

  .dekor5 {
    top: -250px;
    left: 150px;
  }


}