@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&family=Poiret+One&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 1em;
height: 100vh;
width: 100%;
}
body {
background-color: #E6E6EB;
line-height: 1.6;
}


#content {
min-height: 100vh;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 20px;


/* Created with https://www.css-gradient.com */
background: #F5F5FA;
background: -webkit-linear-gradient(top left, #F5F5FA, #F1F1FA);
background: -moz-linear-gradient(top left, #F5F5FA, #F1F1FA);
background: linear-gradient(to bottom right, #F5F5FA, #F1F1FA);
}

#content > .logo {

height:97px;
margin-bottom: 1.2em;
}

#content h1, p { color: #1F1717; }

#content h1 {
font-size: 3.5em;
font-family: 'Poiret One', Verdana;
font-style: normal; font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1em;

}

#content p {
font-family: 'Open Sans', Verdana;
text-transform: uppercase;
font-size: 0.9em;
font-style: normal; font-weight: 300;
letter-spacing: 0.7em;
}


@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 812px) 
and (-webkit-min-device-pixel-ratio: 3) { 

#content > .logo {
height:77px;
margin-bottom: 0.7em;
}

#content h1 {
font-size: 2.25em;
letter-spacing: 0.1em;
line-height: 1em;
}

#content p {
font-size: 0.75em;
letter-spacing: 0.3em;
}

}