/*
Theme Name:   Probably Nothing
Theme URI:    https://wordpress.org/themes/twentytwentyfour/
Description:  Child theme of Twenty Twentyfour
Author:       Hamy Nguyen
Template:     twentytwentyfour
Version:      1.0.0
Text Domain:  twentytwentyfourchild
*/

*:not(textarea, input) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#wpadminbar {
    display: none!important;
}

html {
    margin-top: 0px !important;
    min-height: -webkit-fill-available;
}

body {
    margin: 0;
    color: #fff;
    line-height: 1;
    height: 100vh;
    overflow: hidden;
    font-family: Tahoma, Verdana, sans-serif;
    height: -webkit-fill-available;
}

body:before {
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, .25) 0), linear-gradient(90deg, rgba(255, 0, 0, .06), rgba(0, 255, 0, .02), rgba(0, 0, 255, .06));
    background-size: 100% 2px, 3px 100%;
}

body:after, body:before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 105;
    pointer-events: none;
}

body:after {
    background: rgba(18, 16, 16, .1);
    opacity: 0;
    -webkit-animation: flicker .15s infinite;
    animation: flicker .15s infinite;
}

@keyframes flicker {
    0% {
      opacity: 0.27861;
    }
    5% {
      opacity: 0.34769;
    }
    10% {
      opacity: 0.23604;
    }
    15% {
      opacity: 0.90626;
    }
    20% {
      opacity: 0.18128;
    }
    25% {
      opacity: 0.83891;
    }
    30% {
      opacity: 0.65583;
    }
    35% {
      opacity: 0.67807;
    }
    40% {
      opacity: 0.26559;
    }
    45% {
      opacity: 0.84693;
    }
    50% {
      opacity: 0.96019;
    }
    55% {
      opacity: 0.08594;
    }
    60% {
      opacity: 0.20313;
    }
    65% {
      opacity: 0.71988;
    }
    70% {
      opacity: 0.53455;
    }
    75% {
      opacity: 0.37288;
    }
    80% {
      opacity: 0.71428;
    }
    85% {
      opacity: 0.70419;
    }
    90% {
      opacity: 0.7003;
    }
    95% {
      opacity: 0.36108;
    }
    100% {
      opacity: 0.24387;
    }
  }

main {
    height: 100vh;
    background-color: #0a0d0a;
}


.startup-screen-displayed .start-menu {
    display: flex;
}

.startup-screen-displayed .startup-screen {
    z-index: -99;
    opacity: 0;
    visibility: hidden;
    display: none;
}

.startup-screen-displayed .startup-screen-entrance {
    opacity: 0;
    visibility: hidden;
}

h1 { font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; } 
h3 { font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; } 
p { font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } 
blockquote { font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; } 
pre { font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px; }

[hidden] {
	appearance: none;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}

#desktop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(100vh - 40px);
    background-image: url("/wp-content/uploads/2024/04/PN_desktop1-1-1.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

#icons {
    position: relative;
    z-index: 1;
    padding-top: 3px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 250px;
    flex-wrap: wrap;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 116px;
    margin-bottom: 20px;
    cursor: pointer;
}

.desktop-icon.disabled {
    pointer-events: none;
}

.desktop-icon:before {
    width: 90px;
    height: 90px;
    margin-bottom: 6px;
}

.desktop-icon:before, .desktop-icon:after {
    content: "";
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.main-menu label:before, .main-menu label:after {
    content: "";
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.main-menu label.disabled {
    pointer-events: none;
}

.label-tweets:before {
    background-image: url('/wp-content/uploads/2024/04/DVD.gif');
}

.label-chat:before {
    background-image: url('/wp-content/uploads/2024/04/CHAT.gif');
}

.label-team:before {
    background-image: url('/wp-content/uploads/2024/04/VEST.gif');
}

.label-game:before {
    background-image: url('/wp-content/uploads/2024/04/Card.gif');
}

.label-paint:before {
    background-image: url('/wp-content/uploads/2024/04/PAINT.gif');
}

.label-fun:before {
    background-image: url('/wp-content/uploads/2024/04/KISS.gif');
}

.label-contact:before {
    background-image: url('/wp-content/uploads/2024/04/PHONE.gif');
}

.desktop-icon span {
    text-transform: capitalize;
    font-size: 12px;
    font-weight: bold;
    text-shadow: black 0px 1px 1px;
}

#iframe-loader {
    display: block;
    position: absolute;
    z-index: 1;
    height: 90px;
    width: 100%;
    object-fit: contain;
    top: 50%;
    transform: translateY(-50%);
}

#windows, #alerts {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 44px);
    padding-bottom: 44px;
}

.window, .alert {
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: -1;
    background-color: rgb(101, 130, 245);
    flex-direction: column;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    scale: 0;
    transition: scale .25s linear;
    top: 10%;
}

#tweets.active ~ #tweets-minimize:not(:checked) ~ main .window[data-window]:not(#window-tweets), #tweets.active.no-tab ~ main .window[data-window]:not(#window-tweets) {
    z-index: 10;
}

#tweets:checked ~ main #window-tweets {
    will-change: transform;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    scale: 1;
}

#game:checked ~ main #window-game {
    will-change: transform;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    scale: 1;
}

#team:checked ~ main #window-team {
    will-change: transform;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    scale: 1;
}

#chat:checked ~ main #window-chat {
    will-change: transform;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    scale: 1;
}

#paint:checked ~ main #window-paint {
    will-change: transform;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    scale: 1;
}

#fun:checked ~ main #window-fun {
    will-change: transform;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    scale: 1;
}

#contact:checked ~ main #window-contact {
    will-change: transform;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    scale: 1;
}

#music:checked ~ main #window-music {
    will-change: transform;
    opacity: 1;
    visibility: visible;
    z-index: 1!important;
    scale: 1;
    bottom: 124px;
    top: unset;
    right: 10px;
    background-image: url(/wp-content/uploads/2024/04/Player.png);
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    width: 350px;
    height: 180px;
}

.window-nav.window-nav-music {
    background: transparent;
}

#tweets:checked ~ main .tab-tweets {
    display: flex;
}

#chat:checked ~ main .tab-chat {
    display: flex;
}

#game:checked ~ main .tab-game {
    display: flex;
}

#team:checked ~ main .tab-team {
    display: flex;
}

#music:checked ~ main .tab-music {
    display: flex;
}

#fun:checked ~ main .tab-fun {
    display: flex;
}

#paint:checked ~ main .tab-paint {
    display: flex;
}

#contact:checked ~ main .tab-contact {
    display: flex;
}

.label-shutdown {
    display: flex;
    align-items: center;
}

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

.start-menu .tabs {
    display: flex;
    width: calc(100% - 79px - 100px - 6px);
}

#start-menu .tabs .tab {
    display: none;
    position: relative;
    overflow: hidden;
}

#alerts {
    z-index: -1;
}

#alert-blue-screen {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background-color: #00a;
    color: white;
}

#start-menu {
    z-index: 100;
}

.start-menu {
    height: 40px;
    background: linear-gradient(rgb(31, 47, 134) 0px, rgb(49, 101, 196) 3%, rgb(54, 130, 229) 6%, rgb(68, 144, 230) 10%, rgb(56, 131, 229) 12%, rgb(43, 113, 224) 15%, rgb(38, 99, 218) 18%, rgb(35, 91, 214) 20%, rgb(34, 88, 213) 23%, rgb(33, 87, 214) 38%, rgb(36, 93, 219) 54%, rgb(37, 98, 223) 86%, rgb(36, 95, 220) 89%, rgb(33, 88, 212) 92%, rgb(29, 78, 192) 95%, rgb(25, 65, 165) 98%);
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    display: none;
}

.label-start {
    height: 100%;
}

.label-start img {
    height: 100%;
    position: relative;
}

.start-menu .time {
    flex-shrink: 0;
    background: linear-gradient(rgb(12, 89, 185) 1%, rgb(19, 158, 233) 6%, rgb(24, 181, 242) 10%, rgb(19, 155, 235) 14%, rgb(18, 144, 232) 19%, rgb(13, 141, 234) 63%, rgb(13, 159, 241) 81%, rgb(15, 158, 237) 88%, rgb(17, 155, 233) 91%, rgb(19, 146, 226) 94%, rgb(19, 126, 215) 97%, rgb(9, 91, 201) 100%);
    border-left: 1px solid rgb(16, 66, 175);
    box-shadow: rgb(24, 187, 255) 1px 0px 1px inset;
    padding: 0px 10px;
    margin-left: 10px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: rgb(255, 255, 255);
    font-size: 11px;
    font-weight: lighter;
    text-shadow: none;
    height: 100%;
}

.start-menu header {
    position: relative;
    align-self: flex-end;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: rgb(255, 255, 255);
    height: 54px;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: linear-gradient(rgb(24, 104, 206) 0%, rgb(14, 96, 203) 12%, rgb(14, 96, 203) 20%, rgb(17, 100, 207) 32%, rgb(22, 103, 207) 33%, rgb(27, 108, 211) 47%, rgb(30, 112, 217) 54%, rgb(36, 118, 220) 60%, rgb(41, 122, 224) 65%, rgb(52, 130, 227) 77%, rgb(55, 134, 229) 79%, rgb(66, 142, 233) 90%, rgb(71, 145, 235) 100%);
    overflow: hidden;
}

.start-menu footer {
    display: flex;
    align-self: flex-end;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    color: rgb(255, 255, 255);
    height: 36px;
    width: 100%;
    background: linear-gradient(rgb(66, 130, 214) 0%, rgb(59, 133, 224) 3%, rgb(65, 138, 227) 5%, rgb(65, 138, 227) 17%, rgb(60, 135, 226) 21%, rgb(55, 134, 228) 26%, rgb(52, 130, 227) 29%, rgb(46, 126, 225) 39%, rgb(35, 116, 223) 49%, rgb(32, 114, 219) 57%, rgb(25, 110, 219) 62%, rgb(23, 107, 216) 72%, rgb(20, 104, 213) 75%, rgb(17, 101, 210) 83%, rgb(15, 97, 203) 88%);
}

.start-menu .footer__item {
    padding: 3px 10px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.start-menu .footer__item:hover {
    background-color: rgba(60, 80, 210, 0.5);
}

.start-menu .footer__item__img {
    border-radius: 3px;
    margin-right: 5px;
    width: 22px;
    height: 22px;
}

.start-menu  .header__img {
    width: 40px;
    height: 40px;
    margin: 0px 5px;
    border-radius: 3px;
    border: 2px solid rgba(222, 222, 222, 0.8);
}

.start-menu .header__text {
    font-size: 14px;
    font-weight: 700;
    text-shadow: rgba(0, 0, 0, 0.7) 1px 1px;
}

.start-menu {
    align-items: center;
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background-color: #cac6cb;
    padding-top: 3px;
  }

.start-menu .menu-container {
    font-size: 11px;
    line-height: 14px;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    background-color: rgb(66, 130, 214);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    left: 0;
    bottom: 43px;
    position: absolute;
    padding: 4px;
    visibility: hidden;
    z-index: -1;
    opacity: 0;
}

 .start-menu .sub-menu {
    box-shadow: inset -1.5px -1.5px 0 0 #263238, inset 1.5px 1.5px 0 0 #fcfcfc, inset -3px -3px 0 0 #a099a1, inset 3px 3px 0 0 #dedcde;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.5px;
    z-index: 4;
    position: absolute;
    padding: 4px;
  }
  .start-menu .menu li {
    position: relative;
  }

#start:checked ~ main > .start-menu .menu-container {
    visibility: visible;
    z-index: unset;
    opacity: 1;
}

.main-menu {
    background-color: #fff;
}

.main-menu li {
    height: 50px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 4px;
    width: 200px;
    cursor: pointer;
}

.start-menu .main-menu label {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.start-menu .main-menu label:before {
    width: 50px;
    height: 50px;
}

.start-menu .main-menu label span {
    color: #000;
    margin-left: 8px;
}

.main-menu li:hover {
    background-color: rgb(47, 113, 205);
}

.main-menu li:hover label span{
    color: #fff;
}

.static-label.label-tweets:before, .static-label.label-tweets-small:before {
    background-image: url('/wp-content/uploads/2024/04/Group-14.png');
}

.static-label.label-chat:before, .static-label.label-chat-small:before {
    background-image: url('/wp-content/uploads/2024/04/chat-Copy-2.png');
}

.static-label.label-team:before, .static-label.label-team-small:before {
    background-image: url('/wp-content/uploads/2024/04/team-Copy-1.png');
}

.static-label.label-game:before, .static-label.label-game-small:before {
    background-image: url('/wp-content/uploads/2024/04/Card-Copy-1-e1713589354306.png');
}

.static-label.label-paint:before, .static-label.label-paint-small:before {
    background-image: url('/wp-content/uploads/2024/04/paint-1.png');
}

.static-label.label-fun:before, .static-label.label-fun-small:before {
    background-image: url('/wp-content/uploads/2024/04/kiss-Copy-1.png');
}

.static-label.label-contact:before, .static-label.label-contact-small:before {
    background-image: url('/wp-content/uploads/2024/04/phone-1.png');
}

.label-small:before {
    width: 30px;
    height: 30px;
    display: inline-block;
}

.label-small:before, .label-small:after {
    content: "";
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.start-menu .tabs {
    height: 100%;
    flex: 1 1 0%;
    overflow: hidden;
}

.start-menu .tabs .activate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
}

.start-menu .tabs label {
    position: relative;
    z-index: 1;
    width: 100%;
    justify-content: flex-start;
}

.footer-label {
    flex: 1 1 0%;
    max-width: 90px;
    color: rgb(255, 255, 255);
    border-radius: 2px;
    margin-top: 2px;
    padding: 0px 20px 0px 8px;
    height: 42px;
    font-size: 11px;
    background-color: rgb(60, 129, 243);
    box-shadow: rgba(0, 0, 0, 0.3) -1px 0px inset, rgba(255, 255, 255, 0.2) 1px 1px 1px inset;
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.footer-label span {
    margin-left: 5px;
}

#window-tweets .window-inside {
    width: 520px;
    height: 480px;
}

.window-inside, .alert-inside {
    max-width: calc(100vw - 24px);
    max-height: 100vh;
    min-width: 300px;
    min-height: 200px;
    overflow: hidden;
    resize: both;
}

.window-nav, .alert-nav {
    display: flex;
    height: 25px;
    line-height: 25px;
    font-weight: 700;
    font-size: 12px;
    font-family: "Noto Sans";
    text-shadow: rgb(0, 0, 0) 1px 1px;
    color: white;
    position: absolute;
    left: 3px;
    right: 3px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    -webkit-box-align: center;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(rgb(118, 151, 231) 0%, rgb(126, 158, 227) 3%, rgb(148, 175, 232) 6%, rgb(151, 180, 233) 8%, rgb(130, 165, 228) 14%, rgb(124, 159, 226) 17%, rgb(121, 150, 222) 25%, rgb(123, 153, 225) 56%, rgb(130, 169, 233) 81%, rgb(128, 165, 231) 89%, rgb(123, 150, 225) 94%, rgb(122, 147, 223) 97%, rgb(171, 186, 227) 100%);
}

.window-nav-buttons, .alert-nav .buttons {
    display: flex;
    width: 69px;
    right: 0;
    position: absolute;
    opacity: 0.6;
}

.window-nav-buttons label:before, .window-nav-buttons label:after {
    content: "";
    background-position: center center;
    background-size: contain;
    position: absolute;
}

.window-nav-buttons label, .alert-nav .buttons label {
    margin-right: 1px;
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.window-nav-buttons .minimize::before {
    left: 4px;
    top: 13px;
    height: 3px;
    width: 8px;
    background-color: white;
}

.window-nav-buttons .maximize::before {
    content: "";
    position: absolute;
    display: block;
    left: 4px;
    top: 4px;
    box-shadow: white 0px 3px inset, white 0px 0px 0px 1px inset;
    height: 12px;
    width: 12px;
}

.window-nav-buttons .maximize::after {
    content: "";
    position: absolute;
    display: block;
    visibility: hidden;
    left: 4px;
    top: 7px;
    box-shadow: white 0px 2px inset, white 0px 0px 0px 1px inset, rgb(19, 109, 255) 1px -1px;
    height: 8px;
    width: 8px;
    background-color: rgb(19, 109, 255);
}

.window-nav-buttons .close {
    box-shadow: rgb(218, 70, 0) 0px -1px 2px 1px inset;
    background-image: radial-gradient(circle at 90% 90%, rgb(204, 70, 0) 0%, rgb(220, 101, 39) 55%, rgb(205, 117, 70) 70%, rgb(255, 204, 178) 90%, white 100%);
}

.window-nav-buttons .close::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 2px;
    transform: rotate(45deg);
    height: 16px;
    width: 2px;
    background-color: white;
}

.window-nav-buttons .close::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 2px;
    transform: rotate(-45deg);
    height: 16px;
    width: 2px;
    background-color: white;
}

.window-nav h3 {
    display: flex;
    align-items: center;
    padding-left: 4px;
}

.window-nav h3 span {
    font-size: 12px;
    text-shadow: rgb(0, 0, 0) 1px 1px;
    color: white;
    font-weight: 400;
    margin-left: 5px;
}

.window-nav .label-small:before {
    width: 20px;
    height: 20px;
}

#tweets-maximize:checked ~ main #window-tweets,
#game-maximize:checked ~ main #window-game,
#chat-maximize:checked ~ main #window-chat,
#team-maximize:checked ~ main #window-team,
#paint-maximize:checked ~ main #window-paint,
#fun-maximize:checked ~ main #window-fun,
#contact-maximize:checked ~ main #window-contact {
    left: unset !important;
    top: 0 !important;
}

#tweets-minimize:checked ~ main #window-tweets,
#game-minimize:checked ~ main #window-game,
#chat-minimize:checked ~ main #window-chat,
#team-minimize:checked ~ main #window-team,
#paint-minimize:checked ~ main #window-paint,
#fun-minimize:checked ~ main #window-fun,
#contact-minimize:checked ~ main #window-contact {
    scale: 0;
}

#tweets.active ~ #tweets-minimize:not(:checked) ~ main #window-tweets, #tweets.active.no-tab ~ main #window-tweets {
    z-index: 10;
}

#tweets-maximize:checked ~ main #window-tweets .window-inside,
#game-maximize:checked ~ main #window-game .window-inside,
#chat-maximize:checked ~ main #window-chat .window-inside,
#team-maximize:checked ~ main #window-team .window-inside,
#paint-maximize:checked ~ main #window-paint .window-inside,
#fun-maximize:checked ~ main #window-fun .window-inside,
#contact-maximize:checked ~ main #window-contact .window-inside {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
}

#tweets-maximize:checked ~ main #window-tweets .window-inside .maximize:before,
#chat-maximize:checked ~ main #window-chat .window-inside .maximize:before,
#game-maximize:checked ~ main #window-game .window-inside .maximize:before,
#team-maximize:checked ~ main #window-team .window-inside .maximize:before,
#paint-maximize:checked ~ main #window-paint .window-inside .maximize:before,
#fun-maximize:checked ~ main #window-fun .window-inside .maximize:before,
#contact-maximize:checked ~ main #window-contact .window-inside .maximize:before {
    visibility: visible;
    top: 2px;
    left: 8px;
}

#tweets-maximize:checked ~ main #window-tweets .window-inside .maximize:before, #tweets-maximize:checked ~ main #window-tweets .window-inside .maximize:after,
#game-maximize:checked ~ main #window-game .window-inside .maximize:before, #game-maximize:checked ~ main #window-game .window-inside .maximize:after,
#chat-maximize:checked ~ main #window-chat .window-inside .maximize:before, #chat-maximize:checked ~ main #window-chat .window-inside .maximize:after,
#team-maximize:checked ~ main #window-team .window-inside .maximize:before, #team-maximize:checked ~ main #window-team .window-inside .maximize:after,
#paint-maximize:checked ~ main #window-paint .window-inside .maximize:before, #paint-maximize:checked ~ main #window-paint .window-inside .maximize:after,
#fun-maximize:checked ~ main #window-fun .window-inside .maximize:before, #fun-maximize:checked ~ main #window-fun .window-inside .maximize:after,
#contact-maximize:checked ~ main #window-contact .window-inside .maximize:before, #contact-maximize:checked ~ main #window-contact .window-inside .maximize:after {
    width: 9px;
    height: 9px;
    visibility: visible;
}

#tweets.active ~ #tweets-minimize:not(:checked) ~ main .tab-tweets label, #tweets.active.no-tab ~ main .tab-tweets label,
#game.active ~ #game-minimize:not(:checked) ~ main .tab-game label, #game.active.no-tab ~ main .tab-game label,
#chat.active ~ #chat-minimize:not(:checked) ~ main .tab-chat label, #chat.active.no-tab ~ main .tab-chat label,
#team.active ~ #team-minimize:not(:checked) ~ main .tab-team label, #team.active.no-tab ~ main .tab-team label,
#paint.active ~ #paint-minimize:not(:checked) ~ main .tab-paint label, #paint.active.no-tab ~ main .tab-paint label,
#fun.active ~ #fun-minimize:not(:checked) ~ main .tab-fun label, #fun.active.no-tab ~ main .tab-fun label,
#contact.active ~ #contact-minimize:not(:checked) ~ main .tab-contact label, #contact.active.no-tab ~ main .tab-contact label {
    background-color: rgb(30, 82, 183);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.7) 1px 0px 1px inset;
    z-index: 4;
}

#tweets.active ~ #tweets-minimize:not(:checked) ~ main #window-tweets .window-nav, #tweets.active.no-tab ~ main #window-tweets .window-nav,
#team.active ~ #team-minimize:not(:checked) ~ main #window-team .window-nav, #team.active.no-tab ~ main #window-team .window-nav,
#chat.active ~ #chat-minimize:not(:checked) ~ main #window-chat .window-nav, #chat.active.no-tab ~ main #window-chat .window-nav,
#game.active ~ #game-minimize:not(:checked) ~ main #window-game .window-nav, #game.active.no-tab ~ main #window-game .window-nav,
#paint.active ~ #paint-minimize:not(:checked) ~ main #window-paint .window-nav, #paint.active.no-tab ~ main #window-paint .window-nav,
#fun.active ~ #fun-minimize:not(:checked) ~ main #window-fun .window-nav, #fun.active.no-tab ~ main #window-fun .window-nav,
#contact.active ~ #contact-minimize:not(:checked) ~ main #window-contact .window-nav, #contact.active.no-tab ~ main #window-contact .window-nav {
    background: linear-gradient(rgb(0, 88, 238) 0%, rgb(53, 147, 255) 4%, rgb(40, 142, 255) 6%, rgb(18, 125, 255) 8%, rgb(3, 111, 252) 10%, rgb(2, 98, 238) 14%, rgb(0, 87, 229) 20%, rgb(0, 84, 227) 24%, rgb(0, 85, 235) 56%, rgb(0, 91, 245) 66%, rgb(2, 106, 254) 76%, rgb(0, 98, 239) 86%, rgb(0, 82, 214) 92%, rgb(0, 64, 171) 94%, rgb(0, 48, 146) 100%);
}

#tweets.active ~ #tweets-minimize:not(:checked) ~ main #window-tweets, #tweets.active.no-tab ~ main #window-tweets,
#chat.active ~ #chat-minimize:not(:checked) ~ main #window-chat, #chat.active.no-tab ~ main #window-chat,
#game.active ~ #game-minimize:not(:checked) ~ main #window-game, #game.active.no-tab ~ main #window-game,
#team.active ~ #team-minimize:not(:checked) ~ main #window-team, #team.active.no-tab ~ main #window-team,
#paint.active ~ #paint-minimize:not(:checked) ~ main #window-paint, #paint.active.no-tab ~ main #window-paint,
#fun.active ~ #fun-minimize:not(:checked) ~ main #window-fun, #fun.active.no-tab ~ main #window-fun,
#contact.active ~ #contact-minimize:not(:checked) ~ main #window-contact, #contact.active.no-tab ~ main #window-contact {
    background: rgb(8, 49, 217);
}

#tweets.active ~ #tweets-minimize:not(:checked) ~ main #window-tweets .window-nav-buttons, #tweets.active.no-tab ~ main #window-tweets .window-nav-buttons,
#chat.active ~ #chat-minimize:not(:checked) ~ main #window-chat .window-nav-buttons, #chat.active.no-tab ~ main #window-chat .window-nav-buttons,
#game.active ~ #game-minimize:not(:checked) ~ main #window-game .window-nav-buttons, #game.active.no-tab ~ main #window-game .window-nav-buttons,
#team.active ~ #team-minimize:not(:checked) ~ main #window-team .window-nav-buttons, #team.active.no-tab ~ main #window-team .window-nav-buttons,
#paint.active ~ #paint-minimize:not(:checked) ~ main #window-paint .window-nav-buttons, #paint.active.no-tab ~ main #window-paint .window-nav-buttons,
#fun.active ~ #fun-minimize:not(:checked) ~ main #window-fun .window-nav-buttons, #fun.active.no-tab ~ main #window-fun .window-nav-buttons,
#contact.active ~ #contact-minimize:not(:checked) ~ main #window-contact .window-nav-buttons, #contact.active.no-tab ~ main #window-contact .window-nav-buttons {
   opacity: 1;
}

#tweets.active ~ #tweets-minimize:not(:checked) ~ main .tab label:not(.tab-tweets label), #tweets.active.no-tab ~ main .tab label:not(.tab-tweets label),
#chat.active ~ #chat-minimize:not(:checked) ~ main .tab label:not(.tab-chat label), #chat.active.no-tab ~ main .tab label:not(.tab-chat label),
#game.active ~ #game-minimize:not(:checked) ~ main .tab label:not(.tab-game label), #game.active.no-tab ~ main .tab label:not(.tab-game label),
#team.active ~ #team-minimize:not(:checked) ~ main .tab label:not(.tab-team label), #team.active.no-tab ~ main .tab label:not(.tab-team label),
#fun.active ~ #fun-minimize:not(:checked) ~ main .tab label:not(.tab-fun label), #fun.active.no-tab ~ main .tab label:not(.tab-fun label),
#paint.active ~ #paint-minimize:not(:checked) ~ main .tab label:not(.tab-paint label), #paint.active.no-tab ~ main .tab label:not(.tab-paint label),
#contact.active ~ #contact-minimize:not(:checked) ~ main .tab label:not(.tab-contact label), #contact.active.no-tab ~ main .tab label:not(.tab-contact label)
{
    z-index: 0;
}

#tweets.active ~ #tweets-minimize:not(:checked) ~ main .activate:not(.tab-tweets .activate), #tweets.active.no-tab ~ main .activate:not(.tab-tweets .activate),
#chat.active ~ #chat-minimize:not(:checked) ~ main .activate:not(.tab-chat .activate), #chat.active.no-tab ~ main .activate:not(.tab-chat .activate),
#game.active ~ #game-minimize:not(:checked) ~ main .activate:not(.tab-game .activate), #game.active.no-tab ~ main .activate:not(.tab-game .activate),
#team.active ~ #team-minimize:not(:checked) ~ main .activate:not(.tab-team .activate), #team.active.no-tab ~ main .activate:not(.tab-team .activate),
#paint.active ~ #paint-minimize:not(:checked) ~ main .activate:not(.tab-paint .activate), #paint.active.no-tab ~ main .activate:not(.tab-paint .activate),
#fun.active ~ #fun-minimize:not(:checked) ~ main .activate:not(.tab-fun .activate), #fun.active.no-tab ~ main .activate:not(.tab-fun .activate),
#contact.active ~ #contact-minimize:not(:checked) ~ main .activate:not(.tab-contact .activate), #contact.active.no-tab ~ main .activate:not(.tab-contact .activate) {
    z-index: 1;
}

#window-paint .window-inside {
    width: 804px;
    height: 70vh;
}

#window-paint .window-content {
    flex: 1 1 0%;
    position: relative;
    margin-top: 25px;
    height: calc(100% - 25px);
}

#window-paint iframe, #paint-minimize:checked ~ main #window-paint iframe {
    display: none!important;
}

#paint.active ~ #paint-minimize:not(:checked) ~ main #window-paint, #paint:checked ~ #paint-minimize:not(:checked)~ main #window-paint iframe {
    display: block!important;
}

#window-shutdown-screen {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: -99;
    opacity: 0;
    background-color: #508fd9;
    color: #fff;
    flex-direction: column;
    display: none;
}

.shutdown-screen__top {
    border-image-source: linear-gradient(90deg, #004da3 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 50%, #004da3 100%);
    border-width: 0 0 4px 0;
}

.shutdown-screen__bottom {
    padding: 40px 80px 40px 40px;
    display: flex;
    justify-content: space-between;
    border-image-source: linear-gradient(90deg, #004da3 0%, #f09644 30%, #f09644 40%, #f09644 50%, #004da3 100%);
    border-width: 4px 0 0 0;
}

.shutdown-screen__center {
    flex: 1;
    display: flex;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) -21%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
    background-size: 700px 700px;
    background-position: -240px -210px;
    background-repeat: no-repeat;
    z-index: 0;
    align-items: center;
    justify-content: center;
}

.shutdown-screen__center .shutdown-text {
    display: flex;
    align-items: center;
}

.shutdown-screen__center .shutdown-text p {
    margin: 0px;
}

.shutdown-screen__center .dots-loading {
    align-items: center;
    display: flex;
    margin-left: 2px;
    margin-top: 7px;
}

.shutdown-screen__center .loading__dot {
    animation: dot ease-in-out 1s infinite;
    background-color: white;
    display: inline-block;
    height: 3px;
    margin: 2px;
    width: 3px;
    border-radius: 100%;
}

.shutdown-screen__center .loading__dot:nth-of-type(2) {
    animation-delay: 0.2s;
}

.shutdown-screen__center .loading__dot:nth-of-type(3) {
    animation-delay: 0.3s;
}

@keyframes dot {
    0% { background-color: rgb(183, 183, 183); transform: scale(1); }
    50% { background-color: #fff; transform: scale(1.3); }
    100% { background-color: rgb(183, 180, 180); transform: scale(1); }
  }

.shutdown-screen__top, .shutdown-screen__bottom {
    background-color: #004da3;
    flex-basis: 12.5%;
    border-style: solid;
    border-image-slice: 1;
}

#shutdown-screen:checked ~ main > #window-shutdown-screen {
    visibility: visible;
    opacity: 1;
    z-index: 101;
    display: flex;
}

.startup-screen {
    position: absolute;
    z-index: 103;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left:0;
    background: #0a0d0a;
    display: block;
}

.startup-screen.hidden {
    opacity: 0.0 ;
    visibility: hidden;
    z-index: -99;
  transition: all 0.5s ease-in-out ;
  display: none;
}

.startup-screen-loader-wrapper {
    position: absolute;
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    top: 0;
    left: 0;
    opacity: 0;
}

.startup-screen-entrance {
    position: absolute;
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    top: -40px;
    left: 0;
}

.startup-screen-entrance {
    z-index: 1;
    background: #0a0d0a;
}

.startup-screen-entrance.hidden {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
}

.preloader-video {
    position: absolute;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

#preloader-video-mobile {
    display: none;
}

.pn-preloader-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    max-width: 550px;
}

#pn-preloader-logo {
    display: block;
    max-width: calc(100% - 40px);
    width: 100%;
}

.pn-preloader-footer {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    max-width: calc(100% - 40px);
    width: 100%;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
}

#pn-preloader-copyright, #pn-preloader-brand {
    display: block;
    width: 100%;
    max-width: 300px;
}

#preloader-button {
    width: 150px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 5px;
    border: 0;
    color: #000;
    line-height: 30px;
    background-image: linear-gradient(rgb(141 141 141), rgb(252 252 252));
    font-family: "MS Sans Serif", Tahoma, Helvetica, Arial, sans-serif;
}

#preloader-button.hidden {
    display: none;
}

#virus-screen {
    position: absolute;
    z-index: -99;
    opacity: 0;
    visibility: hidden;
    display: none;
}

#window-fun .window-inside {
    width: 620px;
    height: auto;
    padding: 2px;
}

#window-fun .window-content {
    height: calc(100% - 53px);
    width: 100%;
    background: #d69700;
    margin-top: 23px;
    padding: 30px 0;
}

#window-fun .fun-title, #window-fun .fun-subtitle {
    font-size: 2em;
    color: #000;
    font-weight: bold;
    text-align: center;
}

#window-fun .fun-img {
    width: 80%;
    margin: 20px auto;
    display: block;
}

#window-fun #fun-btn {
    width: 250px;
    margin: 20px auto 0 auto;
    display: block;
    height: 40px;
    border-radius: 10px;
    color: #000;
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
    cursor: pointer;
    background-image: linear-gradient(rgb(141 141 141), rgb(252 252 252));
    font-family: "MS Sans Serif", Tahoma, Helvetica, Arial, sans-serif;
}

.restart-button {
    width: 250px;
    margin: 20px auto 0 auto;
    display: block;
    height: 40px;
    border-radius: 10px;
    color: #000;
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
    cursor: pointer;
    background-image: linear-gradient(rgb(141 141 141), rgb(252 252 252));
    font-family: "MS Sans Serif", Tahoma, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}

#error-blue-screen {
    position: absolute;
    background: blue;
    font-family: "MS Sans Serif", Tahoma, Helvetica, Arial, sans-serif;
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100vw;
    z-index: -99;
    opacity: 0;
    display: none;
    visibility: hidden;
    justify-content: center;
}

.restart-button .blink {
    display: inline-block;
    -webkit-animation: blink 1s cubic-bezier(1, 0, 0, 1) infinite forwards;
    animation: blink 1s cubic-bezier(1, 0, 0, 1) infinite forwards;
}

#virus-screen-video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    display: block;
}

@keyframes blink {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

#preloader-button:hover, #fun-btn:hover, .restart-button:hover {
    border: 2px solid;
}

#virus-screen.active {
    z-index: 103;
    opacity: 1;
    visibility: visible;
    display: block;
}

#error-blue-screen.active {
    z-index: 103;
    opacity: 1;
    visibility: visible;
    display: flex;
}

#error-blue-screen .content {
    padding: 0 20px;
}

#error-blue-screen .content p {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.4;
}

.pn-preloader-loader-bars.hidden {
    display: none;
}

.pn-preloader-loader-bars {
    border: 1px solid #fff;
    border-radius: 4px;
    height: 20px;
    width: 200px;
    overflow: hidden;
    margin-top: 20px;
    display: block;
}

.pn-preloader-loader-bars .loader-bars {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 40px;
    animation-name: loading-bars;
    animation-duration: 2.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

.pn-preloader-loader-bars .loader-bars span,
.pn-preloader-loader-bars .loader-bars span::before,
.pn-preloader-loader-bars .loader-bars span::after {
  content: '';
  display: block;
  background-color: #0059c3;
  flex: 0 0 12px;
  height: 80%;
}

.pn-preloader-loader-bars .loader-bars::before {
    background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 20%,
    rgba(255, 255, 255, 0.8) 30%,
    rgba(255, 255, 255, 0.8) 40%,
    rgba(148, 187, 233, 0) 100%
    );
}

.pn-preloader-loader-bars .loader-bars span {
    background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.8) 60%,
    rgba(148, 187, 233, 0) 100%
    );
}

.pn-preloader-loader-bars .loader-bars::after {
    background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 60%,
    rgba(255, 255, 255, 0.8) 70%,
    rgba(255, 255, 255, 0.8) 80%,
    rgba(148, 187, 233, 0) 100%
    );
}

@keyframes loading-bars {
    0% {
      left: -20%;
    }
    20% {
      left: 0%;
    }
    80% {
      left: 100%;
    }
    100% {
      left: 120%;
    }
  }
  

#music-player-audio-title {
    position: absolute;
    top: 48px;
    left: 70px;
    opacity: 0.7;
}

#music-player-audio-play {
    height: 30px;
    width: 32px;
    border-radius: 100%;
    top: 32px;
    position: absolute;
    left: 15px;
    cursor: pointer;
    background: transparent;
    border: none;
}

#music-player-audio-pause {
    height: 30px;
    width: 32px;
    border-radius: 100%;
    top: 66px;
    position: absolute;
    left: 14px;
    cursor: pointer;
    background: transparent;
    border: none;
}

#music-player-bars {
    position: absolute;
    height: 14px;
    width: 100px;
    top: 58px;
    left: 78px;
    display: none;
}

#music-player-bars.active {
    display: block;
}

#music-player-audio-title.hidden {
    display: none;
}
  
#music-player-bars .bar {
    position: absolute;
    bottom: 0px;
    height: 3px;
    width: 1px;
    background: #9e9e9e;      
    animation: sound 0ms -800ms linear infinite alternate;
    transform: translateY(50%);
  }
  
  @keyframes sound {
      0% {
         opacity: .35;
          height: 3px; 
      }
      100% {
          opacity: 1;       
          height: 28px;        
      }
  }

@media only screen and (max-width: 767px) {
    #icons {
        padding-top: 20px;
        height: 90%;
    }

    #preloader-video-mobile {
        display: block;
    }

    #preloader-video {
        display: none;
    }

    .pn-preloader-footer {
        align-items: center;
        justify-content: center;
    }

    .desktop-icon:before {
        width: 60px;
        height: 40px;
        margin-bottom: 6px;
    }
}


@media only screen and (max-width: 500px) {
    #desktop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: calc(100vh - 40px);
        background-image: url("/wp-content/uploads/2024/04/PN_mobile1.png");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }
    #music:checked ~ main #window-music {
        width: 250px;
        height: 130px;
        bottom: 200px;
        right: 5px;
    }

    #music:checked ~ main #window-music .window-inside {
        min-width: 250px;
        min-height: 130px;
    }

    .window-nav.window-nav-music {
        height: 20px;
    }

    .desktop-icon {
        width: 76;
        margin-left: 10px;
    }

    #music-player-audio-title {
        top: 28px;
        left: 50px;
        font-size: 12px;
    }

    #music-player-bars {
        width: 140px;
        top: 48px;
        left: 50px;
        overflow: hidden;
    }

    #music-player-audio-play {
        height: 19px;
        width: 22px;
        top: 25px;
        left: 10px;
    }
    #music-player-audio-pause {
        height: 19px;
        width: 22px;
        top: 48px;
        left: 10px;
    }
}