@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,600;1,700&display=swap');
body{
  font-family: 'Josefin Sans';
  background-image: linear-gradient(45deg, rgba(20,20,20) 42%, rgba(56,21,18) 100%);
  font-weight: 300;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/*----------scrollbar----------*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #272727;
}
::-webkit-scrollbar-thumb {
  background: rgb(179, 23, 23);
}
::-webkit-scrollbar-corner{
  background: #183159;
}

/*----------logo----------*/
.img{
  position: absolute;
  top: 2%;
  right: 30%;
  width: auto;
  height: auto;
  max-width: 40%;
}

/*----------footer----------*/
.footer{
  position: fixed;
  right: 5%;
  bottom: 2%;
  width: 90%;
  background-image: linear-gradient(45deg, rgba(20,20,20) 42%, rgba(56,21,18) 100%);
  height: 25%;
  border-radius: 20px;
  border: 1px solid white;
}
.liberaj, .warsztat{
  color: white;
  font-size: medium;
  text-align: center;
  margin: 0.5%;
  float: left;
}
.liberaj{
  position: absolute;
  right: 12%;
}
.warsztat{
  position: absolute;
  right: 11%;
  top: 50%;
}
.linkDM{
  text-decoration: none;
  color: rgb(179, 23, 23);;
  transition: 0.1s;
  font-weight: 700;
}
.linkDM:hover{
  color:rgb(226, 11, 11);
}


/*----------oferta & info & galeria----------*/
/*right*/
.right{
  top: 10%;
  border: 1px solid white;
  border-radius: 20px;
  height: 5vh;
  width: 32%;
  position: absolute;
  right: 0.5%;
  transition: 0.3s;
}
/*middle*/
.middle{
  top: 10%;
  border: 1px solid white;
  border-radius: 20px;
  height: 5vh;
  width: 32%;
  position: absolute;
  left: 34%;
  transition: 0.3s;
}
.closeM{
  border: 1px solid white;
  border-radius: 20px;
  width: 30%;
  height: 3vh;
  margin-left: 35%;
  margin-top: 2%;
}
/*left*/
.left{
  top: 10%;
  border: 1px solid white;
  border-radius: 20px;
  height: 5vh;
  width: 32%;
  position: absolute;
  left: 0.5%;
  transition: 0.3s;
}
.closeL{
  border: 1px solid white;
  border-radius: 20px;
  width: 30%;
  height: 3vh;
  margin-left: 35%;
  margin-top: 2%;
}
/*buttons and stuff*/
.BT{
  text-decoration: none;
}
.br{
  display: block;
  margin-bottom: 0.3em;
}
.text1, .text2{
  color: white;
  font-size: x-large;
  width: 100%;
  height: 5vh;
  text-align: center;
  margin-top: 0%;
  transition: 0.3s;
}
.text1:hover, .text2:hover{
  font-weight: 700;
}
.text2{
  margin-top: 1%;
}
/*text*/
.text5{
  color: white;
  font-size: x-large;
  text-align: center;
}
.highlight1{
  font-weight: 700;
  margin-bottom: 0;
  font-size: larger;
}
.ale{
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 3px;
}
.date{
  color: rgb(179, 23, 23);
  font-weight: 700;
  font-size: larger;
  margin-bottom: 0;
}

/*----------msk----------*/
.msk{
  width: auto;
  height: auto;
  position: absolute;
  left: 10%;
  top: 40%;
}
.text3{
  color: white;
  font-size: x-large;
  font-weight: 400;
}
.text4{
  margin-top: 5px;
  font-size: xx-large;
  color: white;
}
.obsTacho{
  width: auto;
  height: auto;
  max-height: 15vh;
  margin-left: 15%;

}

/*----------pic----------*/
.photo{
  width: 40%;
  position: absolute;
  top: 15%;
}
.pic{
  width: auto;
  height: auto;
  max-height: 25vh;
  rotate: -2deg;
  margin-left: 15%;
}

/*----------remind----------*/
.remind{
  position: absolute;
  color: white;
  font-size: 30px;
  width: 90%;
  text-align: center;
  margin-left: 2.5%;
  bottom: -45%;
}

/*----------other----------*/
.mobile{
    height: 160vh;
}