@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=M PLUS Rounded 1c');

* {margin:0;padding:0;}

#container {
  width:100%;
  min-height: 100vh;
  background: url('https://japon.quentinrey.com/images/low_index_bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#container::before {
  content: '';
  position: absolute;
  top:0; right:0;
  bottom:0; left:0;
  background-color: rgba(242, 237, 235, 0.85)
}
#title {
  z-index:100;
  text-transform: capitalize;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color:rgba(13, 13, 13, 1);
  padding: 50px 70px;
  transition: ease-in-out 250ms;
  text-decoration: none;
}
#title:hover {
  cursor: pointer;
  transform:scale(1.25);
}
#title h1 {
  font-weight: 400;
}
#title h1 span {
  color:#D93232;
  font-weight: 700;
}
#japon {
  font-family: 'M PLUS Rounded 1c';
  position:absolute;
  font-size:12em;
  z-index:0;
  opacity:0.05;
}

@media only screen and ( max-width: 800px ){ 
    #japon {
        font-size:8em;
    }
    #title:hover {
        transform:none;
    }
}
@media only screen and ( max-width: 600px ){ 
	#japon {
        font-size:6em;
    }
    #title:hover {
        transform:none;
    }
}