style.css

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

:root{
    --blue:hsl(197, 100%, 43%);
}

body{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    width:100%; height: 100vh;
    display: grid;

    background-color: lightblue;
}

button{
    border: none;
    color: white;
    background-color: var(--blue);
    width: 100%;
    height: 100%;
    font-size: 1rem;
    cursor: pointer;
    transition: transform .3s;
}
button:hover{
    transform: scale(.95);
}
button:focus{
    outline: 0.06rem solid white;
    outline-offset: -0.3125rem;
    transform: scale(.95);
}
    button.button-lg{
        height: 3.125rem;
        max-width: 12.5rem;
    }

main{
    margin: auto;
    width: min(90%, 62.5rem);
}
    #jokes{
        position: relative;
        height: min(31.25rem, 65vh);
        padding: 10%;
        display: grid;
        place-items: center;
        background-color: white;
    }
    #jokes h1{text-align: center;}
    #jokes__joke{
        max-width: 75%;
    }
    #weather{
        position: relative;
        padding: 0.625rem 0;
        /* background-color: blue; */
    }
        #weather__weather{
            margin-top: 0.625rem;
            display: flex;
            align-items: center;
        }
        #weather__icon{
            margin-right: 0.625rem;
            background-color: var(--blue);
            border-radius: 50%;
        }
            #weather__temp{
                font-size: 2rem;
            }

    .loading::after{
        content: '';
        position: absolute;

        top: 0; bottom: 0; right: 0;
        margin: auto;

        width: 1.25rem; height: 1.25rem;
        border: 0.3rem solid white;
        border-top-color: var(--blue);
        border-radius: 50%;

        animation: loaderSpin .5s linear infinite;
    }
    @keyframes loaderSpin{
        to{transform: rotate(360deg);}
    }