@font-face{
   font-family: "Steelfish";
   src: url("../fonts/Steelfish.woff2") format('woff2'),
   url("../fonts/Steelfish.woff") format('woff');
   font-display: swap;
   font-weight: 800;
   font-style: normal;
}
body{
   font-family: "Steelfish", sans-serif;
}
.wrapper {
   position: relative;
   overflow: hidden;
   min-height: 100%;
}

.page {
   position: relative;
   height: 100vh;
   background: url(../img/background.jpg)0 0 /cover no-repeat;
}

.page__container {
  padding: 5% 7%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page__link {
  color: #FFF;
  font-size: 4rem;
  text-transform: uppercase;
  padding: 1.25rem;
  background-color: #C53719;
  align-self: flex-start;
  
}
.page__link:hover{
   background-color: rgba(197, 54, 25, 0.7);
   transition: background-color 0.3s ease;
}
.page__title {
   flex: 0 1 100%;
   align-content: center;
   text-align: center;
   color: #C53719;
   text-align: center;
   font-size: 18.875rem;
   line-height: 0.7em; 
   letter-spacing: -0.56625rem;
}
@media (max-width: 991.98px){
    .page__title{
      font-size: 15rem;
    } 
    .page__link{
      font-size: 2.125rem;
    }
}
@media (max-width: 767.98px){
   .page__title{
     font-size: 10rem;
     letter-spacing: 0;
     line-height: 0.9em;
   } 
   .page__link{
     font-size: 2rem;
   }
}