html {
    width: 100vw;
}

body {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cpath%20d%3D%22M1.6-1.8l80.9%2C9.2%20M0%2C0l73.5%2C133.5%20M83.9-1.3l-1.4%2C8.8%20M82.5%2C7.5l-7.5-9%20M179.5%2C36.5l-97-29%20M157.5-2.5l22%2C39%20M190.5-1.5l-11%2C38%20M305.5%2C6.5l-8-9%20M305.5-3.5v10%20M212.5%2C102.5l-33-66%20M305.5%2C114.5V6.5%20M389.5-2.5l2%2C4%20M411.5%2C122.5l-20-121%20M483.5%2C115.5l-92-114%20M102.5%2C220.5l-29-87%20M179.5%2C36.5l126-30%20M212.5%2C102.5l93%2C12%20M305.5%2C6.5%20l-93%2C96%20M391.5%2C1.5l-86%2C5%20M305.5%2C114.5l86-113%20M411.5%2C122.5l-105-8%20M212.5%2C102.5l-139%2C31%20M179.5%2C36.5l-106%2C97%20M82.5%2C7.5l-9%2C126%20M-1.5%2C120.5l75%2C13%20M-1.5%2C230.5l75-97%20M-1.5%2C233.5l104-13%20M212.5%2C102.5l-110%2C118%20M213.5%2C241.5l-111-21%20M212.5%2C102.5l1%2C139%20M305.5%2C114.5l-92%2C127%20M318.5%2C235.5l-105%2C6%20M305.5%2C114.5l13%2C121%20M405.5%2C223.5l-100-109%20M411.5%2C122.5l-6%2C101%20M318.5%2C235.5l87-12%20M411.5%2C122.5l73-7%20M405.5%2C223.5l79-108%20M391.5%2C1.5l123.9-2%20M483.5%2C115.5l28-116%20M508.5%2C234.5l-103-11%20M484.5%2C115.5l24%2C119%20M513.5%2C120.5l-30-5%20M318.5%2C235.5l64%2C94%20M405.5%2C223.5l-23%2C106%20M508.5%2C234.5l-126%2C95%20M514.5%2C337.5l-132-8%20M512.5%2C416.5l-130-87%20M415.5%2C445.5l97-29%20M382.5%2C329.5l33%2C116%20M513.5%2C511.5l-98-66%20M390.5%2C513.5l25-68%20M292.5%2C414.5l123%2C31%20M392.5%2C513.5l-100-99%20M382.5%2C329.5l-90%2C85%20M316.5%2C306.5l-24%2C108%20M382.5%2C329.5l-66-23%20M318.5%2C235.5l-2%2C71%20M213.5%2C241.5l103%2C65%20M201.5%2C342.5l115-36%20M213.5%2C241.5l-12%2C101%20M215.5%2C432.5l-14-90%20M292.5%2C414.5l-77%2C18%20M201.5%2C342.5l91%2C72%20M215.5%2C432.5l92%2C87%20M292.5%2C414.5l14%2C105%20M215.5%2C432.5l-26%2C82%20M108.5%2C427.5l107%2C5%20M201.5%2C342.5l-93%2C85%20M159.5%2C513.5l-51-86%20M83.5%2C512.5l25-85%20M-1.5%2C416.5l110%2C11%20M76.5%2C512.5l-78-96%20M91.5%2C313.5l17%2C114%20M9.5%2C337.5l99%2C90%20M-1.5%2C416.5l11-79%20M-2.5%2C337.5h12%20M91.5%2C313.5l-82%2C24%20M91.5%2C313.5l11-93%20M91.5%2C313.5l122-72%20M-0.5%2C236.5l92%2C77%20M201.5%2C342.5l-110-29%20M9.5%2C337.5l-13.4-102%20M508.5%2C234.5l5-7%20M514.5%2C232.5l-6%2C2%20M513.5%2C239.5%20l-5-5%20M517.6%2C313.9l-9.1-79.4%20M-1.5%2C416.5l2%2C95.9%20M511.5%2C416.5l1%2C94%20M417.3%2C514.1l96.2-2.6%20M510.5%2C415.5l5.3-38.4%20M0.5%2C510.5%20l30.4%2C2.6%22%20vector-effect%3D%22non-scaling-stroke%22%20fill%3D%22none%22%20stroke%3D%22%233B185F%22%20stroke-width%3D%221.01px%22%20%2F%3E%3C%2Fsvg%3E), linear-gradient(45deg, #A12568 0%, #3B185F 100%);
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
}

main {
    display: flex;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.container {
    position: relative;
    max-width: 100%;
    padding: 20px;
    z-index: 1;
    color: #FFF;
    text-align: left;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background-color: #2a0944e1;
    border-right: solid 15px #FEC260;
}

header {
    display: flex;
    flex-direction: column;
    padding: 1rem 4rem;
    width: 100%;
}

.profile-picture {
    width: 120px;
    background-color: #A12568;
    border-radius: 50%;
    margin-bottom: 1.25rem;
    box-shadow: 0 0 10px 2px #3B185F;
}

.username {
    color: #FFFFFF;
    letter-spacing: 0.1rem;
    width: 100%;
    font-size: 3em;
    line-height: 1.125;
    font-weight: 500;
    margin-top: 0.75rem;
}

.description {
    color: #FEC260;
    letter-spacing: 0.025rem;
    width: 100%;
    font-size: 1em;
    line-height: 1.75;
    font-weight: 400;
    margin-top: 0.75rem;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    border: solid 1px rgba(255,255,255,0.078);
    height: 1px;
}

.links {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    padding: 1rem 4rem;
    max-height: 50%;
    overflow-y: scroll;
}

.link {
    display: grid;
    grid-template-columns: 1fr 3fr;
    justify-items: flex-start;
    align-items: center;
    padding: 10px;
}

.btn {
    background-color: #3B185F;
    border-radius: 50%;
    width: 64px;
    height: 64px;
}

.btn img {
    max-height: 64px;
    max-width: 64px;
    padding: 15px;
}

.text h2 {
    color: #FEC260;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 5px;
}

.text p {
    font-size: 1rem;
    font-weight: 100;
    letter-spacing: 0.1rem;
    margin-bottom: 10px;
}

.text .badges {
    display: flex;
    justify-content: flex-start;
    width: 200px;
    gap: 10px;
}

.badges li {
    display: flex;
    justify-content: center;
    align-items: end;
    background-color: #A12568;
    padding: 5px;
    border-radius: 5px;
    gap: 5px;
}

.badges i {
    color: #FFF;
}

.badges span {
    font-size: 12px;
    font-weight: 300;
}

.container-right {
    width: 100%;
}

.container-right iframe {
    width: 100%;
    height: 100%;
    border: none;
}

footer {
    width: 100%;
    height: 15%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding-top: 10px;
}

footer .contact {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

footer .contact > a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

footer i {
    color: #ffffff;
}