/* Startup */

.powerOn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 501;

    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
#powerOnBtn {
    background-image: linear-gradient(to top, #d85c52, #f86e5b, #f86e5b, #f86e5b, #fbae9d); 
    width: 100px;
    height: 100px;

    border: 2px solid white;
    border-radius: 5px;

    cursor: pointer;
}
#powerOnBtn:hover   { background-image: linear-gradient(to top, #d85c52, #f88677, #f88677, #f88677, #fbae9d); }
#powerOnBtn:active  { background-image: linear-gradient(to top, #d85c52, #f86e5b, #f86e5b, #f86e5b, #fbae9d); }

.loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    visibility: hidden;
    transition: opacity 0.75s ease, visibility 0.75s ease;
    z-index: 500;

    background-image: url("../../assets/gifs/wxp_startup.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    cursor: none;
}





/* Shutdown */

.sdBar {
    position: absolute;
    left: 0;

    width: 100vw;
    height: 15vh;

    z-index: 50;
}
#sdGraphic {
    position: absolute;
    right: 6vw;
    top: 50vh;
    transform: translateY(-50%);;

    height: 80%;
}
#sdTopBar {
    top: 0;
    background-color: #003199;
}
#sdTopBorder {
    position: absolute;
    top: 100%;

    background-image: linear-gradient(to right, #5583da, #75a0e6, #bbd7ff, #bcd5ff, #acccfa, #8fb5f2, #86abed, #5e8ade, #4673d4);
    height: 5px;
    width: 100vw;
}
#sdBottomBar {
    bottom: 0;
    background-image: linear-gradient(to right, #2c308b, #003199);
}
#sdBottomBorder {
    background-image: linear-gradient(to right, #062d7c, #896b5a, #bb815a, #a2775f, #746367, #484f6e, #1f3e7c, #092f7d, #003199);
    height: 5px;
    width: 100vw;
}

.overlay {
    width: 100vw;
    height: 100vh;

    position: absolute;
    top: 0;
    left: 0;
}





/* Account */

.accBox {
    height: 100vh;
    width: 100vw;

    position: absolute;
    top: 0;
    left: 0;

    background-color: linear-gradient(to right, #739be4, #5480da, #5480da);
}
#light {
    position: absolute;
    top: 22vh;
    left: 10vh;

    background-color: black;

    box-shadow: 0 0 125px 35px #739be4, 0 0 100px 30px white;
    border-radius: 100%;
}

#contentBox {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);

    display: flex;
    width: 50vw;
    min-width: 400px;
    height: 50vh;
    gap: 50px;
}
.accBox_content {
    height: 100%;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

#contentLeft, #pu, #ps {
    letter-spacing: 1px;
    font-family: Tahoma, 'Segoe UI';
    font-size: 60px;

    text-shadow: 
        0 0 2px black,
        0 0 1px black,
        0 2px 5px rgba(0, 0, 0, 0.7);
}
#contentMid {
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 100%;

    width: 5px;
    height: 100%;

    background-image: radial-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
}
#contentRight {
    justify-content: left;

    text-shadow: 
        0 0 2px black,
        0 0 3px black;
}

#accOutput {
    color: rgb(150, 0, 0);
    height: 5px;
    text-shadow: none;
}

.accBtn {
    padding: 5px;
}
#change, #guest {
    color: rgb(0, 0, 180);
    text-shadow: 
    0 0 1px black;
}

.startup {
    transition: opacity 0.75s ease, visibility 0.75s ease;
}
.startup-hidden {
    opacity: 0;
    visibility: hidden;
}

.specialFlex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
#boxInnerLeft {
    width: 30%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}
#uIcon {
    width: 100%;
    border-radius: 100%;
}
#boxInnerRight {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#pu {
    font-size: 40px;
    margin-bottom: 5px;
}
#ps {
    font-size: 18px;
}