@import url(https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap);
@import url(./css/bootstrap.core.min.css);

.archivo-black-regular {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-mono-light {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: light;
    font-style: normal;
}

.roboto-mono-bold {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

body {
    background-color: #f1ecbf;
    color: #000;
}

main {
    position: relative;
    cursor: default;
    min-height: 100dvh;
}

button {
    color: #000
}

a {
    text-decoration: none;
    color: #000
}

a.active,
a:hover {
    text-decoration: none;

}

a.active {
    opacity: 0.5;
}

#mid .col-12:hover {
    background-color: #f3eec6;
}

#mid a img {
    transform: rotate(0deg);
    transition: all 500ms;
    box-shadow: 0px 0px 6px #0000002e;
    ;
}

#mid a:hover img {
    transform: rotate(1deg);
    box-shadow: 1px 4px 6px #0000002e;
}

#mid .border-end a:hover img {
    transform: rotate(-1deg);
}

#end a {
    letter-spacing: -2px;
}

#end a {
    opacity: 1;
    transition: opacity 500ms;

    &:hover {
        opacity: 0.5;
    }
}

/* about */

.blurb {
    max-width: 628px;

    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;

    line-height: 100%;
    display: block;
    align-items: center;
    letter-spacing: -0.06em;
}

@media (min-width:990px) {
    .display-1 {
        font-size: 11rem
    }

    .display-2 {
        font-size: 8rem
    }

    .display-5 {
        font-size: 2rem;
    }

    #end a {
        letter-spacing: -5px;
    }

    .blurb {
        font-size: 48px;
    }


}

.col-12 p {
    max-width: 420px;
}