@font-face {
    font-family: MetropolisExtraBold;
    src: url('/fonts/Metropolis-ExtraBold.woff2') format('woff2'),
         url('/fonts/Metropolis-ExtraBold.woff') format('woff'),
         url('/fonts/Metropolis-ExtraBold.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: MetropolisBold;
    src: url('/fonts/Metropolis-Bold.woff2') format('woff2'),
         url('/fonts/Metropolis-Bold.woff') format('woff'),
         url('/fonts/Metropolis-Bold.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: MetropolisMedium;
    src: url('/fonts/Metropolis-Medium.woff2') format('woff2'),
         url('/fonts/Metropolis-Medium.woff') format('woff'),
         url('/fonts/Metropolis-Medium.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;

}

body {
    margin: 0px;
    font-family: MetropolisMedium;
}

.container {
    height: 100vh ;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

a{
    text-decoration: none;
    color: #FE5C55;
}

a:hover{
    color: #FF8681;
}

.logo{
    margin-bottom: 100px;
    margin-left: -50px;
}

.hello{
    font-size: 36px;
    font-family: MetropolisExtraBold;
    color: #FE5C55;
    margin: 0;
}

.title{
    font-size: 86px;
    font-family: MetropolisExtraBold;
    color: #2C2C2C;
    margin: 0;
}

.subtitle{
    font-size: 36px;
    font-family: MetropolisExtraBold;
    color: #2C2C2C;
    margin-top: 0;
    margin-bottom: 100px;
}

.message{
    font-size: 36px;
    line-height: 50px;
    font-family: MetropolisMedium;
    color: #2C2C2C;
    width: 900px;
    margin-bottom: 30px;
}

.email{
    margin: 0;
    width: 328px;
    display: block;
    font-size: 36px;
    font-family: MetropolisBold;
    color: #FE5C55;
    border-bottom: 2px solid #FE5C55;
}