@font-face {
    font-family: "Avestrava-Regular";
    src: url("../src/Avestrava-Regular.woff") format("woff");
}

@font-face {
  font-family: "Px Grotesk";
  src: url("../src/PxGrotesk-Light.woff") format("woff");
  src: url("../src/PxGrotesk-Bold.woff") format("woff");
  src: url("../src/PxGrotesk-BoldIta.woff") format("woff");
  src: url("../src/PxGrotesk-LightIta.woff") format("woff");
  src: url("../src/PxGrotesk-Regular.woff") format("woff");
  src: url("../src/PxGrotesk-RegularIta.woff") format("woff");
}

a {
  text-decoration: none !important;
}


/* -------RESPONSIVE------- */
@media only screen and (min-width: 1100px){
  .single{
    display: none !important;
  } 

} 

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

.single{
  display: block !important;
  left:50px !important;
  font-size: 50px !important;
  position: absolute;
  background-color: #c9060d;
  font-family: 'PxGrotesk-Bold';
  top: 200px;
} 

.single:hover {
  font-size: 0 !important;
}

.single:hover:after{
  content: attr(data-hover);
  font-size: 150px;
  position: absolute;
  color: white;
  font-family: 'Avestrava-Regular';
  left: 10px !important;
  text-align: left !important;
  top: -20px;
}

  .scroll-mobile {
    display: none;
  } 

  .verse{
  font-size: 15px !important;
  width: 270px !important;
  line-height: 1;
  font-family: 'PxGrotesk-Bold';
  bottom: 150px !important;
  }

  .chapter{
    right:50px;
    top:540px !important;
    font-family: 'PxGrotesk-Bold'!important;
    color: black;
    font-size:20px !important;
    line-height: 100%;
    text-align: right;
    position: absolute;
    transform: rotate(0deg) !important;
    transform-origin: 0 0;
    }


} 

/* -------BACKGROUND------- */
html, body {
  background-color: #c9060d;
  }


/* -------SWITCH TEXT------- */
a {
  color: black !important;
}

#hscroll{
background-color: none;
text-align: left;
font-size: 100px;
color: white;
position: absolute;
height: 100%;
left: 265px;
line-height: 1;
width: 500px;
}

.item:hover{
font-size: 0;
}

.item:hover:after{
content: attr(data-hover);
font-size: 200px;
line-height: 90%;
color: black;
font-family: 'Avestrava-Regular';
}

/*-------TEXT STYLES-------*/
.verse{
width: 700px;
text-align: justify;
right:50px;
bottom:50px;
font-size:37px;
color: black;
line-height: 100%;
position: absolute;
font-family: 'PxGrotesk-Regular';
}

.chapter{
left:140px;
top:570px;
font-size:100px;
color: black;
line-height: 100%;
text-align: right;
position: absolute;
transform: rotate(270deg);
transform-origin: 0 0;
font-family: 'PxGrotesk-Bold';
}