body{
  background-color: #FFF9F5;
  margin: 10px;
  background-image: url('images/hearts_light.png');
  background-repeat: repeat;
  background-size: 300px;
}

*{box-sizing:border-box;}

header{
  margin-top: 20px;
}

h1, h2, p, a{
  font-family: 'Elsie', serif;
  color: #60001A;
  margin: 0;
  padding: 5px;
  text-align: center;
  text-decoration: none;
}

h1{
  font-size: 36px;
}

.main_description p{
  line-height: 0;
}

/* title ends */

main{
  margin-top: 0px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

h2{
  line-height: 0.4;
  font-size: 24px;
  margin-top: 0;
  color: #A11D41;
  /*text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;*/
}

.scrollbar{
  margin-bottom: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.navbar{
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.scrollbar{
  grid-gap: 10px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  /*padding-bottom: 10px;
  border-bottom: 2px dotted #60001a;*/
}

.scrollbar a{
  padding: 0;
}

.navbar a{
  padding: 3px;
}

.button{
  margin-top: 5px;
  background-color: #FFF9F5;
  border: 1px solid #60001a;
  border-radius: 18px;
  font-size: 20px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.button p, .button a{
  font-family: 'Elsie Swash Caps', serif;
  font-weight: 900;
  font-size: 16px;
}

.button:hover{
  background-color: #FFF3F6;
}

.image{
    /*height: 100px;
    width: 100px;*/
    padding-top: 50%;
    padding-bottom: 50%;
    margin-left: auto;
    margin-right: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff3f6;
    border: 1px solid #60001a;
    border-radius: 30px;
}

.description p{
  font-family: 'BioRhyme', serif;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 0;
}

section{
 margin-top: 15px;
}

/*background images*/

#video1{
    background-image: url('images/video_previews/video1.png');
}
#video2{
    background-image: url('images/video_previews/video2.png');
}
#video3{
    background-image: url('images/video_previews/video3.png');
}
#video4{
    background-image: url('images/video_previews/video4.png');
}
#video5{
    background-image: url('images/video_previews/video5.png');
}
#video6{
    background-image: url('images/video_previews/video6.png');
}
#video7{
    background-image: url('images/video_previews/video7.png');
}
#video8{
    background-image: url('images/video_previews/video8.png');
}

#photo1{
    background-image: url('images/photoset_previews/photos1.png');
}
#photo2{
    background-image: url('images/photoset_previews/photos2.png');
}
#photo3{
    background-image: url('images/photoset_previews/photos3.png');
}
#photo4{
    background-image: url('images/photoset_previews/photos4.png');
}
#photo5{
    background-image: url('images/photoset_previews/photos5.png');
}
#photo6{
    background-image: url('images/photoset_previews/photos6.png');
}

#combo1{
    background-image: url('images/combo_previews/combo1.png');
}
#combo2{
    background-image: url('images/combo_previews/combo2.png');
}

#free1{
    background-image: url('images/asmr_previews/asmr1.png');
}
#free2{
    background-image: url('images/asmr_previews/asmr2.jpg');
}
#free3{
    background-image: url('images/asmr_previews/asmr3.jpg');
}
#free4{
    background-image: url('images/asmr_previews/asmr4.jpg');
}
#free5{
    background-image: url('images/asmr_previews/asmr5.png');
}
#free6{
    background-image: url('images/asmr_previews/asmr6.png');
}

/*main ends*/

footer{
  margin-top: 20px;
  padding-top: 5px;
  border-top: 1px solid #60001a;
}

/* media queries*/

 @media screen and (min-width: 600px){
  .button p, .button a{
    font-size: 16px;
  }
  .button{
    border-radius: 18px;  
  }
  .navbar{
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 450px;
  }
  h2{
    font-size: 32px;
  }
  section{
    margin-top: 30px;
}
  h1{
    font-size: 44px;  
  }
  .scrollbar{
    grid-template-columns: 1fr 1fr 1fr 1fr;  
  }
  .image{
    border-radius: 40px;  
  }
 }
 
 @media screen and (min-width: 1000px){
   .image{
     border-radius: 50px;
   }
   .navbar{
     grid-template-columns: 1fr 1fr 1fr 1fr;
     max-width: 950px;
   }
  }