@font-face {
   font-family: plague;
    src: url(font/plague.ttf);
}

@font-face {
   font-family: body;
    src: url(font/octas.otf);
}

.bg {
    height:100%; width:auto;
    position: absolute; top: 0; left: 0; width: 100%;
    object-fit: cover;
}

h2 {
           font-family: plague;
    letter-spacing: 2px;
}

p {
  margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: body;
    font-weight: italic;
    font-size: 20px;
}

.main {
    position: absolute;
    top: 30px;
    right: 250px;
    width: 500px;
    height: 550px;
    overflow-y: scroll;
    border: dotted 1.5px #2c2c2c;
    z-index: 1;
    padding: 20px;;
}

.title {
    position: absolute;
    bottom: 120px;
    right: 50px;
    width: 650px;
    transform: rotate(-5deg);
        z-index: 1;
}

.saeism {
    color: white;
    width: 450px;
    background-image: url(!!!4.png);
    border-radius: 50px;
    text-shadow: 1px 1px 40px black;
    padding: 10px;
    border: solid 3px;
    border-color: #FE0089;
     box-shadow: 0px 0px 10px 5px #FE0089;
}

a {
  color: #7b7b7b;
   
}









@media screen and (min-width: 1201px) and (max-width: 1350px) {
    .main {
        width: 450px;
        height: 500px;
        right: 200px;
    }
    .title {
        bottom: 80px;
    }
}

@media screen and (min-width: 1351px) and (max-width: 1450px) {
    .main {
        width: 450px;
        height: 500px;
        
    }
}

@media screen and (min-width: 1700px) and (max-width: 1800px) {
    .main {
        width: 560px;
        height: 610px;
       
    }
    
}













/* @media only screen and (min-height: 900px) and (max-height: 950px) {
    .main {
    top: 100px;
}
      
     }

@media only screen and (min-height: 951px) and (max-height: 1000px) {
    .main {
    top: 150px;
}
   }

@media only screen and (min-height: 1001px) and (max-height: 1050px) {
    .main {
    top: 150px;
}
     
     }

@media only screen and (min-height: 1051px) and (max-height: 1100px) {
    .main {
    top: 190px;
}
       
     }

@media only screen and (min-height: 1101px) and (max-height: 1150px) {
    .main {
    top: 190px;
}
    
     }

@media only screen and (min-height: 1151px) {
    .main {
    top: 240px;
}
   
     } */







  @media screen and (min-height: 801px) and (max-height: 850px) {
.title {
    bottom: 190px;
}
}
        
@media only screen and (min-height: 851px) and (max-height: 899px) {
.title {
    bottom: 230px;
}       
     }

@media only screen and (min-height: 900px) and (max-height: 950px) {
    .main {
    top: 100px;
}
.title {
    bottom: 180px;
}       
     }

@media only screen and (min-height: 951px) and (max-height: 1000px) {
    .main {
    top: 150px;
}
.title {
    bottom: 200px;
}       
     }

@media only screen and (min-height: 1001px) and (max-height: 1050px) {
    .main {
    top: 150px;
}
.title {
    bottom: 250px;
}       
     }

@media only screen and (min-height: 1051px) and (max-height: 1100px) {
    .main {
    top: 190px;
}
.title {
    bottom: 250px;
}       
     }

@media only screen and (min-height: 1101px) and (max-height: 1150px) {
    .main {
    top: 190px;
}
.title {
    bottom: 270px;
}       
     }

@media only screen and (min-height: 1151px) {
    .main {
    top: 240px;
}
.title {
    bottom: 290px;
}       
     }