@import url('../static/fonts/sfmono.css');
@import url('../static/colors/mocha.css');

#enterProfile:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

body {
    overflow: hidden;
    background-color: var(--crust);
}

.background.blur {
    filter: blur(15px);
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.modalHolder {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    position: absolute;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 4;
}

.topModal {
    height: 300px;
    width: 550px;
    background-color: var(--base);
    z-index: 3;
    position: fixed;
    font-family: 'SF Mono';
    color: var(--text);
    text-align: center;
    border: 3px solid var(--profileColor);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 10px var(--profileColorA);
}

.enterButton {
    border: 3px solid var(--profileColor);
    border-radius: 12px;
    color: var(--text);
    background-color: var(--mantle);
    height: 60px;
    width: 50%;
    font-family: 'SF Mono';
    transition: text-shadow 0.3s ease;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.2s ease;
    margin-top: 15px;
    font-size: 17px;
    box-shadow: 0 0 10px var(--profileColorA);
}

.enterButton:hover {
    background-color: var(--base);
    text-shadow: 0 0 10px var(--profileColorA);
}

.background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    position: absolute;
    justify-content: center;
    align-items: center;
    display: flex;
    transition: filter 2s ease;
}

.bgImage {
    background-image: url('/randomImage');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    filter: blur(15px);
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
    transition: filter 2s ease;
}

.profileHolder {
    width: 65%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2;
}

.topHolder {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.topContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 4;
}

.profileBackPlate {
    width: 175px;
    height: 175px;
    background-color: var(--base);
    margin: 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
    border: 3px solid var(--profileColor);
    box-shadow: 0 0 10px var(--profileColorA);
}

.profilePicture {
    width: 165px;
    height: 165px;
    border-radius: 50%;
    overflow: hidden;
}

.profileImage {
    width: auto;
    height: auto;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

.namePlate {
    margin: 15px;
    font-family: 'SF Mono';
    color: var(--text);
    text-align: center;
}

.descriptionText {
    color: var(--subtext0);
    transition: text-shadow 0.3s ease;
    text-shadow: 0 0 10px var(--profileColorA);
}

.nameText {
    font-size: 35px;
    font-weight: 500;
    transition: text-shadow 0.3s ease;
    text-shadow: 0 0 10px var(--profileColorA);
}

.pink {
    color: var(--pink);
}

.gay {
    background: linear-gradient(to right,#00897B,#26D7AE,#A8E6CF,#FFFFFF,#81B3E0,#5A4FCF,#3D1A78);
    background-clip: text;
    color: transparent;
}

.aboutLink {
    color: var(--blue);
    text-decoration: none;
}

.aboutLink:hover {
    color: var(--sky);
    text-decoration: underline;
}

.aboutBoxHolder {
    margin-top: 15px;
    height: 500px;
    width: 750px;
    background-color: var(--base);
    z-index: 2;
    border: 3px solid var(--profileColor);
    border-radius: 12px;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s ease, transform 2s ease;
    flex-direction: column;
    box-shadow: 0 0 10px var(--profileColorA);
    overflow: hidden;
    position: relative;
    transform: translateY(30px)
}

.aboutBoxHolder.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.linksBoxHolder {
    margin-top: 15px;
    height: 500px;
    width: 750px;
    background-color: var(--base);
    z-index: 2;
    border: 3px solid var(--profileColor);
    border-radius: 12px;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s ease, transform 2s ease;
    flex-direction: column;
    box-shadow: 0 0 10px var(--profileColorA);
    overflow: hidden;
    position: relative;
    transform: translateY(30px)
}

.linksBoxHolder.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.configBoxHolder {
    margin-top: 15px;
    height: 500px;
    width: 750px;
    background-color: var(--base);
    z-index: 2;
    border: 3px solid var(--profileColor);
    border-radius: 12px;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, visibility 2s ease, transform 2s ease;
    flex-direction: column;
    box-shadow: 0 0 10px var(--profileColorA);
    overflow: hidden;
    position: relative;
    transform: translateY(30px)
}

.configBoxHolder.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.boxHeadText {
    font-size: 30px;
    font-weight: 500;
    text-shadow: 0 0 10px var(--profileColorA);
    background-color: var(--base);
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 0;
    text-align: center;
}

.fillerText {
    display: block;
    font-size: 16px;
    transition: text-shadow 0.3s ease;
    text-shadow: 0 0 10px var(--profileColorA);
    padding: 0 16px 16px;
    margin: 0;
    text-indent: 0;
}


.scrollContent {
    overflow-y: auto;
    flex-grow: 1;
    padding: 0 16px 12px;
}

.catImage {
    width: auto;
    height: 250px;
}

.closeButton {
    border: 3px solid var(--profileColor);
    border-radius: 12px;
    color: var(--text);
    background-color: var(--mantle);
    padding: 5px;
    width: 35px;
    font-family: 'SF Mono';
    transition: text-shadow 0.3s ease;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.2s ease;
    margin-top: 15px;
    font-size: 15px;
    box-shadow: 0 0 10px var(--profileColorA);
    position: fixed;
    z-index: 3;
    top: -5px;
    right: 10px;
}

.closeButton:hover {
    background-color: var(--base);
    text-shadow: 0 0 10px var(--profileColorA);
}

.closeButton:active {
    background-color: var(--surface0);
    text-shadow: 0 0 10px var(--profileColorA);
}

.selectorHolder {
    margin-top: 20px;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 600px;
    border-radius: 12px;
    box-shadow: 0 0 10px var(--profileColorA);
}

.selectorHolder div {
    flex-grow: 1;
}

.selectorHolder input {
    border-top: 3px solid var(--profileColor);
    border-bottom: 3px solid var(--profileColor);
    color: var(--text);
    background-color: var(--mantle);
    height: 40px;
    width: 100%;
    font-family: 'SF Mono';
    transition: text-shadow 0.3s ease;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.2s ease;
}

.selectorHolder input:hover {
    background-color: var(--base);
    text-shadow: 0 0 10px var(--profileColorA);
}

.selectorHolder input:active {
    background-color: var(--surface0);
    text-shadow: 0 0 10px var(--profileColorA);
}

.middleSelectorButton {
    border-left: none;
    border-right: none;
}

.rightSelectorButton {
    border-left: 3px solid var(--profileColor);
    border-right: 3px solid var(--profileColor);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.leftSelectorButton {
    border-left: 3px solid var(--profileColor);
    border-right: 3px solid var(--profileColor);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.shapeHolder {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0%;
    width: 100%;
    height: 100%;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
    left: 0%;
}

.shapeHolder div {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.shapeHolder div div {
    width: 35px;
    height: 100px;
    margin: 7px;
    background-color: rgba(24, 24, 37, 0.5);
    border: 3px solid var(--profileColor);
    border-radius: 12px;
    box-shadow: 0 0 10px var(--profileColorA);
}

.detailHolder {
    font-family: 'SF Mono';
    color: var(--text);
}

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

.mainSocials {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
}

.socialTab {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    width: 350px;
    padding: 5px;
}

.socialTab span {
    margin-left: 15px;
    border: 3px solid var(--profileColor);
    border-radius: 12px;
    color: var(--text);
    background-color: var(--mantle);
    padding: 15px;
    width: 250px;
    font-family: 'SF Mono';
    transition: text-shadow 0.3s ease;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.2s ease;
    font-size: 15px;
    box-shadow: 0 0 10px var(--profileColorA);
    z-index: 3;
}

.social {
    height: 50px;
    width: 50px;
}

.altSocials div svg {
    width: 35px;
    height: 35px;
}

.altSocials {
    margin-top: 30px;
    display: none;
    flex-direction: row;
}

@media only screen and (max-width: 1000px) {
    .profileBackPlate {
        width: 335px;
        height: 335px;
        background-color: var(--base);
        margin: 3px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: box-shadow 0.3s ease;
        border: 6px solid var(--profileColor);
    }

    .profilePicture {
        width: 315px;
        height: 315px;
        border-radius: 50%;
        overflow: hidden;
    }

    .profileImage {
        width: auto;
        height: auto;
        overflow: hidden;
        max-width: 100%;
        max-height: 100%;
    }

    .nameText {
        font-size: 85px;
        font-weight: 500;
        transition: text-shadow 0.3s ease;
    }

    .descriptionText {
        font-size: 40px;
        transition: text-shadow 0.3s ease;
    }

    .profileHolder {
        width: 85%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 2;
    }

    .selectorHolder {
        margin-top: 20px;
        border-radius: 25px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-radius: 25x;
        box-shadow: 0 0 10px var(--profileColorA);
    }

    .selectorHolder input {
        border-top: 6px solid var(--profileColor);
        border-bottom: 6px solid var(--profileColor);
        color: var(--text);
        background-color: var(--mantle);
        height: 100px;
        width: 100%;
        font-family: 'SF Mono';
        font-size: 40px;
        transition: text-shadow 0.3s ease;
        transition: background-color 0.3s ease;
        transition: box-shadow 0.2s ease;
    }

    .rightSelectorButton {
        border-left: 6px solid var(--profileColor);
        border-right: 6px solid var(--profileColor);
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }

    .leftSelectorButton {
        border-left: 6px solid var(--profileColor);
        border-right: 6px solid var(--profileColor);
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
    }

    .shapeHolder {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 0%;
        width: 100%;
        height: 100%;
        z-index: 1;
        align-items: center;
        left: 0%;
    }

    .shapeHolder div {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100%;
    }

    .shapeHolder div div {
        width: 35px;
        height: 175px;
        margin: 10px;
        background-color: rgba(24, 24, 37, 0.5);
        border: 6px solid var(--profileColor);
        border-radius: 17px;
    }

    .topModal {
        height: 400px;
        width: 650px;
        background-color: var(--base);
        z-index: 3;
        position: fixed;
        font-family: 'SF Mono';
        color: var(--text);
        text-align: center;
        border: 6px solid var(--profileColor);
        border-radius: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        box-shadow: 0 0 10px var(--profileColorA);
    }

    .enterButton {
        border: 6px solid var(--profileColor);
        border-radius: 25px;
        color: var(--text);
        background-color: var(--mantle);
        height: 100px;
        width: 60%;
        font-size: 40px;
        font-family: 'SF Mono';
        transition: text-shadow 0.3s ease;
        transition: background-color 0.3s ease;
        transition: box-shadow 0.2s ease;
        margin-top: 15px;
        box-shadow: 0 0 10px var(--profileColorA);
    }

    .aboutBoxHolder {
        margin-top: 25px;
        height: 700px;
        width: 850px;
        background-color: var(--base);
        z-index: 2;
        border: 6px solid var(--profileColor);
        border-radius: 25px;
        flex-direction: column;
        box-shadow: 0 0 10px var(--profileColorA);
        overflow: hidden;
        position: relative;
    }

    .linksBoxHolder {
        margin-top: 25px;
        height: 700px;
        width: 850px;
        background-color: var(--base);
        z-index: 2;
        border: 6px solid var(--profileColor);
        border-radius: 25px;
        flex-direction: column;
        box-shadow: 0 0 10px var(--profileColorA);
        overflow: hidden;
        position: relative;
    }

    .configBoxHolder {
        margin-top: 25px;
        height: 700px;
        width: 850px;
        background-color: var(--base);
        z-index: 2;
        border: 6px solid var(--profileColor);
        border-radius: 25px;
        flex-direction: column;
        box-shadow: 0 0 10px var(--profileColorA);
        overflow: hidden;
        position: relative;
    }

    .boxHeadText {
        font-size: 60px;
        font-weight: 500;
        text-shadow: 0 0 10px var(--profileColorA);
        background-color: var(--base);
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 12px 0;
        text-align: center;
    }

    .fillerText {
        display: block;
        font-size: 30px;
        transition: text-shadow 0.3s ease;
        text-shadow: 0 0 10px var(--profileColorA);
        padding: 0 16px 16px;
        margin: 0;
        text-indent: 0;
    }


    .scrollContent {
        overflow-y: auto;
        flex-grow: 1;
        padding: 0 16px 12px;
    }

    .catImage {
        width: auto;
        height: 350px;
    }

    .closeButton {
        border: 6px solid var(--profileColor);
        border-radius: 12px;
        color: var(--text);
        background-color: var(--mantle);
        padding: 10px;
        width: 70px;
        font-family: 'SF Mono';
        transition: text-shadow 0.3s ease;
        transition: background-color 0.3s ease;
        transition: box-shadow 0.2s ease;
        margin-top: 15px;
        font-size: 35px;
        box-shadow: 0 0 10px var(--profileColorA);
        position: fixed;
        z-index: 3;
        top: 0px;
        right: 15px;
    }

    .socialTab {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        width: 600px;
        padding: 5px;
    }

    .socialTab span {
        margin-left: 15px;
        border: 6px solid var(--profileColor);
        border-radius: 25px;
        color: var(--text);
        background-color: var(--mantle);
        padding: 15px;
        width: 920px;
        font-family: 'SF Mono';
        transition: text-shadow 0.3s ease;
        transition: background-color 0.3s ease;
        transition: box-shadow 0.2s ease;
        font-size: 33px;
        box-shadow: 0 0 10px var(--profileColorA);
        z-index: 3;
    }

    .social {
        height: 100px;
        width: 100px;
    }
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}