body,
html {
margin: 0;
padding: 0;
background-color: #808080;
font-family: "Gill Sans", sans-serif;
}

*,
*::before,
*::after {
box-sizing: border-box;
position: relative;
}
 
img {
width: 100%;
}
 
.page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 2rem;
min-height: 100svh;
max-width: 700px;
margin: 0 auto;
gap: 1rem;
}
 
.desktop .page{
gap: 2rem;
justify-content: center ;
}
 
h1,
p,
a {
color: white;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.02rem;
text-decoration: none;
}

button {
border: none;
outline: none;
padding: 0.5rem 1rem;
border-radius: 10px;
text-transform: uppercase;
font-size: 1.1rem;
color: #ffffff;
}

.logo {
width: 50%;
}

.screen {
mix-blend-mode: screen;
width: 50%;
max-width: 200px;
}
a{color: inherit;}
p {
font-size: clamp(1rem, 5vw, 1.8rem);
}
h1 {
font-size: clamp(2rem, 8vw, 3rem);
}
 
.desktop {
display: none;
}
 
@media (min-width: 600px) {
.mobile {
display: none;
}
.desktop {
display: block;
}
.logo{max-width: 200px; margin-bottom: 2rem;}
}
 
@media (max-height: 600px) {
.screen {
mix-blend-mode: screen;
width: 40%;
}
p {
font-size: 0.8rem;
}
h1 {
font-size: 1.4rem;
}
}