@font-face {
    font-family: 'SpaceGrotesk';
    src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}

@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

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



body {
    font-family: Arial, sans-serif;
    line-height: 1.6; 
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    animation: fadeIn 2s;
    /* inline-size: 100%; */
    -webkit-text-size-adjust: none;
}

@keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

h1, 
#alexword, 
h2, 
header, 
nav ul, 
#contact {
    font-family: 'SpaceGrotesk', Arial, sans-serif;
}

/* nav and header */

header, 
#skip-to-content-link:focus-visible {
    background-color: #07193d;
}

header {
    color: #eeeeee;
    padding: 30px 0; 
}

#skip-to-content-link, 
#main, 
#contact-btn, 
.article-card a, 
footer {
    color: #07193d;
}

#skip-to-content-link {
    transform: translateY(-150%);
    z-index: 1;
    position: absolute;
} 

#skip-to-content-link:focus-visible,
#contact-btn {
    padding: .6em 1em;
}

#skip-to-content-link:focus-visible {
	color: #ff73be;
    margin-inline-start: 3%;
	position: fixed;
    text-decoration: none;
    transform: translateY(0%);
    outline: #ff73be solid 2px;
}

h1,
#contact,
footer {
    text-align: center;
}

h1 {
    line-height: 1;
    margin-inline: 1.5%;
    font-size: 10vw;
}

h2 {
    padding-block-end: 30px;
}

#alexword {
    font-size: 25vw;
    text-shadow: .05em .05em 0 #ff73be, .05em .05em 0 #ff73be, .05em .05em 0 #ff73be;
}

nav {
    display: none;
}

/* main */

#main {
    background-color: #eeeeee ;
    padding: 3vh;
}

/* Contact section */

#contact, #services {
    padding-block-end: 3vh;
}

#contact {
    font-size: 1.6em;
    text-decoration: none;
}

#contact-btn {
    text-decoration: none;
}

#contact-btn {
    outline: #07193d solid 1px;
    background-color: white;
    box-shadow: 8px 8px 0 #ff73be, 8px 8px 0 #ff73be, 8px 8px 0 #ff73be;
    transition: box-shadow 0.25s, background-color 0.25s;
}

.article-card {
    outline: #07193d solid 1px;
    background-color: white;
    box-shadow: 8px 8px 0 #07193d, 8px 8px 0 #07193d, 8px 8px 0 #07193d;
    margin-block-start: 2em;
}

#contact-btn:hover, 
#contact-btn:focus-visible {
    outline: #07193d solid 2px;
    box-shadow: 8px 8px 0 #07193d, 8px 8px 0 #07193d, 8px 8px 0 #07193d;
}

/* Services section */

#serviceslist {
    list-style-type: none;
}

/* Articles section */

#articles, 
#about, 
#sarah-pic {
    padding-block-end: 2em;
}

.article-card {
    max-inline-size: 400px;
    display: flex;
    flex-direction: column;
}

.article-card,
#sarah-pic,
#about-p {
    margin-inline: auto;
}

.card-pic {
    inline-size: 100%;
}

.article-date {
    font-size: .8em;
    padding-block-end: 1em;
}

.article-main-title {
    padding-block: 0;
    margin-block: 0;
}
.subtext {
    font-size: .8em;
    font-style: italic;
}

.text-container {
    padding: 10%;
}

.text-container p {
    margin: 0;
}

.read-on-LI {
    text-align: end;
    padding-inline-end: 1em;
    margin-block-start: auto;
    padding-block-end: 1em;
}

.read-on-LI:hover {
    text-decoration-line: underline;
}

/* About section */

#sarah-pic {
    max-inline-size: 300px;
}

#about-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#about-p {
    max-inline-size: 650px;
}

 /*footer*/

footer {
    padding: 12px;
    background-color: white;
}

/* CSS unique to desktop size */

@media screen and (min-width: 811px) {
    h1 {
        font-size: 500%;
        max-inline-size: 1000px;
        margin: 8% auto;
        text-align: center;
    }
    #alexword {
        font-size: 240px;
    }

    nav {
        padding: 1.5em 0;
        position: fixed;
        top: 0;
        inline-size: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        background-color: #07193d;
    }
    section {
        max-inline-size: 1000px;
        margin: auto;
    }

    nav ul {
        max-inline-size: 800px;
        margin-block: 0;
        list-style: none;
        font-size: 1.5em;
        display: flex;
        justify-content: center;
        padding: 0;
    }

    nav a, #contact-btn {
        padding: .6em 1em;
    }

    nav a {
        text-decoration: none;
        color: #eeeeee;
        outline: transparent solid 1px;
    }

    nav a:hover, nav a:focus-visible {
        color: #ff73be;
        outline: #ff73be solid 1px;
        box-shadow: 6px 6px 0 #ff73be, 6px 6px 0 #ff73be, 6px 6px 0 #ff73be;
        transition: box-shadow 0.25s;
    } 

    #contact-btn, .article-card {
        background-color: #eeeeee;
        outline: #07193d solid 1px;
        box-shadow: none;
        color: #07193d;
    }
    
    #contact-btn:hover, #contact-btn:focus-visible {
        outline: #07193d solid 2px;
        background-color: white;
        box-shadow: 8px 8px 0 #07193d, 8px 8px 0 #07193d, 8px 8px 0 #07193d;
        transition: box-shadow 0.25s, background-color 0.25s;
     }

    .article-card {
        outline: #07193d solid 2px;
        background-color: white;
        box-shadow: 8px 8px 0 #07193d, 8px 8px 0 #07193d, 8px 8px 0 #07193d;
    }

    #services::before, #about::before, #articles::before {
        content: "";
        display: block;
        block-size: 120px;
        margin-block-start: -120px;
        visibility: hidden;
    }

    .article-container {
        display: flex;
    }

    #about-p {
        margin-inline-start: 30px;
    }
}