style.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&display=swap');

body{
    font-family: 'Raleway', sans-serif;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    top:15%;
    background: linear-gradient(to right, red, yellow);
}

h1{
    font: 600 3.5em 'Raleway', sans-serif;
    color: rgba(0, 0, 0, .5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    width: 100%;
}

h3{
    font: 900 1em 'Raleway',sans-serif;
    color: rgba(0, 0, 0, .5);
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;
}

#btn{
    margin-top: 2em;
    background: rgb(59, 57, 57);
    font: 600 1em 'Raleway', sans-serif;
    border: none;
    border-radius: 2em;
    width: 8em;
    height: 3em;
    color: rgb(214, 214, 214);
    text-align: center;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

@media only screen /*iPhone X*/
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3),
     { 
        body{
            width: 100%;
        }
        h1{
            font: 600 1.5em 'Raleway', sans-serif;
            width: 100%;
        }
        h3{
            font: 900 .5em 'Raleway',sans-serif;
            width: 100%;
        }
    }
@media only screen /*iPhone 11*/
    and (min-device-width : 414px) 
    and (max-device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2){
  body{
            width: 100%;
        }
        h1{
            font: 600 1.5em 'Raleway', sans-serif;
            width: 100%;
        }
        h3{
            font: 900 .5em 'Raleway',sans-serif;
            width: 100%;
        }
}