* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #111111;
    color: white;
    text-align: center;
}


    @font-face {
  font-family: 'sf-pro-regular';
  src: url(font/sf-pro-regular.OTF);
}
@font-face {
  font-family: 'sf-pro-title';
  src: url(font/sf-pro-title.OTF);
}
@font-face {
  font-family: 'tusker';
  src: url(font/TuskerGrotesk-5700Bold.otf);
}
@font-face {
  font-family: 'blastimo';
  src: url(font/blastimoswash.ttf);
}
@font-face {
  font-family: 'qurova';
  src: url(font/qurova.ttf);
}
@font-face {
  font-family: 'handipro';
  src: url(font/handipro.otf);
}
@font-face {
  font-family: 'run';
  src: url(font/run.ttf);
}
@font-face {
  font-family: 'musticapro';
  src: url(font/musticapro.otf);
}
@font-face {
  font-family: 'barlow';
  src: url(font/Barlow-Medium.ttf);
}

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

main section{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1024px;
  height: 100%;
  min-height: 500px;
}
main section h2{
  font-family: 'handipro';
  font-size: 10rem;
  color: #fff;
}
main section p{
  font-family: 'handipro';
  font-size: 1rem;
  color: #fff;
}
main section a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 45px;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 15px;
}
main section a button{
  width: 100%;
  height: 100%;
  border-radius: 15px;
background: #2828289b;
border-radius: 5px;
  border: none;
cursor: pointer;
font-family: 'musticapro';
font-weight: lighter;
color: #fff;
font-size: 1rem;
transition: all .3s ease-in-out;
}
main section a button:hover{
background  : #e73c45;
}