@import "https://fonts.googleapis.com/css2?family=VT323&display=swap";
.retro-card{box-sizing:border-box;background:#efefef;border:6px solid #bdbdbd;border-radius:0;max-width:100%;padding:0;display:inline-block;box-shadow:0 10px 24px #0000001f,inset 0 2px #ffffff80}.retro-computer-container .retro-card{padding:2rem!important}@media (max-width:768px){.retro-computer-container .retro-card{padding:1.5rem!important}}@media (prefers-color-scheme:dark){.retro-card{background:0 0}}.dark .retro-card{background:0 0}@media (max-width:425px){.retro-card{border-width:4px;padding:0}}.retro-computer *{box-sizing:border-box}.retro-computer{justify-content:center;width:100%;display:flex;position:relative}.retro-computer .center{transform-origin:top;width:350px;max-width:min(92vw,100%);font-family:VT323,monospace;position:relative}@media (max-width:425px){.retro-computer .center{transform:scale(.96)}}@media (max-width:390px){.retro-computer .center{transform:scale(.92)}}@media (max-width:360px){.retro-computer .center{transform:scale(.88)}}@media (max-width:340px){.retro-computer .center{transform:scale(.84)}}.retro-computer .screenBox{background-color:#d1d1d1;border-radius:1%;width:300px;height:270px;position:relative;left:25px}.retro-computer .behind{z-index:0;background-color:#bdbdbd;border-radius:2%/50%;width:316px;height:200px;position:absolute;top:16px;left:17px}.retro-computer .frame{z-index:1;background-color:#e3e3e3;border:2px solid #888;border-radius:4px;width:284px;height:254px;position:absolute;top:8px;left:8px}.retro-computer .screenBox2{background-color:#999;border-bottom:2px solid #888;width:100%;height:214px;position:absolute}.retro-computer .screenBox3{background-color:#7a7a7a;border-radius:30%/2%;width:268px;height:198px;position:absolute;top:8px;left:8px}.retro-computer .screenEffect{background:repeating-linear-gradient(#171717,#171717 1px,#121212 1px 2px)}.retro-computer .screen{cursor:text;background-color:#171717;border-radius:50%/8%;width:256px;height:186px;position:absolute;top:6px;left:6px;overflow:hidden;box-shadow:inset 0 12px 10px #0d0d0d}.retro-computer .bottomFrame{background-color:#e3e3e3;border-top:2px solid #888;width:100%;height:32px;position:absolute;bottom:0}.retro-computer .fan{background:repeating-linear-gradient(90deg,#fff,#fff 3px,#333 3px 6px);width:72px;height:100%;position:absolute}.retro-computer .ibmLogo{letter-spacing:2px;text-align:center;text-transform:uppercase;color:#0000;background:repeating-linear-gradient(#6a6a6a 0 1.4px,#ffffffd9 1.4px 2.8px);opacity:.85;-webkit-background-clip:text;background-clip:text;width:90px;height:20px;font-family:VT323,monospace;font-weight:900;line-height:20px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.retro-computer .logo{width:40px;position:absolute;top:8px;left:130px}.retro-computer .screenBox .powerButton{cursor:pointer;background-color:#999;border:1px solid #7a7a7a;width:20px;height:20px;position:absolute;top:5px;left:250px}.retro-computer .powerIcon{border:1px solid #555;border-radius:50%;width:10px;height:10px;position:absolute;top:4.5px;left:4px}.retro-computer .screenBox .powerLight{border-radius:50%;width:6px;height:6px;position:absolute;top:13px;left:230px}.retro-computer .lightOn{background-color:#1bcf60;box-shadow:0 1px 5px #1bcf60}.retro-computer .lightOff{background-color:#fa4646;box-shadow:0 1px 5px #fa4646}.retro-computer .screenFoot{background-color:#bdbdbd;width:220px;height:15px;margin:0;position:relative;left:65px}.retro-computer .computer{background-color:#d1d1d1;border-radius:3px;width:340px;height:80px;margin:0;position:relative;left:5px}.retro-computer .computerFrame{background-color:#e3e3e3;border:2px solid #888;border-radius:3px;width:328px;height:64px;position:absolute;top:6px;left:6px}.retro-computer .computerFan1,.retro-computer .computerFan2{background:repeating-linear-gradient(90deg,#fff,#fff 3px,#333 3px 6px);width:80px;height:21.5px;position:absolute;top:7px;left:5px}.retro-computer .computerFan2{top:35.5px}.retro-computer .screw1{top:12px;left:95px}.retro-computer .screw2{top:42px;left:95px}.retro-computer .screw3{top:12px;left:255px}.retro-computer .screw4{top:12px;left:278px}.retro-computer .screw5{top:12px;left:303px}.retro-computer div[class^=screw]{background-color:#222;border-radius:50%;width:8px;height:8px;position:absolute}.retro-computer .computerFrame2{box-sizing:border-box;background-color:#999;border-radius:3px;width:130px;height:46px;padding:6px;position:absolute;top:7px;left:110px;box-shadow:inset 0 0 0 2px #ffffff26}.retro-computer .computerFrame2:after{content:"";background:#7a7a7a;border-radius:1px;height:2px;position:absolute;top:26px;left:6px;right:6px}.retro-computer .floppy{background-color:#222;height:22px;position:absolute;top:6px;left:6px;right:6px}.retro-computer .fingerGrip{background-color:#0d0d0d;border-radius:3px;width:30px;height:20px;position:absolute;top:0;left:50%;transform:translate(-50%)}.retro-computer .slot{background-color:#000;border-radius:3px;height:6px;position:absolute;top:8px;left:8px;right:8px}.retro-computer .socket1{background-color:#000;width:calc(50% - 9px);height:12px;position:absolute;top:30px;left:6px}.retro-computer .socket2{background-color:#000;width:calc(50% - 9px);height:12px;position:absolute;top:30px;right:6px}.retro-computer .computer .powerButton{background-color:#333;width:35px;height:26px;position:absolute;top:30px;left:255px}.retro-computer .buttonSlide{background-color:#111;border-radius:1px;width:90%;height:12px;position:absolute;top:2px;left:5%}.retro-computer .computerButton{cursor:pointer;background-color:#fa4646;width:45%;height:8px;transition:left .25s;position:absolute;top:2px}.retro-computer .computerButtonOff{left:8%}.retro-computer .computerButtonOn{background-color:#1bcf60;left:48%}.retro-computer .offIndicator{border:1px solid #fff;border-radius:50%;width:4px;height:4px;position:absolute;top:16px;left:5px}.retro-computer .onIndicator{border-right:1px solid #fff;width:0;height:6px;position:absolute;top:16px;left:28px}.retro-computer .computer .powerLight{border-radius:50%;width:6px;height:6px;position:absolute;top:38px;right:13px}.retro-computer .output{color:#3f6;width:95%;height:80%;font-family:VT323,monospace;font-size:12px;display:none;position:absolute;top:20px;left:10px;overflow:auto}.retro-computer .popup{text-align:center;border:1px solid #3f6;border-top-width:5px;width:110px;height:32px;margin:auto;line-height:30px;animation:1s infinite popup;display:block;position:absolute;inset:0}@keyframes popup{0%{opacity:1}50%{opacity:0}to{opacity:1}}