#se30 {
    width: 275px;
    height: 223px;
    position: relative;
    display: block;
    image-rendering: pixelated;
    float: right;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
#compy {
    background-image: url("../images/macblank.png");
    width: 268px;
    height: 223px;
    position: relative;
    display: block;
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 800px) {
    #se30 {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
#screen {
    position: absolute;
    transform-origin: center;
    transform: scaleY(0) skewy(-36deg);
    background-image: url("../images/kbsprite.png");
    background-position: -171px 0px;
    width: 61px;
    height: 70px;
    left: 94px;
    top: 35px;
    transition: transform ease-out 0.15s;
    z-index: 3;
}
#se30:has(#power:checked) #screen {
    transform: scaleY(1) skewy(0deg);
}
#mousepad {
    position: absolute;
    left: 180px;
    top: 66px;
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.resizable {
    overflow: scroll;
    resize: both;
    min-width: 65px;
    min-height: 65px;
    width: 75px;
    height: 100px;
    max-width: 97px;
    max-height: 118px;
    background-color: white;
    border: none;
    opacity: 0.01;
    position: relative;
    cursor: grab;
}
.arrowcursor {
    cursor: default;
    width: 100%;
    height: 100%;
}
#mousecontainer {
    position: relative;
    margin-left: -40px;
    margin-top: -30px;
    pointer-events: none;
}
#mouse {
    display: block;
    position: relative;
    background-image: url("../images/kbsprite.png");
    background-position: -171px -70px;
    top: 0;
    left: 0;
    width: 46px;
    height: 35px;
    z-index: 1;
}
#mousebutton {
    position: absolute;
    display: block;
    background-image: url("../images/kbsprite.png");
    cursor: pointer;
    background-position: -150px 0px;
    width: 21px;
    height: 9px;
    left: 7px;
    top: 2px;
    z-index: 5;
    pointer-events: auto;
}
#mousebutton:active {
    background-position-y: -10px;
}
#cursorcontainer {
    position: relative;
    margin-left: -22px;
    margin-top: -133px;
    transform: skewY(-19deg) scale(3);
    z-index: 10;
}
#cursor {
    position: relative;
    background-image: url("../images/kbsprite.png");
    background-position: -218px -71px;
    width: 4px;
    height: 4px;
    display: none;
    z-index: 10;
    transform: scale(0.3333) skewY(19deg);
}
#se30:has(#power:checked) #cursor {
    display: block;
    z-index: 10;
}
@media (-moz-touch-enabled: 1), (pointer: coarse) {
    #mousebutton:hover {
        background-position-y: -10px;
    }
}
#power {
    display: none;
}
#powerbutton {
    position: absolute;
    display: block;
    background-image: url("../images/kbsprite.png");
    cursor: pointer;
    background-position: -152px -20px;
    width: 18px;
    height: 9px;
    left: 107px;
    top: 168px;
    z-index: 3;
}
#powerbutton:hover {
    background-position-y: -30px;
}
#powerbutton:active {
    background-position-y: -40px;
}
.key {
    position: absolute;
    display: block;
    background-image: url("../images/kbsprite.png");
    cursor: pointer;
    z-index: 4;
}
.toprow {
    background-position-y: 0px !important;
}
.toprow:hover {
    background-position-y: -10px !important;
}
.toprow:active {
    background-position-y: -20px !important;
}
.midtoprow:hover {
    background-position-y: -41px !important;
}
.midtoprow:active {
    background-position-y: -52px !important;
}
.midrow:hover {
    background-position-y: -74px !important;
}
.midrow:active {
    background-position-y: -85px !important;
}
.midbotrow:hover {
    background-position-y: -108px !important;
}
.midbotrow:active {
    background-position-y: -120px !important;
}
.botrow:hover {
    background-position-y: -148px !important;
}
.botrow:active {
    background-position-y: -164px !important;
}
.numpad:hover {
    background-position-y: -191px !important;
}
.numpad:active {
    background-position-y: -205px !important;
}
#delete {
    background-position: -138px 0px;
    width: 12px;
    height: 10px;
    left: 161px;
    top: 164px;
}
#equals {
    background-position: -127px 0px;
    width: 11px;
    height: 10px;
    left: 155px;
    top: 166px;
}
#minus {
    background-position: -117px 0px;
    width: 10px;
    height: 10px;
    left: 150px;
    top: 167px;
}
#zero {
    background-position: -106px 0px;
    width: 11px;
    height: 10px;
    left: 144px;
    top: 168px;
}
#nine {
    background-position: -95px 0px;
    width: 11px;
    height: 10px;
    left: 138px;
    top: 170px;
}
#eight {
    background-position: -84px 0px;
    width: 11px;
    height: 10px;
    left: 132px;
    top: 171px;
}
#seven {
    background-position: -74px 0px;
    width: 10px;
    height: 10px;
    left: 127px;
    top: 173px;
}
#six {
    background-position: -63px 0px;
    width: 11px;
    height: 10px;
    left: 121px;
    top: 174px;
}
#five {
    background-position: -53px 0px;
    width: 10px;
    height: 10px;
    left: 116px;
    top: 175px;
}
#four {
    background-position: -42px 0px;
    width: 11px;
    height: 10px;
    left: 110px;
    top: 177px;
}
#three {
    background-position: -31px 0px;
    width: 11px;
    height: 10px;
    left: 104px;
    top: 178px;
}
#two {
    background-position: -21px 0px;
    width: 10px;
    height: 10px;
    left: 99px;
    top: 180px;
}
#one {
    background-position: -10px 0px;
    width: 11px;
    height: 10px;
    left: 93px;
    top: 181px;
}
#tilde {
    background-position: 0px 0px;
    width: 10px;
    height: 10px;
    left: 88px;
    top: 182px;
}
#returntop {
    background-position: -141px -30px;
    width: 10px;
    height: 10px;
    left: 168px;
    top: 169px;
}
#rbracket {
    background-position: -130px -30px;
    width: 11px;
    height: 10px;
    left: 161px;
    top: 170px;
}
#lbracket {
    background-position: -120px -30px;
    width: 10px;
    height: 10px;
    left: 156px;
    top: 171px;
}
#p {
    background-position: -109px -30px;
    width: 11px;
    height: 11px;
    left: 151px;
    top: 173px;
}
#o {
    background-position: -98px -30px;
    width: 11px;
    height: 10px;
    left: 145px;
    top: 174px;
}
#i {
    background-position: -88px -30px;
    width: 10px;
    height: 11px;
    left: 140px;
    top: 175px;
}
#u {
    background-position: -77px -30px;
    width: 11px;
    height: 10px;
    left: 134px;
    top: 177px;
}
#y {
    background-position: -66px -30px;
    width: 11px;
    height: 10px;
    left: 128px;
    top: 178px;
}
#t {
    background-position: -55px -30px;
    width: 11px;
    height: 10px;
    left: 122px;
    top: 180px;
}
#r {
    background-position: -44px -30px;
    width: 11px;
    height: 10px;
    left: 116px;
    top: 181px;
}
#e {
    background-position: -34px -30px;
    width: 10px;
    height: 10px;
    left: 111px;
    top: 183px;
}
#w {
    background-position: -23px -30px;
    width: 11px;
    height: 10px;
    left: 105px;
    top: 184px;
}
#q {
    background-position: -13px -30px;
    width: 10px;
    height: 11px;
    left: 100px;
    top: 185px;
}
#tab {
    background-position: 0px -30px;
    width: 13px;
    height: 11px;
    left: 92px;
    top: 187px;
}
#returnbot {
    background-position: -138px -63px;
    width: 13px;
    height: 11px;
    left: 169px;
    top: 174px;
}
#kvothe {
    background-position: -127px -63px;
    width: 11px;
    height: 10px;
    left: 163px;
    top: 176px;
}
#colon {
    background-position: -116px -63px;
    width: 11px;
    height: 10px;
    left: 157px;
    top: 177px;
}
#l {
    background-position: -106px -63px;
    width: 10px;
    height: 10px;
    left: 152px;
    top: 179px;
}
#k {
    background-position: -95px -63px;
    width: 11px;
    height: 10px;
    left: 146px;
    top: 180px;
}
#j {
    background-position: -84px -63px;
    width: 11px;
    height: 11px;
    left: 141px;
    top: 181px;
}
#h {
    background-position: -73px -63px;
    width: 10px;
    height: 10px;
    left: 135px;
    top: 183px;
}
#g {
    background-position: -62px -63px;
    width: 11px;
    height: 10px;
    left: 129px;
    top: 184px;
}
#f {
    background-position: -52px -63px;
    width: 10px;
    height: 10px;
    left: 124px;
    top: 186px;
}
#d {
    background-position: -41px -63px;
    width: 11px;
    height: 10px;
    left: 118px;
    top: 187px;
}
#s {
    background-position: -30px -63px;
    width: 11px;
    height: 11px;
    left: 112px;
    top: 188px;
}
#a {
    background-position: -19px -63px;
    width: 11px;
    height: 10px;
    left: 106px;
    top: 190px;
}
#caps {
    background-position: 0px -63px;
    width: 15px;
    height: 11px;
    left: 96px;
    top: 191px;
}

#rshift {
    background-position: -123px -96px;
    width: 18px;
    height: 12px;
    left: 168px;
    top: 178px;
}
#slash {
    background-position: -112px -96px;
    width: 11px;
    height: 10px;
    left: 162px;
    top: 181px;
}
#dot {
    background-position: -101px -96px;
    width: 11px;
    height: 10px;
    left: 156px;
    top: 182px;
}
#comma {
    background-position: -91px -96px;
    width: 10px;
    height: 10px;
    left: 151px;
    top: 184px;
}
#m {
    background-position: -80px -96px;
    width: 11px;
    height: 10px;
    left: 145px;
    top: 185px;
}
#n {
    background-position: -70px -96px;
    width: 10px;
    height: 11px;
    left: 140px;
    top: 186px;
}
#b {
    background-position: -59px -96px;
    width: 11px;
    height: 10px;
    left: 134px;
    top: 188px;
}
#v {
    background-position: -48px -96px;
    width: 10px;
    height: 10px;
    left: 128px;
    top: 189px;
}
#c {
    background-position: -38px -96px;
    width: 10px;
    height: 10px;
    left: 123px;
    top: 191px;
}
#x {
    background-position: -28px -96px;
    width: 10px;
    height: 10px;
    left: 118px;
    top: 192px;
}
#z {
    background-position: -17px -96px;
    width: 11px;
    height: 12px;
    left: 112px;
    top: 193px;
}
#lshift {
    background-position: 0px -96px;
    width: 17px;
    height: 12px;
    left: 100px;
    top: 195px;
}

#up {
    background-position: -115px -132px;
    width: 11px;
    height: 10px;
    left: 179px;
    top: 181px;
}
#down {
    background-position: -104px -132px;
    width: 11px;
    height: 10px;
    left: 173px;
    top: 183px;
}
#right {
    background-position: -93px -132px;
    width: 11px;
    height: 10px;
    left: 167px;
    top: 184px;
}
#left {
    background-position: -83px -132px;
    width: 10px;
    height: 10px;
    left: 162px;
    top: 186px;
}
#bslash {
    background-position: -72px -132px;
    width: 11px;
    height: 10px;
    left: 156px;
    top: 187px;
}
#rspace {
    background-position: -52px -132px;
    width: 20px;
    height: 16px;
    left: 141px;
    top: 189px;
}
#lspace {
    background-position: -36px -132px;
    width: 16px;
    height: 16px;
    left: 125px;
    top: 193px;
}
#command {
    background-position: -23px -132px;
    width: 13px;
    height: 11px;
    left: 117px;
    top: 196px;
}
#opt {
    background-position: -12px -132px;
    width: 11px;
    height: 10px;
    left: 111px;
    top: 198px;
}
#ctrl {
    background-position: 0px -132px;
    width: 12px;
    height: 10px;
    left: 104px;
    top: 200px;
}

#numtimes {
    background-position: 0px -177px;
    width: 11px;
    height: 11px;
    left: 193px;
    top: 156px;
}
#numdiv {
    background-position: -11px -177px;
    width: 11px;
    height: 10px;
    left: 187px;
    top: 157px;
}
#numeq {
    background-position: -36px -177px;
    width: 11px;
    height: 10px;
    left: 182px;
    top: 159px;
}
#numclear {
    background-position: -47px -177px;
    width: 11px;
    height: 10px;
    left: 176px;
    top: 160px;
}

#numminus {
    background-position: 0px -177px;
    width: 11px;
    height: 11px;
    left: 197px;
    top: 161px;
}
#numnine {
    background-position: -11px -177px;
    width: 11px;
    height: 10px;
    left: 191px;
    top: 162px;
}
#numeight {
    background-position: -36px -177px;
    width: 11px;
    height: 10px;
    left: 186px;
    top: 164px;
}
#numseven {
    background-position: -47px -177px;
    width: 11px;
    height: 10px;
    left: 180px;
    top: 165px;
}

#numplus {
    background-position: 0px -177px;
    width: 11px;
    height: 11px;
    left: 201px;
    top: 166px;
}
#numsix {
    background-position: -11px -177px;
    width: 10px;
    height: 10px;
    left: 195px;
    top: 167px;
}
#numfive {
    background-position: -36px -177px;
    width: 11px;
    height: 10px;
    left: 190px;
    top: 169px;
}
#numfour {
    background-position: -47px -177px;
    width: 11px;
    height: 10px;
    left: 184px;
    top: 170px;
}

/* enter? */
#numthree {
    background-position: -11px -177px;
    width: 11px;
    height: 10px;
    left: 199px;
    top: 171px;
}
#numtwo {
    background-position: -36px -177px;
    width: 11px;
    height: 10px;
    left: 194px;
    top: 173px;
}
#numone {
    background-position: -47px -177px;
    width: 11px;
    height: 10px;
    left: 188px;
    top: 174px;
}

#numenter {
    background-position: -22px -177px;
    width: 14px;
    height: 14px;
    left: 205px;
    top: 170px;
}
#numdot {
    background-position: -11px -177px;
    width: 11px;
    height: 10px;
    left: 203px;
    top: 175px;
}
#numzero {
    background-position: -58px -177px;
    width: 17px;
    height: 11px;
    left: 192px;
    top: 177px;
}

#returntop:hover {
    background-position-y: -41px !important;
}
#returntop:active {
    background-position-y: -52px !important;
}
#returnbot:hover {
    background-position-y: -74px !important;
}
#returnbot:active {
    background-position-y: -85px !important;
}
#se30:has(#returnbot:hover) #returntop {
    background-position-y: -41px !important;
}
#se30:has(#returnbot:active) #returntop {
    background-position-y: -52px !important;
}
#se30:has(#returntop:hover) #returnbot {
    background-position-y: -74px !important;
}
#se30:has(#returntop:active) #returnbot {
    background-position-y: -85px !important;
}
#lspace:hover {
    background-position-y: -148px !important;
}
#rspace:hover {
    background-position-y: -148px !important;
}
#lspace:active {
    background-position-y: -161px !important;
}
#rspace:active {
    background-position-y: -161px !important;
}
#se30:has(#rspace:hover) #lspace {
    background-position-y: -148px !important;
}
#se30:has(#rspace:active) #lspace {
    background-position-y: -161px !important;
}
#se30:has(#lspace:hover) #rspace {
    background-position-y: -148px !important;
}
#se30:has(#lspace:active) #rspace {
    background-position-y: -161px !important;
}