.top-border {
    border-top: none;
}

/* Copyright Section */

.copyright-full,
.icons-full {
    display: flex;
    justify-content: center;
}

.copyright {
    max-width: 1200px;
    margin: 30px 3.5%;
    padding: 2%;
    border: none;
    border-radius: 20px;
    text-align: center;
}

.me-title,
#copyright-title,
.copyright-smaller-title,
#icons-meaning {
    font-size: calc(12px + 1rem);
    font-weight: 750;

    margin: 2.5px 0 10px 5px;
}

#copyright-title,
.copyright-smaller-title,
#icons-meaning {
    font-style: italic;
}

.medium-title,
.copyright-smaller-title,
#icons-meaning {
    font-size: calc(6px + 0.7rem);
}

.copyright > * > p {
    font-size: calc(-4px + 1rem);
    font-style: italic;
    font-weight: 300;
    padding: 10px 0;
}

/* Icons */

.icons {
    max-width: 1800px;
    margin: 30px 2.5%;
    padding: 10px 5px;
    border: none;
    border-radius: 20px;
    overflow: scroll;
}

.medium-title,
.icons-meaning {
    text-align: center;
    margin-top: 5px;
}

.icons-meaning {
    margin: 10px 0 -10px 0;
}

.icon-list {
    display: grid;
    border: none;
    border-radius: 20px;
}

.icon-list > li,
.languages-list > li {
    border: none;
    border-radius: 20px;
}

.icon-list > li > ol > li {
    font-style: italic;
    font-weight: 300;
}

ul {
    list-style: none;
}

ol {
    padding: 2.5px 10px 0px 25px;
}

/* Me */

.me-container,
.all-me-container > section {
    border-radius: 30px;
}

.all-me-container > section {
    margin-bottom: 20px;
    padding-bottom: 60px;
}

.information-container,
.skill-container,
.job-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
}

.information-container {
    justify-content: center;
    gap: 30px;
}

.information-container > div {
    text-align: center;
    min-width: 300px;
    padding: 15px 30px;
}

.information-container > div p {
    margin-top: 20px;
}

.personal-photo {
    border-radius: 50px;
}

.languages-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding-top: 25px;
}

.languages-list > li {
    display: grid;
    justify-items: center;
    align-items: center;
    border-radius: 0;
}

.list-with-details {
    display: flex;
    justify-content: center;
    padding: 10px 10px 20px;
    margin-top: -30px;
}

.list-with-details details summary {
    padding: 10px 10px 20px;
}

.list-with-details details[open] > *:not(summary) {
    animation: details-show 600ms ease-in-out;
}

.list-with-details details[open] {
    transition: 2s linear;
}

.list-with-details details[open] ul {
    padding: 5px;
    list-style: disc;
}

.list-with-details details[open] ul > li {
    font-weight: 500;
    padding: 2px;
    margin: 7.5px 0;
}

@media only screen and (min-width: 50px) and (max-width: 700px) {
    .me-title {
        margin-left: 20%;
    }

    .me-container {
        margin: 10px;
        padding: 20px 10px;
    }

    .all-me-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .personal-photo {
        width: 225px;
        height: auto;
    }

    .information-container > div {
        min-width: 200px;
        padding: 15px 5px;
    }

    .languages-list > li:not(.list-with-details) {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .level {
        font-weight: 300;
        margin: -15px 0 20px;
    }

    .languages-list > li img {
        margin: 8px 0 -12px;
    }

    .icons-full {
        max-height: 610px;
    }

    .icons {
        padding: 10px 0 20px 0;
    }

    .icon-list {
        grid-template-columns: repeat(auto-fit, minmax(350px, 2fr));
        gap: 2%;
        margin: -15px 1.5%;
        padding: 8% 0.5%;
    }

    .icon-list > li {
        padding: 10px 7.5px 15px 7.5px;
    }

    .icon-list > li > img,
    .languages-list > li img {
        width: 40px;
        height: 40px;
        padding-left: 2.5%;
    }

    .icon-list > li > ol > li {
        font-size: calc(1px + 1rem);
    }
}

@media only screen and (min-width: 700px) and (max-width: 1300px) {
    .me-title {
        margin-left: 30%;
    }

    .me-container {
        margin: 20px;
        padding: 20px 30px;
    }

    .all-me-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 30px;
    }

    .personal-photo {
        width: 350px;
        height: auto;
    }

    .information-container > div {
        text-align: center;
        min-width: 300px;
        padding: 15px 30px;
    }

    .languages-list > li:not(.list-with-details) {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .level {
        font-weight: 350;
    }

    .icons-full {
        max-height: 660px;
    }

    .icons {
        width: calc(90% - 60px);
        padding: 10px 0 25px 0;
    }

    .icon-list {
        grid-template-columns: repeat(auto-fit, minmax(340px, 2fr));
        gap: 4%;
        margin: 10px 5% 20px 5%;
        padding: 2% 2.5%;
    }

    .icon-list > li,
    .languages-list > li {
        padding: 15px 20px 20px 15px;
    }

    .icon-list > li > img,
    .languages-list > li img {
        width: 60px;
        height: 60px;
    }
}

@media only screen and (min-width: 1300px) {
    .me-title {
        margin-left: 40%;
    }

    .me-container {
        margin: 40px;
        padding: 30px 40px;
    }

    .all-me-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 60px;
    }

    .personal-photo {
        width: 550px;
        height: auto;
    }

    .information-container > div {
        text-align: center;
        min-width: 300px;
        padding: 25px 40px;
    }

    .languages-list > li:not(.list-with-details) {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .level {
        font-weight: 300;
    }

    .icons-full {
        max-height: 910px;
    }

    .icons {
        width: calc(80% - 60px);
        padding: 20px 0 25px 0;
    }

    .icon-list {
        grid-template-columns: repeat(auto-fit, minmax(380px, 2fr));
        gap: 5%;
        margin: 15px 4% 20px 4%;
        padding: 1% 3.5%;
    }

    .icon-list > li,
    .languages-list > li {
        padding: 25px;
    }

    .icon-list > li > img,
    .languages-list > li img {
        width: 70px;
        height: 70px;
    }
}

@keyframes details-show {
    from {
        opacity: 0;
        transform: translateY(-2em);
    }

    50% {
        opacity: 1;
        transform: translateY(0.1em);
    }

    to {
        transform: translateY(0);
    }
}