#name {
    cursor: pointer;
}

/* CARD */
#card {
    position: absolute;
    height: 30em;
    aspect-ratio: 1.618;
    top: calc(50vh - 15em);
    left: calc(50vw - 24.27em);
    background-color: var(--primary-light);
    color: var(--secondary-dark);
    display: grid;
    grid-template-columns: 37.5% 12.05% 12.95% 37.5%;
    grid-template-rows: 40% 60%;
    border-radius: 5px;
    overflow: hidden;
}

#card h1 {
    margin: 1rem;
    z-index: 1;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 4;
    font-size: 3.3em;
    font-family: "RedHatDisplay", "Arial", "Liberation Sans", "DejaVu Sans", sans-serif;
    letter-spacing: 3px;
}

#card h1 span {
    color: var(--primary-light);
}

@media (max-width: 40rem) {
    #card h1 span {
        color: var(--secondary-dark);
    }
}

#card p {
    width: 100%;
    margin: 1rem;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
    font-size: 1.5rem;
    font-family: "AzeretRegular", monospace;
    overflow-wrap: break-word;
    hyphens: manual;
    text-justify: auto;
}

#card .accented {
    font-family: "AzeretSemibold", monospace;
}

#card img {
    width: 100%;
    height: 100%;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 5;
    object-fit: cover;
}

@media (max-width: 50rem) {
    #card {
        transform: scale(0.8);
    }
}

@media (max-width: 40rem) {
    #card {
        position: relative;
        width: auto;
        height: auto;
        aspect-ratio: unset;
        top: unset;
        left: unset;
        display: block;
        margin: 2rem;
    }

    #card h1 {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }

    #card p {
        width: auto;
    }

    #card img {
        width: 70vw;
        height: 70vw;
        margin: 2rem auto 2rem auto;
        clip-path: circle();
        position: relative;
        left: calc(50% - 35vw);
    }
}

@media (max-width: 30rem) {
    /*
    #card {
        position: relative;
        width: auto;
        height: auto;
        aspect-ratio: unset;
        top: unset;
        left: unset;
        display: block;
        margin: 2rem;
    }

    #card h1 {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }

    #card p {
        width: auto;
    }
    */

    #card img {
        width: 100%;
        height: 100%;
        margin: 2rem auto 0rem auto;
        float: left;
        clip-path: unset;
        left: 0;
    }
}

@media (max-height: 55rem) and (max-width: 40rem) {
    #card {
        position: relative;
    }

    #card img {
        display: none;
    }
}