/* COLORS 
#CC8BC0
#b97cae
#72DCCA
#F4F0E1
#F2E4EF 
*/

/* RESET */

*,
*:before,
*:after {
  box-sizing: border-box;
  font-family: sans-serif;
  margin: 0;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}
a:visited {
  color: inherit;
}
a:active {
  color: inherit;
}

/* STYLE */

html, body{
  width: 100%;
  height : 100%;
}

body{
  background: #F4F0E1;
  background-image: url(/images/stripes.webp);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.container{
  height: 100%;
  width: 100%;
  flex: 2;
}

.container .ice-bg{
  height: 100%;
  width: 100%;
  z-index: -2;
  position: absolute;
  top: 0;
  opacity: 0.4;
}

.text-container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title{
  font-family: 'Lobster', cursive;
  color:#b97cae ;
  font-size: 10em;
}

.subtitle{
  text-transform: uppercase;
  letter-spacing: 6px;
  margin-top: 10px;
  color: #492543;
}

.title::selection, .subtitle::selection{
  background: #72DCCA;
}

footer{
  width: 100%;
  height: 40px;
  background: #F2E4EF;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #b97cae;
  font-weight: 600;
}

a:hover{
  color: #492543;
  transition: all ease-out 0.4s;
}

/*MOBILE*/
/*fix the slowdown system*/

@media screen and (max-width: 800px) {
  .ice-bg{
    object-fit: cover; 
  }

  .title{
    font-size: 5em;
  }
  
  .subtitle{
    font-size: 2em;
  }
}