/*
    ** PLEASE READ **
    Free to use this code as a reference, meaning copying certain snippets to replicate a technique
    for something on your site. It takes a lot of work to code a site on your own, with a lot of love.
    Copying my entire site is prohibited. Copying my content with no credit to me is prohibited.
    Notify me if you see someone breaking these rules.
*/

:root {
    --bg-color: #8cf5ea;
    --card-top-color: #b3f7f0;
    --card-body-color: #d3fbf7;
    --card-border-color: #63a8a1;
    --btn-nav-color: #6fbfb6;
    --font-color: #1a1a2e;
    --font-link-hover-color: #737281;
}

:root :where(body, .btn) {
    font-family: monospace;
}

a {
    color: var(--font-color);
}

a:hover {
    color: var(--font-link-hover-color);
}

body {
    background-color: var(--bg-color);
    margin: 10vh 23vw;
}

footer {
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

hr {
    border: 1px dotted var(--font-color);
}

span#cursor-beam {
    animation: blink 1s ease-in-out infinite;
}

.btn {
    background-color: var(--btn-nav-color);
    border: 2px solid var(--btn-nav-border-color);
}

.bullet-list p {
    margin: 0;
}

.captioned-img {
    margin-top: 10px;
}

.card-top, .card-body {
    border-width: 2px;
    border-color: var(--card-border-color);
}

.card-top {
    background-color: var(--card-top-color);
    border-style: solid solid dashed solid;
    padding: 0.5rem 0.5rem 0;
}

.card-body {
    background-color: var(--card-body-color);
    border-style: dotted solid solid solid;
    padding: 0 0.5rem 0.5rem;
}

.card-img {
    object-fit: cover;
    width: 100%;
    height: auto;
}

.category, .date, .nav {
    font-weight: bold;
}

.code-snippet {
    border: 1px solid var(--card-border-color);
    font-size: 12px;
}

.content-overflow {
    max-height: 15vh;
    overflow: scroll;
}

.disabled {
    cursor: not-allowed;
}

.img-caption {
    margin: 0;
    text-align: center;
}

.img-container {
    display: block;
    margin: auto;
}

.main-content, .subcontainer {
    display: grid;
    gap: 10px;
}

.nav {
    font-size: 1rem;
    padding: 0.5rem;
}

.title {
    border-bottom: 2px solid var(--card-border-color);
    font-size: 1rem;
    padding: 1rem;
    margin-bottom: 10px;
}

#about-info, #site-info {
    grid-column: 1 / 3;
    grid-row: 1;
}

#link-me {
    height: 15vh;
    max-height: 15vh;
    resize: vertical;
}

#likes-dislikes, #mini-about {
    grid-column: 3;
    grid-row: 1;
}

#likes-dislikes-cards, #mini-about-cards {
    grid-column: 1;
}

#likes-dislikes-cards {
    grid-row: repeat(2, 1fr);
}

#mini-about-cards {
    grid-row: repeat(3, 1fr);
}

#my-badge {
    margin: auto 20%;
}

#navigation {
    grid-column: 4;
    grid-row: 1;
    max-width: fit-content;
    justify-self: right;
}

#navigation-cards {
    grid-column: 1;
    grid-row: repeat(2, 1fr);
}

#site-info-cards {
    grid-row: (2, 1fr);
}

.shrink-img {
    width: 50%;
    margin: auto;
}

@keyframes blink {
    50% {opacity: 0;}
}

@media screen and (max-width: 1200px) {
    body {
        margin: 5vh 20vw;
    }

    footer {
        position: relative;
    }

    .card-top {
        font-size: 0.55rem;
    }

    #email {
        font-size: 0.55rem;
    }
}