#MainPage{
    perspective: 2000px;
    height: 100%;
    display: none;
    --primarystatus-height: 340px;
}
#MainPage.State1{
    display: block;
}
#MainPage #PrimaryStatus{
    position: absolute;
    left: calc(env(safe-area-inset-left) + 15px);
    width: 400px;
    height: fit-content;
    perspective: 2000px;
    perspective-origin: top;
    --back: 0;
}
#MainPage #StatusPost{
    width: 400px;
    height: calc(100% - var(--primarystatus-height));
    margin-top: var(--primarystatus-height);
    /* SAFARI IS A LITTLE FUCKING ASS PUSSY FOR NOT ACCEPTING VAR CSS FOR PERSPECITVE ORIGIN*/
    /* take this 🖕 apple and jam it your ass hole. like the fuck is this inconsistency?*/
    perspective-origin: 0px calc(-1 * var(--primarystatus-height));
    transition: height 0.75 var(--jade-bounce), padding-top 0.75 var(--jade-bounce);
    position: absolute;
    perspective: 2000px;
    vertical-align: middle;
    overflow-y: scroll;
    left: calc(env(safe-area-inset-left) + 15px);
    /* right: calc(env(safe-area-inset-right) + 15px); */ /*same reason below*/
    --back: 0;/*original --back:1 . but is 0 to disable multi-sided dynamic panelling*/
}
.Card #Left .LoadableElement.Loading{
    background-image: 
        linear-gradient(90deg,
            rgba(0, 170, 255, .4) 0%,
            rgba(0, 255, 255, .5) 50%,
            rgba(0, 170, 255, .4) 100%);
    animation: MainPage_LoadingAnimation 1s var(--jade-bounce) infinite;
    background-size: 200px 100%;
}
.Card #Left .LoadableElement *{
    opacity: 1;
    transition: opacity .25s linear;
}
.Card #Left .LoadableElement.Loading *{
    transition: none;
    opacity: 0;
}
#MainPage.State1 #StatusPost, #MainPage.State1 #PrimaryStatus{
    animation: MainPage_IntroAnimation .75s var(--ease-in) forwards;
}
#MainPage .Card{
    transform: translateZ(-25px) rotateY(calc(90deg - calc(180deg * var(--back))));
    animation: MainPage_CardAppear 1s var(--jade-bounce) forwards;
}
#MainPage:is(.State4) .Card{
    transform: translateZ(-25px) rotateY(calc(90deg - calc(180deg * var(--back))));
    animation: MainPage_CardDisappear 1s var(--jade-bounce) forwards;
}
#MainPage .Card #Title, #MainPage #ViewingCard #Title{
    display: block;
    transition: 
    margin-top 0.5s var(--jade-bounce),
    margin-bottom 0.5s var(--jade-bounce);
}
#MainPage .Card #Title #Name, #MainPage #ViewingCard #Front #Title #Name{
    white-space: normal;
}
#MainPage .Card.Inactive #Title{
    margin-top: -10px;
    margin-bottom: -10px;
}
#MainPage .Card.Inactive #Right{
    display: none;
}
#MainPage .Card.Disabled{
    opacity: 0;
}
#MainPage .Card.Disabled #Right{
    display: none;
}
#MainPage .Card img{
    transition: 
        height 0.25s var(--jade-bounce), 
        width 0.25s var(--jade-bounce), 
        border-radius 0.25s var(--jade-bounce);
}
#MainPage .Card.Inactive img{
    height: 50px;
    width: 50px;
    border-radius: 100px;
}
#MainPage .Card #Description, #MainPage #ViewingCard #Description{
    display: block;
    transition: 
        font-size 0.5s var(--jade-bounce),
        scale 0.5s var(--jade-bounce);
    scale: 1;
}
#MainPage .Card.Inactive #Description{
    scale: 0;
    font-size: 0px;
}
#MainPage .Card #Date{
    transition: 
        margin-bottom 0.5s var(--jade-bounce),
        margin-top 0.5s var(--jade-bounce),
}
#MainPage .Card.Inactive #Date{
    margin-top: -15px;
    margin-bottom: -15px;
}
#MainPage .Card, #MainPage #ViewingCard #Front{
    width: 400px;
    text-align: left;
    position: relative;
    font-size: 25px;
    margin-top: 15px;
}
#MainPage .Card .ButtonContent, #MainPage #ViewingCard .ButtonContent{
    backface-visibility: hidden;
    text-align: left;
}
#MainPage .Card *, #MainPage #ViewingCard *{
    display: inline-block;
    vertical-align: middle;
}
#MainPage .Card img, #MainPage #ViewingCard img{
    width: 100px;
    margin-left: 15px;
    margin-right: 10px;
}
#MainPage .Card #Title, #MainPage #ViewingCard #Title{
    font-size: 30px;
}
#MainPage #StatusIcon{
    width: 15px;
    height: 15px;
    margin-right: 5px;
    background-color: rgb(var(--current-color));
    border-radius: 100%;
    vertical-align: middle;
    --current-color: 100, 100, 100;
}
#MainPage #StatusIcon.Online{
    animation: MainPage_Pulsate 1s linear forwards infinite;
    --current-color: 0, 255, 127;
}
#MainPage #StatusIcon.Idle{
    animation: MainPage_Pulsate 1s linear forwards infinite;
    --current-color: 255, 200, 0;
}
#MainPage #StatusIcon.DoNotDisturb{
    animation: MainPage_Pulsate 1s linear forwards infinite;
    --current-color: 255, 85, 0;
}
#MainPage #ProfileSnippet img{
    border-radius: 100%;
}
#MainPage .Card #Left>div:is(:nth-child(2)), 
#MainPage .Card #Right>div:is(:nth-child(2)), 
#MainPage #ViewingCard #Front>div:is(:nth-child(2)){
    padding-left: 0px;
    width: 250px;
}
#MainPage .Card #Left>div, #MainPage .Card #Right>div, #MainPage #ViewingCard #Front>div{
    padding-left: 25px;
    padding-right: 25px;
}
#MainPage .Card #Description, #MainPage #ViewingCard #Description{
    font-weight: 400;
    font-size: 20px;
    white-space: normal;
}
#MainPage .Card #Date, #MainPage #ViewingCard #Date{
    font-weight: 200;
    font-style: italic;
    font-size: 15px;
    white-space: normal;
}
#MainPage:is(.State2, .State3) .Card.Selected{
    opacity: 0;
}
#MainPage:not(.State2, .State3) #ViewingCard{
    display: none;
}
#MainPage #ViewingCard{
    perspective-origin: top;
    position: absolute;
    perspective: 2000px;
    z-index: 2;
}
#MainPage #ViewingCard #Front{
    backface-visibility: hidden;
    color: rgb(var(--secondary-color));
    border: 1px solid rgb(var(--secondary-color));
    background-color: rgb(var(--primary-color));
    border-radius: 25px;
    font-size: 40px;
    font-weight: bold;
    --back: 0;
    transform: var(--default-transform);
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
    margin-top: var(--o-y);
    width: 100%;
    height: 100%;
    position: absolute;
}   
#MainPage #ViewingCard #Back{
    transform: rotateY(180deg);
}
#MainPage #ViewingCard{
    --o-y: 250px;
    top: 0px;
}
#MainPage #ViewingCard.FromRight{
    left: calc(env(safe-area-inset-left) + 15px);
    /* left: calc(100% - calc(env(safe-area-inset-right) + 430px)); */
}
#MainPage #ViewingCard.FromRight #Front{
    --default-transform: translateZ(-25px) rotateY(10deg);
    /* --default-transform: translateZ(-25px) rotateY(-10deg); */ /* for future use in dynamic transformation. multi sided*/
}
#MainPage #ViewingCard.FromLeft{
    left: calc(env(safe-area-inset-left) + 15px);;
}
#MainPage #ViewingCard.FromLeft #Front{
    --default-transform: translateZ(-25px) rotateY(10deg);
}
#MainPage.State2 #ViewingCard{
    animation: MainPage_ViewingCardOpened 0.75s var(--jade-bounce) forwards;
}
#MainPage.State3 #ViewingCard{
    animation: MainPage_ViewingCardOpened_To 0.75s var(--jade-bounce) forwards;
}
#MainPage.State2 #ViewingCard #Back{
    animation: MainPage_ViewingCardOpenedElement 0.75s var(--jade-bounce) forwards;
}
#MainPage.State3 #ViewingCard #Back{
    animation: MainPage_ViewingCardOpenedElement_To 0.75s var(--jade-bounce) forwards;
}
#MainPage.State2 #ViewingCard #Front{
    animation: MainPage_ViewingCardOpenedElement_Front 0.75s var(--jade-bounce) forwards;
}
#MainPage.State3 #ViewingCard #Front{
    animation: MainPage_ViewingCardOpenedElement_Front_To 0.75s var(--jade-bounce) forwards;
}
#MainPage #ViewingCard #Front img{
    width: 100px;
    margin-left: 15px;
    margin-right: 10px;
}
#MainPage #ViewingCard #Back{
    color: rgb(var(--primary-color));
    border: 1px solid rgb(var(--primary-color));
    background-color: rgb(var(--secondary-color));
    border-radius: 25px;
    --back: 1;
    position: absolute;
    backface-visibility: hidden;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    margin-top: var(--o-y);
}
#MainPage #ViewingCard #Back #ContentMeasure{
    width: 100%;
    height: fit-content;
}
#MainPage #ViewingCard #Back #ClipRegion{
    overflow: scroll;
    border-radius: 25px;
    margin: 0px;
    height: 100%;
    width: 100%;
}
#MainPage #ViewingCard #Back *{
    backface-visibility: hidden;
}
#MainPage #ViewingCard #Back img{
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}
#MainPage #ViewingCard.NoImage #Back img{
    display: none;
}
#MainPage #ViewingCard #Back #ImageOverlay{
    height: 100px;
    display: block;
    margin-top: -100px;
    margin-left: 0px;
    margin-right: 0px;
    background-image: linear-gradient(180deg, rgb(10, 10, 29, 0) 0%, rgb(10, 10, 29, 1) 100%);
}
#MainPage #ViewingCard.NoImage #Back #ImageOverlay{
    display: none;
}
#MainPage #ViewingCard #Back #GenericDescription{
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px);
    text-align: center;
}
#MainPage #ViewingCard #Back #Title{
    font-size: 40px;
    position: absolute;
    top: 0px;
    z-index: 2;
    width: calc(100% - 150px);
    padding-left: 75px;
    padding-right: 75px;
    height: 100px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    margin-top: 1px;
    padding-top: 5px;
    margin-left: 0px;
    background-image: linear-gradient(0deg, rgb(10, 10, 29, 0) 0%, rgb(10, 10, 29, 1) 100%);
}
#MainPage #ViewingCard.NoImage #Back #Title{
    background-image: none;
    position: relative;
    height: auto;
    min-height: 50px;
}
#MainPage #ViewingCard #Back #Date{
    margin-top: 5px;
    margin-bottom: 15px;
}
#MainPage #ViewingCard #Back #ListOfActionButtons{
    margin-bottom: 15px;
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
}
#MainPage #ViewingCard #Back .Button.ActionButton{
    font-size: 15px;
    margin-top: 5px;
    margin-left: 12px;
    margin-right: 12px;
    width: calc(50% - 25px);
    display: inline-block;
}
#MainPage #ViewingCard #Back .Button.ActionButton:not(:nth-child(even)):is(:last-child){
    width: calc(100% - 25px);
}
#MainPage #ViewingCard #Back .Button.ActionButton .ButtonContent div:is(#Left, #Right){
    padding: 5px;
}
#MainPage #ViewingCard #Back #BackButton{
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 100px;
    width: auto;
    display: block;
    position: absolute;
    z-index: 4;
}
#MainPage #ViewingCard #Back .Button.ActionButton .ButtonContent div{
    text-align: center;
    padding: 2px;
}
#Description #ProgressBar{
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    height: 12px;
    border-radius: 12px;
    margin-top: 6px;
    margin-bottom: 20px;
    background-color: rgb(var(--primary-color));
    --progression: .25;
}
#Right #Description #ProgressBar{
    background-color: rgb(var(--secondary-color));
}
#Description #ProgressBar #Progression{
    display: block;
    position: relative;
    border-radius: 25px;
    width: calc(calc(100% - 6px) * var(--progression));
    left: 3px;
    top: 3px;
    height: calc(100% - 6px);
    background-color: rgb(var(--secondary-color));
    transition: width 0.5s var(--jade-bounce);
}
#Right #Description #ProgressBar #Progression{
    background-color: rgb(var(--primary-color));
}
#ViewingCard #VisualizerBar{
    display: none;
}
#VisualizerBar{
    margin-right: 6px;
}
#Description #ProgressBar #Time{
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 15px;
    font-style: italic;
    display: inline-block;
}
#VisualizerBar .Bar{
    width: 7px;
    height: 0px;
    margin-right: -3px;
    border-radius: 25px;
    background-color: rgb(var(--primary-color));
    animation: MainPage_VisualizerFake 1s var(--jade-bounce) calc(0.75s * var(--index)) alternate infinite;
}