/* About page */
main {
    position: relative;
}

.about-contact {
    display: flex;
}

.about-contact li {
    margin-bottom: 0.25rem;
}

.contact {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@media screen and (min-width: 721px) {
    .about-contact {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        display: block;
        padding-top: 0.1875rem;
    }
    .contact {
        top: 8.15625rem;
        position: sticky;
    }
    .resume {
        position: fixed;
        z-index: 2;
        bottom: 1.6875rem;
        left: calc(100% - var(--content-max-width)) / 2;
        transform: translateX(-1px);
    }
    .resume:before {
        content: "";
        display: inline-block;
        width: 0.75rem;
        height: 0.75rem;
        margin-right: 0.3125rem;
        transform: translateY(1.5px);
        background-color: var(--color-text-secondary);
        transition: background-color 50ms linear; /* matches color-link-transition */
        mask-image: url("../icons/arrowdown-s.svg");
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-image: url("../icons/arrowdown-s.svg");
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
    .resume:hover:before {
        background-color: var(--color-text-primary);
        transition: background-color 50ms linear; /* matches color-link-transition */
    }
}

@media screen and (min-width: 1441px) {
    .about-contact {
        left: calc((100% - var(--content-max-width)) / 2);
    }
}

@media screen and (max-width: 720px) {
    .about-contact {
        gap: 13.5px;
        margin: 1.4375rem 0 0 var(--main-text-area-start);
        width: var(--main-width);
    }
    .contact {
        display: flex;
        gap: 13.5px;
    }
    .resume:after {
        content: " ↓";
    }
}

@media screen and (max-width: 560px) {
    .about-contact {
        margin-top: 1.25rem;
    }
}

/* CV */

.about-cv {
    margin-top: 5.4375rem;
    margin-left: var(--main-text-area-start);
    width: var(--main-text-area-width);
}

.cv-section {
    width: var(--main-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.5625rem;
}

.cv-section h5,
.cv-item p {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-small);
    margin: 0;
}

.cv-section h5 {
    margin-bottom: 0.875rem;
}

.cv-item {
    position: relative;
    margin-bottom: 0.875rem;
}

.cv-time {
    position: absolute;
    width: 2.75rem;
    white-space: normal;
    top: 0;
    left: -2.75rem;
}

@media screen and (max-width: 840px) {
    .cv-time {
        position: initial;
        left: 0;
        white-space: nowrap;
    }
}

#this-site {
    margin-top: 8.9375rem;
    margin-bottom: 0;
}

footer {
    padding-left: var(--main-text-area-start);
    margin-top: 1.3125rem;
}

/* See Slippy cat */

#see-slippy {
    cursor: pointer;
}

.slippy-container.visible {
    margin-left: var(--main-text-area-start);
    height: 18.625rem;
    margin-top: 5.4375rem;
}

@media screen and (max-width: 560px) {
    .slippy-container.visible {
        height: 15.625rem;
        margin-top: 1.5625rem;
    }
}

.slippy-container img {
    height: 100%;
    cursor: zoom-out;
}