@font-face {
    font-family: 'VT323';
    src: url('/static/VT323/VT323-Regular.ttf') format('truetype');
}

body {
    --font-size-default: 1.5rem;
}

body {
    min-height: 100vh;
    font-family: VT323, serif;
    font-size: var(--font-size-default);
    background-image: url('/static/background/background.webp');
    background-repeat: repeat;
    background-size: contain;
    margin: 0;
    display: flex;
    flex-direction: column;

    --small-mobile-breakpoint: 560px;
}

a:visited, a {
    color: black;
    text-decoration: none;
}

#center {
    display: flex;
    justify-content: center;
    width: 100%;
}

#main, #rightContactCard {
    margin-left: 2rem;
}

#main {

    @media (max-width: 560px) {
        width: 100%;
    }
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;

    @media (max-width: 560px) {
        width: 100%;
    }
}

footer {
    margin-top: auto;
}

.background {
    img {
        max-width: 100%;
        height: auto;
    }
}

h1 {
    font-size: 2.5rem;
    font-weight: normal;
    margin-block: 0;
    margin-bottom: 1rem;
}

h1.pageTitle {
    margin-bottom: 0;
}

h2, h3 {
    font-size: 2rem;
    font-weight: normal;
    margin-block: 0;
    margin-bottom: 1rem;
}

h3 {
    font-weight: bold;
    font-size: 1.8rem;
}

.card {
    width: 25rem;
    padding: 1.5rem;
    background: #EBC79E;
    border-radius: 8px;
    border: 2px black solid;
    margin-bottom: 1rem;

    div {
        white-space: pre-line;
        overflow-wrap: break-word;
    }

    a, a.visited {
        color: #614b28;
        text-decoration: none;
    }

    .cvContent {
        div {
            white-space: normal;
        }
    }

    .cvContent, .projectContent {
        margin-bottom: 1rem;
    }

    @media (max-width: 560px) {
        width: 65%;
        div {
            overflow-wrap: anywhere;
        }
    }

    @media (max-width: 385px) {
        .contentImage img {
            width: 100%;
        }
    }
}

#mainNav, #rightContactCard, #leftContactCard {
    --nav-card-width: 12rem;

    .card {
        width: var(--nav-card-width);
    }

    .items {
        margin-top: 1rem;

        .item {
            padding: 8px 16px;
            background: #EBC79E;
            border-radius: 4px;
            border: 1px black solid;
            justify-content: center;
            align-items: center;
            gap: 8px;
            display: inline-flex;
            width: calc(var(--nav-card-width) - 2rem);
            font-size: calc(var(--font-size-default) * 1.5);
            margin-bottom: 0.5rem;
        }

        .selected {
            background-color: #A68660;
        }
    }

    .horizontalNav {
        display: flex;
        justify-content: center;
    }

    .card {
        a, a.visited {
            color: black;
        }
    }
}

#mobileNav, #mobileContact, #mobileLanguageNav {
    display: none;
    width: 100%;
    justify-content: center;
    margin-bottom: 1rem;
}

#mobileContact {
    width: inherit;

    div {
        text-align: center;
    }

    .contact {
        margin: 0;

    }

    .card {
        width: inherit;
        padding: 0.5rem;
        margin: 0;
    }

    .logoAndContact {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        align-items: center;

        div {
            white-space: normal;
        }
    }
}

.horizontalNav {
    align-items: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 3px;
    margin-right: 3px;

    .item {
        padding: 4px 8px;
        background: #EBC79E;
        border-radius: 4px;
        border: 1px black solid;
        justify-content: flex-start;
        align-items: flex-start;
        display: flex;
    }

    .item.selected {
        background: #A68660;
    }
}

#footerNav {
    display: inline-flex;
    width: 100%;
    justify-content: center;

    div {
        font-size: 20px;
        font-weight: 400;
    }
}

#leftContactCard {
    display: none;
}

@media (max-width: 1030px) {
    #leftContactCard {
        display: block;
    }

    #rightContactCard {
        display: none;
    }
}

@media (max-width: 780px) {
    #mainNav, #rightContactCard, #leftLogo, #leftContactCard {
        display: none;
    }

    #mobileNav, #mobileContact, #mobileLanguageNav {
        display: inline-flex;
    }

    #main {
        margin-left: 0;
    }
}

.copyright {
    margin-top: 1rem;
    text-align: center;
    font-size: calc(var(--font-size-default) * 0.8);
}

.identity {
    text-align: center;
}

.contact {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    justify-content: center;

    img {
        max-width: 30px;
    }
}

.callToAction {
    margin-top: 1rem;
    text-align: center;

    .callToActionButton {
        text-decoration: none;
        height: 84px;
        padding: 8px 16px;
        background: #A68660;
        border-radius: 4px;
        border: 1px black solid;
        justify-content: center;
        align-items: center;
        gap: 8px;
        display: flex;

        .text {
            color: black;
            font-size: 40px;
            font-weight: 400;
            word-wrap: break-word
        }
    }

    .redirectInfo {
        margin-top: 1rem;
    }
}

.skills {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    justify-content: center;

    .skill {
        width: 90px;
        display: flex;
        flex-direction: column;
        align-items: center;


        @media (max-width: 560px) {
            div {
                overflow-wrap: break-word;
            }
        }
    }
}

.downloadCv {
    margin-top: 1rem;
}

.contactContent {
    li {
        display: flex;

        margin-top: 0.5rem;

        div {
            margin-left: 0.5rem;
        }
    }
}