/* --- DOCUMENT BASE --- */

@font-face {
    font-family: 'Strawford';
    font-weight: 500;
    src: url('/assets/fonts/strawford-medium-webfont.eot');
    src: url('/assets/fonts/strawford-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/strawford-medium-webfont.woff2') format('woff2'),
         url('/assets/fonts/strawford-medium-webfont.woff') format('woff'),
         url('/assets/fonts/strawford-medium-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'Strawford';
    font-weight: 400;
    src: url('/assets/fonts/strawford-regular-webfont.eot');
    src: url('/assets/fonts/strawford-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/strawford-regular-webfont.woff2') format('woff2'),
         url('/assets/fonts/strawford-regular-webfont.woff') format('woff'),
         url('/assets/fonts/strawford-regular-webfont.ttf') format('truetype');
}

:root {
    --color-white : #FFFFFF;
    --color-black : #040416;
    --color-gray  : #D6D6DC;

    --h-padding: 4rem;
}

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

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    padding : 0;
    width   : 100%;

    color          : var(--color-gray);
    font-family    : 'Strawford', sans-serif;
    font-size      : 1.6rem;
    font-weight    : 400;
    letter-spacing : -.04em;
    line-height    : 1.3;

    background: var(--color-black);
}

/* --- ELEMENTS --- */

body::before {
    content: '';

    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : -1;

    background: radial-gradient(87.72% 100% at 50% 0%, #0F0F57 0%, #08082B 48.67%, #040416 100%);

    transform-origin: top center;

    animation: scaleUp 2s .5s ease both;
}

header {
    padding: 2.4rem var(--h-padding);
}

section {
    padding: 8rem var(--h-padding) 4rem var(--h-padding);
}

.safe-area {
    margin    : 0 auto;
    max-width : 124rem;
}

.logo {
    display : block;
    width   : 15.995rem;
    height  : 4rem;
}

.content {
    max-width: 60.4rem;

    text-align: center;
}

.illustration {
    display : block;
    margin  : 0 auto;
    width   : 28.6rem;
    height  : 23.5rem;
}

.title {
    margin: 1.6rem 0;

    color       : var(--color-white);
    font-size   : 5.6rem;
    font-weight : 400;
    line-height : .9;
}

.subtitle {
    font-size: 2rem;
}

.line {
    margin    : 3.2rem auto;
    max-width : 38rem;
    height    : .1rem;

    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.contact {
    margin-bottom: .4rem;

    font-size: 1.8rem;
}

.mail-link {
    font-size       : 2rem;
    font-weight     : 500;
    text-decoration : none;
}

.mail-link:link, .mail-link:active {
    color: var(--color-white);
}

/* --- ANIMATIONS --- */

@keyframes scaleUp {
    0% {
        transform: scale(0);
    }
    
    100% {
        transform: scale(1);
    }
}

/* --- MEDIA QUERIES --- */

/* Tablet: <= 768px */
@media only screen and (max-width: 48em) {
    :root {
        --h-padding: 2.4rem;
    }

    html {
        font-size: 50%;
    }
}

/* Mobile: <= 480px */
@media only screen and (max-width: 30em) {
    :root {
        --h-padding: 1.6rem;
    }

    .subtitle {
        margin    : 0 auto;
        max-width : 25rem;
    }
}