@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@50..200,200..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* || RESET */

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

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* || VARIABLES */

:root {
    /* FONTS */
    --FF: "Roboto", sans-serif;
    --FF-HEADINGS: "Inconsolata", monospace;
    --FF-LINKS: "Inconsolata", monospace;
    --FS: 1rem;

    /* COLOR */
    --BGCOLOR: #010409;
    --BODY-BGCOLOR: #0d1117;
    --BUTTON-COLOR: #e6edf3;
    --FONT-COLOR: #e6edf3;
    --HEADER-BGCOLOR: #161b22;
    --LINK-ACTIVE: #ffa198;
    --LINK-COLOR: #79c0ff;
    --LINK-HOVER: #56d364;

    /* BORDERS */
    --BORDERS: 1px solid #30363d;
    --BORDER-RADIUS: 4px;

    /* ANIMATIONS */
    --ANIM-DURATION: 0.75s;
    --ANIM-TIMING-FN: ease-in-out;
}

/* || UTILITY CLASSES */
.offscreen {
    position: absolute;
    left: -10000px;
}

.nowrap {
    white-space: nowrap;
}

.center {
    text-align: center;
}

/* || GENERAL STYLES */

html {
    font-size: 16px;
    background: var(--BGCOLOR);
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
    min-height: 100vh;
    max-width: 720px;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FONT-COLOR);
    background: var(--BODY-BGCOLOR);
}

h1,
h2,
h3 {
    font-family: var(--FF-HEADINGS);
    font-weight: 900;
    text-align: center;
}

h2,
h3 {
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.625rem;
}

h3 {
    font-size: 1.25rem;
}

a {
    text-decoration: none;
    color: var(--LINK-COLOR);
    transition: color 0.3s ease-in-out;
}

a:hover,
a:focus {
    color: var(--LINK-HOVER);
}

a:active {
    color: var(--LINK-ACTIVE);
}

hr {
    margin: 1rem 0;
}

code {
    font-size: 1rem;
}

mark {
    display: inline-block;
    padding: 0.25rem;
    color: var(--FONT-COLOR);
    background: hsla(128, 49%, 49%, 0.5);
}

abbr {
    font-weight: 500;
}

summary {
    cursor: pointer;
}

address {
    margin: 0.5rem 0;
    font-family: "Inconsolata", monospace;
    text-align: center;
}

dt {
    font-style: oblique;
    color: #e3b341;
}

dd {
    padding-left: 2.5rem;
}

/* || HEADER */

.header {
    position: sticky;
    top: 0;
    z-index: 1;
    border: var(--BORDERS);
    font-family: var(--FF-LINKS);
    font-size: 1.25rem;
    font-weight: 600;
    background-color: var(--HEADER-BGCOLOR);
    animation: slideInDown var(--ANIM-DURATION) var(--ANIM-TIMING-FN);
}

.header__h1 {
    padding: 1rem;
    font-size: 2.125rem;
    background: var(--BODY-BGCOLOR);
    animation: fadeIn var(--ANIM-DURATION) var(--ANIM-TIMING-FN);
}

.header__nav {
    padding: 0.5rem;
    background-color: var(--HEADER-BGCOLOR);
}

.header__ul {
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
}

.header__a {
    display: inline-block;
    text-decoration: none;
    color: var(--LINK-COLOR);
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.header__a:hover,
.header__a:focus {
    transform: scale(1.1);
}

/* || MAIN */

.main {
    padding: 1rem;
    border-right: var(--BORDERS);
    border-left: var(--BORDERS);
    animation: fadeIn 1s var(--ANIM-TIMING-FN) forwards;
}

.main__article {
    scroll-margin-top: 12rem;
}

.main__p {
    margin: 0.75rem 0;
    line-height: 1.5;
}

.main__figure {
    margin-bottom: 1rem;
}

.main__figcaption {
    margin-top: 1rem;
    text-align: center;
}

.main__ul,
.main__ol,
.main__dl {
    margin-top: 0.75rem;
    line-height: 1.5;
}

.main__ol,
.main__ul {
    margin-bottom: 1rem;
    padding: 0 2.5rem;
}

.html5-logo {
    margin: 0 auto;
}

.code-snippet {
    text-align: center;
}

.tag {
    color: #7ee787;
}

/* || WORKFLOW */

thead,
tbody,
tfoot,
tr {
    display: contents;
}

.workflow__container {
    display: grid;
    gap: 0.1em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "cap cap cap"
        "hdr1 hdr2 hdr3"
        "mor mort morf"
        "mor mort morf"
        "mid midt midf"
        "aft aftt aftf"
        "eve evet evef"
        "eve evet evef"
        "nit nitt nitf"
        "ftr ftr ftr"
    ;
    margin-bottom: 1em;
    border: none;
}

.workflow__caption,
.workflow__header,
.workflow__footer {
    background: #161b22;
}

.workflow__caption {
    grid-column: span 3;
    border-top-left-radius: var(--BORDER-RADIUS);
    border-top-right-radius: var(--BORDER-RADIUS);
    font-family: "Inconsolata", monospace;
    font-size: 1.25rem;
    font-weight: 900;
}

.workflow__header {
    font-family: "Inconsolata", monospace;
    font-size: 1.125rem;
    font-weight: 800;
}

.workflow__item {
    place-content: center;
    height: 100%;
    text-align: center;
}

.workflow__header,
.workflow__item {
    padding: 0.75em;
    width: 100%;
    border: 2px solid #30363d;
}

.workflow__mor {
    grid-area: mor;
}

.workflow__mid {
    grid-area: mid;
}

.workflow__aft {
    grid-area: aft;
}

.workflow__eve {
    grid-area: eve;
}

.workflow__nit {
    grid-area: nit;
}

.workflow__footer {
    grid-column: span 3;
    border-bottom-left-radius: var(--BORDER-RADIUS);
    border-bottom-right-radius: var(--BORDER-RADIUS);
}

/* || RESOURCES */

.dave-gray-scrnshot {
    margin: 0 auto;
}

.fcc-scrnshot {
    margin: 0 auto;
}

/* || CONTACT */

.contact__fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: var(--BORDER-RADIUS);
}

.contact__legend {
    padding: 0 0.5rem;
    font-family: "Inconsolata", monospace;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

.contact__p {
    margin: 0;
}

.contact__label,
.contact__input {
    margin: 0;
}

.contact__input {
    padding: 0.25rem;
    border-radius: var(--BORDER-RADIUS);
}

.contact__input:not([type="radio"]):not([type="checkbox"]) {
    width: 100%;
}

.contact__select {
    width: 100%;
    margin: 0;
    padding: 0.5rem;
}

.contact__option {
    cursor: pointer;
}

.contact__textarea {
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--BORDER-RADIUS);
    resize: none;
}

.button-container {
    margin: 1rem 0;
    border: none;
}

.button-container button {
    padding: 0.25rem 1.75rem;
    border-radius: var(--BORDER-RADIUS);
    background-color: var(--BUTTON-COLOR);
    cursor: pointer;
}

/* || FOOTER */

.footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 0.5rem;
    border: var(--BORDERS);
    background-color: #161b22;
    animation: slideInUp var(--ANIM-DURATION) var(--ANIM-TIMING-FN);
}

.footer__p {
    margin: 0.5rem;
    text-align: center;
}

@keyframes slideInDown {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

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

    100% {
        opacity: 1;
    }
}

/* || MOBILE L */
@media screen and (min-width: 374.99px) {
    .main__article {
        scroll-margin-top: 10rem;
    }

    .button-container {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .button-container button {
        padding: 0.25rem 1.75rem;
    }
}

/* || TABLET S */
@media screen and (min-width: 539.99px) {
    .main__article {
        scroll-margin-top: 7.75rem;
    }

    .html5-logo {
        width: 45%;
    }

    .button-container button {
        padding: 0.25rem 3rem;
    }
}

/* || TABLET L */
@media screen and (min-width: 767.99px) {
    .main__article {
        scroll-margin-top: 7.75rem;
    }

    .button-container button {
        padding: 0.25rem 5rem;
    }
}

/* || MOBILE DEVICE LANDSCAPE */
@media screen and (max-height: 425px) and (min-aspect-ratio: 7/4) {
    body {
        max-width: none;
    }

    .button-container button {
        padding: 0.25rem 5rem;
    }
}