body {
    margin: 0;
    background-position: center;
    background-size: cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    flex-direction: column;
    gap: 32px;
}

.widgets {
    display: flex;
    gap: 64px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.widget {
    border: 2px solid;
    padding: 24px;
    background-color: rgba(0, 0, 0, .7);
    opacity: 0%;
    display: flex;
    flex-direction: row;
    font-size: 1.2em;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fmCover {
    width: 80px;
}

.fmWidget{
    text-wrap: wrap;
    gap: 32px;
}

.fmInfo {
    display: flex;
    flex-direction: column;
}

.main {
    position: relative;
    z-index: 0;
    width: 70%;
    height: 40%;
    padding: 32px;
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
    background-color: rgba(0,0,0,.7);
}

.animation {
    --feather: 256px;
    mask-image: linear-gradient(to left, transparent, black var(--feather), black);
    mask-repeat: no-repeat;
    mask-size: 200% 100%;
    mask-position: 0% 0%;
    animation: ease 4s reveal backwards;
    animation-delay: 1.5s;
}

.profile {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    font-size: 2em;
    text-align: center;
    gap: 32px;
}

.pfp {
    height: 240px;
    border: solid 2px;
    border-radius: 50%;
}

.image {
    border-radius: 50%;
    height: inherit;
    width: 240px;
}

.bio {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    width: 70%;
}

.about {
    height: 80%;
    font-size: 1.3em;
    padding-top: 12px;
    opacity: 0%;
    line-height: 28px;
    animation: text-reveal 2s forwards ease;
    animation-delay: 3s
}

.links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 20%;
    gap: 128px;
    align-items: center;
}

.logo {
    outline: 1px solid;
    border-radius: 120px;
    width: 64px;
    height: 64px;
    opacity: 0%;
}

.quote {
    opacity: 0% ;
    animation: text-reveal-reverse 1s forwards ease-out;
    animation-delay: 2s;
}

h1, h2, h3 {
    margin: 0;
}

/* pop-out menus */
span:hover {
    cursor:pointer;
}

.hover {
    z-index: 99;
    max-width: 750px;
    display: none;
    position: absolute;
    border: solid 2px;
    border-color: inherit;
    padding: 24px;
    background-color: rgba(0,0,0,.9);
    font-weight: 400;
}

.floatbox {
    width: 95%;
    position: absolute;
    display: none;
    border: solid 2px;
    border-color: inherit;
    flex-direction: column;
    padding: 24px;
    background-color: rgba(0,0,0,.85);
}

a {
    text-decoration: none;
}

hr {
    color: inherit;
    border-color: inherit;
}

.floatbox {
    z-index: 99;
    width: 75%;
    --feather: 128px;
    mask-image: linear-gradient(to top, transparent, black var(--feather), black);
    mask-repeat: no-repeat;
    mask-size: 200% 150%;
    mask-position: 0% 0%;
    animation: div-reveal 1.5s ease-out forwards;
}

.floatbox div {
    display: flex;
    justify-content: space-evenly;
    flex-wrap:wrap;
    align-items: center;
}

.floatbox img {
    width: 96px;
    padding: 32px;
}

.main::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 3px;  /* the border thickness */
    mask:
        linear-gradient(#000 0 0) exclude,
        linear-gradient(#000 0 0) content-box;
}

/* themes */
.rukia {
    color: rgb(141, 251, 255);
    border-color: rgb(141, 251, 255);
    .logo {
        background-color: rgb(141, 251, 255);
        outline-color: rgb(141, 251, 255);
    }
    .about span, .fmInfo a {
        color: white;
    }
}

.rukia::before {
    background: linear-gradient(to right, rgb(154, 255, 255), rgb(47, 109, 129), white);
}

.ado {
    color: rgb(71, 68, 255);
    border-color: rgb(71, 68, 255);
    .logo {
        background-color: rgb(3, 0, 194);
        outline-color: rgb(3, 0, 194);
    }
    .pfp {
        border-color: rgb(3, 0, 134)
    }
    .about span, .fmInfo a {
        color: rgb(3, 0, 175);
    }
}

.ado::before {
    background: linear-gradient(135deg, rgb(38, 0, 255), rgb(5, 0, 80));
}

.cyberpunk {
    color: yellow;
    border-color: yellow;
    .logo {
        background-color: greenyellow;
        outline-color: greenyellow;
    }
    .divider, .ver-divider, .pfp {
        border-color: rgb(0, 133, 133);
    }
    .about span, .fmInfo a {
        color: rgb(161, 255, 19);
    }
}

.cyberpunk::before {
    background: linear-gradient(37deg, red, greenyellow, cyan, yellow);
}

.red {
    color: red;
    border-color: red;
    .logo {
        background-color: red;
        outline-color: red;
    }
    .pfp {
        border-color: darkred;
    }
    .about span, .fmInfo a {
        color: rgb(129, 0, 0);
    }
}

.red::before {
    background: linear-gradient(to right, rgb(128, 0, 0), rgb(211, 0, 0));
}

.noelle {
    color: #ee7300;
    border-color: #ee7300;
    .logo {
        background-color: #ee7300;  
        outline-color: #ee7300;
    }
    .pfp {
        border-color: #b42400;
    }
    .about span, .fmInfo a {
        color:#b42400;
    }
}

.noelle::before {
    background: linear-gradient(to right, rgb(255, 123, 0), rgb(185, 22, 0));
}

.skong {
    color: #d40035;
    border-color: rgb(255, 0, 85);
    .logo {
        background-color: #d40035;
        outline-color: #fff;
    }
    .pfp, .ver-divider, .divider {
        border-color: #ffffff;
    }
    .about span, .fmInfo a {
        color: #8b002a;
    }
}

.skong::before {
    background: linear-gradient(75deg, rgb(255, 0, 85), rgb(255, 255, 255), rgb(255, 0, 85));
}

.motoko {
    color: #0095c2;
    border-color: rgb(0, 100, 139);
    .logo {
        background-color: #0095c2;
        outline-color: #0095c2;
    }
    .pfp, .ver-divider, .divider {
        border-color: #0095c2;
    }
    .about span, .fmInfo a {
        color: #00b0e6;
    }
}

.motoko::before {
    background: linear-gradient(180deg, rgb(0, 101, 141), rgb(0, 166, 207), rgb(0, 101, 141));
}

/* other stuff */

.ver-divider {
    border: 1px solid;
    border-color: inherit;
    display: flex;
    height: 95%;
    border-radius: 10%;
}

.divider {
    border: 1px solid;
    border-radius: 50%;
    display: flex;
    height: 0%;
    border-color: inherit;
}

.roboto-mono-reg {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

/* animations */
@keyframes reveal {
    from {
        mask-size: 0% 100%;
    }
    to {
        mask-size: calc(100% + var(--feather)) 100%;
    }
}

@keyframes div-reveal {
    from {
        mask-size: 100% 0%;
    }
    to {
        mask-size: calc(100% + var(--feather)) 150%;
    }

}
@keyframes div-hide {
    from {
        mask-size: calc(100% + var(--feather)) 120%;
    }
    to {
        mask-size: 100% 0%;
    }
}

.hide {
    animation: div-hide .6s ease-in forwards;
}

@keyframes text-reveal {
    from {
        transform: translateY(-200px);
        opacity: 0%;
    }
    to {
        transform: translateY(0px);
        opacity: 100%;
    }
}

@keyframes text-reveal-reverse {
    from {
        transform: translateY(200px);
        opacity: 0%;
    }
    to {
        transform: translateY(0px);
        opacity: 100%;
    }
}

.down-reveal {
    animation: text-reveal 1.5s forwards ease;
    animation-delay: 4s
}

.up-reveal {
    animation: text-reveal-reverse 1.5s forwards ease;
    animation-delay: 3s
}

/* responsiveness */

@media (max-height:1000px){
.about {
        height: 80%;
        font-size: 1em;
        line-height: 22px;
        padding-top: 0;
    }
    .logo {
        height: 48px;
        width: 48px;
    }
    .pfp {
        height: 180px;
    }
    .image{
        width: 180px;
    }
}



@media (max-width:1400px){
    .about {
        font-size: 1.2em;
    }
    .logo {
        height: 48px;
        width: 48px;
    }
    .pfp {
        height: 180px;
    }
    .image {
        width: 180px;
    }
    .profile {
        width: 20%;
        font-size: 1.2em;
    }
}

@media (max-height:900px) {
    .about {
    height: 80%;
    font-size: .9em;
    line-height: 20px;
    padding-top: 0;
    }
}

@media (max-width:1200px){
    .about {
        line-height: 20px;
        padding-top: 0;
    }
    .widgets {
        flex-direction: column;
        gap: 16px;   
    }
}

@media (max-width:1000px){
    .ver-divider {
        display: none;
    }
    .main {
        flex-direction: column;
        height: 70%;
        padding: 0;
        gap: 0;
    }
    .profile {
        gap: 64px;
        padding: 0;
        height: 50%;
        flex-direction: row;
        width: 70%;
    }
    .about {
        font-size: 1em;
        line-height: 22px;
        padding-top: 0;
        height: 65%;
    }
    .links {
        gap: 64px;
    }
    .widgets {
        flex-direction: column;
        gap: 16px;   
    }
}

@media (max-width:700px) {
    .profile {
        gap: 32px;
        height: 35%;
    }
    .quote {
        font-size: .7em;
    }
    .about {
        font-size: .7em;
        line-height: 18px;
        padding-top: 0;
        height: 75%;
    }
    .logo {
        height: 24px;
        width: 24px;
    }
    .links {
        gap: 32px;
        height: 5%;
    }
    .pfp {
        height: 100px;
    }
    .image {
        width: 100px;
    }
    .widgets {
        flex-direction: column;
        gap: 16px;
        font-size: .7em;
        padding: 16px;
    }
    .fmWidget {
        gap: 16px;
    }
    .fmCover {
        width: 48px;
    }
}

@media(max-width:400px){
    .widgets {
        font-size: .6em;
        padding: 12px;
    }
    .pfp {
        height: 70px;
    }   
    .image {
        width: 70px;
    }
    .about {
        font-size: .6em;
        line-height: 16px;
    }
    .quote {
        font-size: .6em;
    }
}