@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css");

:root {
    --dark-bg: #212220;
    --ligth-fg: #918f80;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 100svh;
    width: 100svw;
    overflow-x: hidden;
}

.page {
    display: grid;
    grid-template-areas:
        "header main"
        "footer main";
    grid-template-columns: 50% 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    height: 50%;
}

.page > * {
    margin: 1em;
}

.page > header {
    grid-area: header;
}

.page > main {
    grid-area: main;
}

.page > footer {
    grid-area: footer;
}

.page > footer > p {
    position: absolute;
    bottom: 1em;
    left: 1em;
}

.dark {
    background-color: var(--dark-bg);
    color: var(--ligth-fg);
}

.contact-list {
    margin: 0;
    padding: 0;
}

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

.contact-list li {
    position: relative;
    padding-left: 2.0em;
}

.contact-list li::before {
    font-family: 'FontAwesome';
    position: absolute;
    left: 0;
    top: 0.25em;
}

.contact-list li.point-github::before {
    content: "\f09b";
}

.contact-list li.point-envelope::before {
    content: "\f0e0";
}

.contact-list a {
    text-decoration: none;
    color: inherit;
}

h2 {
    display: inline-block;
    width: fit-content;
}

.skills {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1em;
    border: 4px solid var(--ligth-fg);
    transition: border .4s;
}

.skills article {
    display: none;
}

.skill-list {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0 1em;
}

.skill-list li {
    display: inline-block;
    margin: 0;
}

.skill-list input[type="radio"] {
    display: none;
}

.skill-list input[type="radio"]:checked+label {
    /* background: radial-gradient(var(--dark-bg), #626262); */
    background: linear-gradient(var(--dark-bg) 75%, #626262);
    transition: border .5s;
}

.skill-list input[type="radio"]#cpp:checked+label {
    border-color: #5c8dbc;
}

.skill-list input[type="radio"]#cs:checked+label {
    border-color: #a179dc;
}

.skill-list input[type="radio"]#py:checked+label {
    border-color: #64db5c;
}

.skill-list input[type="radio"]#web:checked+label {
    border-color: #e44d26;
}

.skill-list label {
    display: block;
    height: 100%;
    padding: .5em;
    line-height: 4px;
    border: 2px solid #5a5a5a;
    border-radius: .75em;
    transition: border .5s;
}

.skill-list label:hover {
    cursor: pointer;
}

.skill-list input[type="radio"]:not(:checked)+label:hover {
    border-color: #7a7b79;
}

.skills:has(.skill-list input[type="radio"]#cpp:checked) {
    border-color: #5c8dbc;
}

.skills:has(.skill-list input[type="radio"]#cs:checked) {
    border-color: #a179dc;
}

.skills:has(.skill-list input[type="radio"]#py:checked) {
    border-color: #64db5c;
}

.skills:has(.skill-list input[type="radio"]#web:checked) {
    border-color: #e44d26;
}

.skills:has(.skill-list input[type="radio"]#cpp:checked) article.cpp {
    display: block;
}

.skills:has(.skill-list input[type="radio"]#cs:checked) article.cs {
    display: block;
}

.skills:has(.skill-list input[type="radio"]#py:checked) article.py {
    display: block;
}

.skills:has(.skill-list input[type="radio"]#web:checked) article.web {
    display: block;
}

.appear {
    animation: .6s appear ease-out;
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: translateY(1.2em);
    }
    25% {
        opacity: .5;
        transform: translateY(.5em);
    }
    50% {
        opacity: .75;
        transform: translateY(.2em);
    }
    75% {
        opacity: .9;
        transform: translateY(.1em);
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 1220px) {
    .page {
        display: block;
        width: 60%;
    }

    .page > footer > p {
        position: static;
    }
}

@media (max-width: 820px) {
    .page {
        position: static;
        transform: none;
        margin: auto;
        width: 70%;
    }
}

@media (max-width: 540px) {
    .page {
        width: 80%;
    }
}

@media (max-width: 320px) {
    .page {
        width: 90%;
    }
}