
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

:root{
    --dark-color: #205781;
    --medium-color: #4F959D;
    --light-color: #98D2C0;
    --bright-color: #F6F8D5;
}


body {
    font-family: "Oswald", sans-serif;
    background-color: var(--dark-color);
    color: var(--bright-color);
    font-size: 3.5vw;
}

#wrapper {
    margin: 5vmax;
    text-align: center;
}

h1 {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    font-size: 15vmin;
    font-weight: 800;
}
h2 {
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    font-size: 12vmin;
    font-weight: 800;
}

h1, h2 {
    text-transform: uppercase;

    --x-offset: -0.05em;
    --y-offset: 0.05em;
    --stroke: 0.03em;
    --background-color: var(--light-color);
    --stroke-color: var(--medium-color);

    text-shadow:

            var(--x-offset)
            var(--y-offset)
            0px
            var(--background-color),

            calc( var(--x-offset) - var(--stroke) )
            calc( var(--y-offset) + var(--stroke) )
            0px
            var(--stroke-color);

}