html {
    font-size: 14px;
}

body {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;

    font-family: 'Montserrat', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    --color-accent: #14bcc1;
    --color-accent-alpha: #c0edee;
    --color-main: #011638;
    --color-h1: #757083;

    --size-base-d2: 12px;
    --size-base: 20px;
    --size-base-x2: 28px;

    --border-radius-base: 10px;
    --border-radius-x2: 20px;

    --size-mini: 2px;
    --size-mini-x2: 4px;
}

.wrapper {
    display: flex;
    flex-direction: column;

    max-width: min(800px, 100%);
    padding: var(--size-base-x2) 0;
    position: absolute;
}

.header {
    display: flex;
    flex-direction: row;
    gap: var(--size-base);
}

.block {
    display: flex;
    flex-direction: column;
}

.header-text {
    gap: var(--size-base-d2);
}

.contacts {
    border: var(--size-mini) solid var(--color-accent-alpha);
    border-left: none;
    border-right: none;
}

#photo {
    width: 10rem;
    height: 10rem;
    border-radius: var(--border-radius-base);

    margin-bottom: var(--size-base);
}

@media screen and (max-width: 820px) {
    .wrapper {
        padding: var(--size-base-d2) var(--size-base-d2);
    }
}

.contacts-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: left;
    flex-wrap: wrap;
}

.icon {
    fill: var(--color-accent);
    width: 1.5rem;
    height: 1.5rem;
    margin-right: var(--size-base-d2);
}

p {
    color: var(--color-main);
    padding-top: var(--size-mini-x2);
    width: fit-content;
}

.underlined {
    text-decoration: underline var(--size-mini) var(--color-accent);
    text-underline-offset: var(--size-mini-x2);
}

.highlighted {
    position: relative;
    padding: 0 var(--size-mini-x2);
    margin-right: var(--size-mini-x2);
}

.highlighted:before {
    content: '';
    z-index: -1;
    position: absolute;
    top: -5%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-accent-alpha);
    transform: skewX(-15deg);
    border-radius: var(--size-mini-x2);
}

.bold {
    font-weight: 600;
}

h1,
h2 {
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 1.8rem;
}

h1 {
    line-height: 1.2rem;
    color: var(--color-h1);
}

h2 {
    color: var(--color-accent);
}

h3 {
    font-weight: 600;
    font-size: 1em;
    color: var(--color-main);
    padding: var(--size-mini);
}

ul {
    list-style: disc outside;
    padding-left: 2em;
}

li {
    margin-left: var(--size-base-d2);
}

li::marker {
    color: var(--color-accent);
    font-size: 1.5rem;
}

.contacts-line-ul {
    padding: 0;
    margin: 0;
    display: flex;
    column-gap: 2em;
    align-items: baseline;
    flex-wrap: wrap;
}

.contacts-line-ul li {
    margin-left: 0;
}

.contacts-line-ul li:first-child {
    list-style-type: none;
}