@import 'windowborder.css';



:root {
    --winbody: #fff8ff;
    --winhead: #f0d0f1;
    --purple: #4d22cd;
    --red: #e75353;
    --cyan: #90f4e3;
    --button: #f7e1fa;
    --medtext: #e992c6;
    --blue: ##527ce7 !important;
}

@font-face {
    font-family: "Zpix";
    src: url("https://raw.githubusercontent.com/angelkawaiix/NSO-web-theme/main/resources/zpix.woff2");
}

*::-webkit-scrollbar {
    width: 24px;
}

*::-webkit-scrollbar-track {
    background: #ccecfc;
}

*::-webkit-scrollbar-thumb {
    background-color: #eaa0e7;
    border-radius: 0px;
    border: 0px none #ffffff;
}

html {
    height: 100%;
    width: 100%;
}

/*disable mouse*/

img.webcamame,
.jinetextmsg,
.jineimg,
.jinemsg,
.streamicontext,
img.depazimg,
img.streambg,
.medtitle,
.medinfo,
.startmenutext,
img.mypic {
    pointer-events: none;
	-webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


/*mobile fixing*/
@media only screen and (max-width: 800px) {
    .tweetertab {
        width: 70% !important;
    }

    .aboutme {
        height: 300px !important;
    }

    img.webcamame {
        width: 150px !important;
    }

    .footer {
        display: flex !important;
    }

    .webcam {
        top: 20% !important;
        left: 65% !important;
    }

    .credit {
        font-size: 10px !important;
        width: 50% !important;
        text-align: right !important;
    }

    .warningbox {
        width: 90% !important;
        top: 50% !important;
        left: 50% !important;
    }

    .badge-icon {
        width: 25px;
        height: 25px;
        margin-top: 0px;
        left: 20vw !important;
    }

    .aboutme {
        width: 90% !important;
        left: 50% !important;
    }

    .message {
        font-size: 2vh !important;
        line-height: 2vh !important;
    }

    .internettab {
        width: 90% !important;
        left: 50% !important;
    }

    .internettitle {
        flex-direction: column !important;
    }

    .internetbody {
        width: 100% !important;
        align-items: center !important;
    }

    img.streambg {
        width: 80vw !important;
    }

    .button {
        width: 50% !important;
    }

    .depaztab,
    .dylsemtab,
    .embiantab,
    .magicgrasstab,
    .magicpapertab,
    .magicpowdertab {
        width: 50% !important;
        height: 20% !important;
    }

    .depazbody {
        height: 6.2rem !important;
        width: 12rem !important;
        overflow: hidden !important;
    }

    .depazimg {
        width: 2.3rem !important;
        margin: 0 !important;
    }

    span.medtitle {
        font-size: 0.4rem !important;
    }

    .depazdesc {
        font-size: 0.6rem !important;
        line-height: 0.5rem !important;
    }

    .depazmainbodyforpadding {
        padding: 5px !important;
    }

}

.desktop {
    position: relative;
    padding: 0px;
}

.footer {
    position: absolute;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 50px;
    background-image: url(images/Footer.png);
}

.start-button {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
    margin-bottom: 9px;
    margin-left: 7.5px;
    background-image: url(images/button_start.png);
    height: 32px;
    color: var(--purple);
    width: 136px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.startbuttons {
    cursor: pointer;
    display: flex;
    justify-content: center;
    background-image: url(images/BaseButton.png);
    background-size: cover;
    height: 40px;
    width: 200px;
    flex-direction: column;
}


.startbuttons:hover {
    background-image: url(images/button_startmenu_selected.png);
}

.startmenutext {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--purple)
}

.startbuttons:hover .startmenutext {
    color: #fff !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
}


.start-menu {
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
    margin-bottom: 50px;
    margin-left: 5px;
}

.start-menu.show {
    display: block;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

body {
    background-image: url(images/FHDbg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f9e2fe;
    font-family: 'Zpix', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

/* styles for .left-sidebar and .right-sidebar */
.left-sidebar,
.right-sidebar {
    width: 12%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
}

.left-sidebar {
    left: 0;
}

.right-sidebar {
    right: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* styles for .desktop */
.desktop {
    width: 76%;
    height: 100%;
    padding: 0;
    background-color: transparent;
}


.warningbox {
    pointer-events: auto;
}

.warningbox {
    width: 40vw;
    z-index: 9999;
}


.button {
    border-bottom: 2px solid rgba(77, 34, 203, 0.7);
    /* Bottom border */
    border-right: 2px solid rgba(77, 34, 203, 0.7);
    /* Right border */
    border-top: none;
    border-left: none;
    width: 100px;
    font-family: 'Zpix';
}

span.notice {
    margin-top: 20px;
}

.header {
    background-color: var(--winhead);
    display: flex;
    align-items: center;
    border-bottom: 7px solid #4d21cb;
}

.purple-box {
    background-color: var(--purple);
    width: 20px;
    height: 20px;
    margin: 5px;
}

span.warning {
    color: var(--red);
}

.caution {
    display: flex;
    flex-direction: row;
}


.warningtext {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
}

.caution {
    flex-direction: row !important;
}

.body {
    padding: 30px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
}

.warningbox {
    pointer-events: auto;
}

.image {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.message,
.notice {
    color: var(--purple);
    margin-top: 5px;
    line-height: 25px;
    font-size: 20px;
}

.message {
    color: var(--purple);
    margin-top: 5px;
}

.buttons {
    display: flex;
    justify-content: center;
    margin: 20px;
}

.header span {
    color: var(--purple);
    font-size: 2.1vh
}

.button {
    background-color: var(--button);
    padding: 10px 15px;
    border-radius: 0px;
    /* Square corners */
    cursor: pointer;
    margin-right: 10px;
    color: var(--purple);
    /* Button text color */
    font-size: 1.8vh;
    width: 10vw;
}

.appicons {
    display: flex;
    width: 10vh;
    margin: 5vh;
    flex-direction: column;
    align-items: center;
}

.streamicon,
.hangicon,
.sleepicon,
.medicon,
.interneticon,
.outicon {
    margin: 1vh;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

img.streamimage,
img.hangimage,
img.sleepimage,
img.internetimage,
img.outimage,
img.medimage {
    width: 6vh;
}

span.streamicontext,
span.hangicontext,
span.interneticontext,
span.outicontext,
span.sleepicontext,
.medicontext {
    color: var(--purple);
    margin-top: 1vh;
    font-size: 1.8vh;
    text-align: center;
    font-family: 'Zpix'
}

.aboutme {
    background-image: url('images/JINEBG.png');
    background-repeat: no-repeat;
    background-size: cover;
    user-select: none;
    position: absolute;
    top: 65%;
    left: 85%;
    width: 350px;
    height: 450px;
}

button.desktopicon {
    background: transparent;
    border: none;
    cursor: pointer;
}

.internettab {
    background-image: url('images/internet_base.png') !important;
    width: 500px;
    top: 50%;
    left: 40%;
}

button.closewindow {
    background: transparent;
    border: none;
    display: flex;
    margin-left: auto;
}


.sparkles-container,
.sparkles-container2 {
    position: relative;
    width: 100px;
    height: 100px;
}

img.sparkles,
img.sparkles2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: sparkle 1s infinite;
}

.internettitle {
    cursor: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-bottom: 30px;
}

a.internetredirect {
    color: var(--purple);
    padding: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    font-size: 1.2rem;
}

.internetlinks {
    width: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    justify-content: flex-end;
    align-items: flex-end;
}

:root {
    --internetline: #802125
}

.internetline {
    margin-bottom: 40px;
    margin-top: 1.5px;
    margin-right: 0;
    margin-left: 0;
    width: 90%;
    border-style: solid;
    border-width: 0.5px;
    border-color: var(--internetline);
}

.internetline2 {
    width: 80%;
    border-style: solid;
    border-width: 0.5px;
    border-color: var(--internetline);
    margin-left: 0;
    margin-right: 0;
}

.internetlinkssections {
    display: flex;
    width: -webkit-fill-available;
    flex-direction: column;
    align-items: flex-end;
}

.internetlinkssections2 {
    display: flex;
    width: -webkit-fill-available;
    margin-left: 20%;
    flex-direction: column;
    position: relative;
    align-items: flex-end;
}

.internetlinkssections {
    position: relative;
    /* Add this to make the image position absolute */
}

.internetimg {
    position: absolute;
    height: 6vh;
    width: 6vh;
    left: 0;
    /* Position the image to the left */
    top: 0;
    /* Position the image vertically centered */
    transform: translateY(-50%);
    /* Adjust the vertical position */
    z-index: 1;
    /* Make sure the image is on top of the line */
}

.internetimg2 {
    position: absolute;
    height: 6vh;
    width: 6vh;
    left: 0;
    transform: translateY(-50%);
    /* Adjust the vertical position */
    z-index: 1;
    /* Make sure the image is on top of the line */
}

.depaztab,
.dylsemtab,
.embiantab,
.magicgrasstab,
.magicpapertab,
.magicpowdertab {
    width: 700px;
}

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

.depazdesc {
    color: var(--purple);
    line-height: 2rem;
    display: flex;
    margin-left: 1rem;
    flex-direction: column;
}

span.medtitle {
    font-size: 0.9rem;
    color: var(--medtext);
}

.depazmainbodyforpadding {
    padding: 10px;
}

.depazimg {
    margin: 20px;
}

.depaztab {
    left: 33%;
    top: 65%;
}

.embiantab {
    left: 68%;
    top: 35%;
}

.magicgrasstab {
    left: 45%;
    top: 75%;
}

.magicpapertab {
    left: 65%;
    top: 65%;
}

.magicpowdertab {
    left: 40%;
    top: 30%;
}

.streambody {
    padding: 0px;
}

.badge-icon {
    width: 25px;
    height: 25px;
    margin-top: 0px;
    left: 6.5vw;
}

.badge-icon {
    z-index: 0;
}

.appicons {
    z-index: -1;
}

.menu {
    width: 200px;
    padding: 10px;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li {
    padding: 10px;
}

.menu li img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.menu li span {
    font-size: 14px;
}

.menu li ul {
    padding-left: 20px;
}

.menu li ul li {
    padding-left: 20px;
}

.sleepbody {
    padding: 20px;
}


.mypicturestab {
    width: 900px;
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.mypictures {
    display: flex;
    top: 50%;
    left: 50%;
}

img.mypic {
    width: 200px;
    padding: 10px;
}

.tweetertab {
    width: 900px;
    height: 80%;
    background-image: url(images/result_bg_tile.png) !important;
    background-repeat: no-repeat;
    background-size: cover;
}

.bodytweeter {
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    align-content: center;
    height: -webkit-fill-available;
}

.tweeterbox {
    padding: 40px;
    width: 90%;
    height: auto;
    background: white;
    border-radius: 10px !important;
    height: -webkit-fill-available;
    overflow: auto;
}


.tweet {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
}

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

span.tweetaccount {
    font-size: 1.1rem;
    color: #527ce7;
    margin-bottom: 0.5rem;
}

span.tweettext {
    font-size: 1.1rem;
    color: var(--purple);
}

span.tweettime {
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.7rem;
    color: #94979f;
}

hr.tweeterline {
    border-style: solid;
    border-color: #e8e8e8;
    border-width: 0.5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.reply {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 5px;
}

.jinetextmsg {
    background: #cbe5f9;
    border-radius: 10px;
    padding: 15px;
    margin: 5px;
}

.jinemsg {
    display: flex;
}

img.jineimg {
    height: 50px;
    width: 50px;
}

.replytweet {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

img.webcamame {
    display: block;
    background-image: url(images/bg_stream.png);
    background-size: contain;
    width: 500px;
    height: fit-content;
    animation: animate-webcam 3s steps(10) infinite;
}

@keyframes animate-webcam {
    0% {
        content: url(images/kangelame/ame_idle_anxiety_crazy/stream_ame_idle_anxiety_000_2.png);
    }

    12.5% {
        content: url(images/kangelame/ame_idle_anxiety_crazy/stream_ame_idle_anxiety_001_2.png);
    }

    25% {
        content: url(images/kangelame/ame_idle_anxiety_crazy/stream_ame_idle_anxiety_002_2.png);
    }

    37.5% {
        content: url(images/kangelame/ame_idle_anxiety_crazy/stream_ame_idle_anxiety_003_1.png);
    }

    50% {
        content: url(images/kangelame/ame_idle_anxiety_crazy/stream_ame_idle_anxiety_004_1.png);
    }

    62.5% {
        content: url(images/kangelame/ame_idle_anxiety_crazy/stream_ame_idle_anxiety_005_2.png);
    }

    75% {
        content: url(images/kangelame/ame_idle_anxiety_crazy/stream_ame_idle_anxiety_006_1.png);
    }

    100% {
        content: url(images/kangelame/ame_idle_anxiety_crazy/stream_ame_idle_anxiety_007_1.png);
    }
}

.webcam {
    top: 27%;
    left: 38%;
}

.credit {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: flex-end;
    height: -webkit-fill-available;
    margin: 5px;
    color: var(--purple);
}