*{
    box-sizing: border-box;
}

.main {
    width: 100%;
    height: 100%;
}

/* ====================
        LOWERPLATE
======================= */

.lowerplate {
    z-index: 100;
    position: absolute;
    top: 45%;
    left: 30%;
    width: 50%;
    height: 30%;
    border-radius: 15px;
    background-color: rgb(221, 222, 224);
}

.keyboard {
    z-index: 99;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 50%;
    border-radius: 5px;
    background-color: rgb(211, 216, 216);
    box-shadow: 2px -2px 1px rgb(157, 157, 157);
}

.keyline-1 {
    position: absolute;
    top: 2%;
    width: 100%;
    height: 10%;
    /* border: 1px solid black; */
}

.keyline-2 {
    position: absolute;
    top: 14%;
    width: 100%;
    height: 15%;
    /* border: 1px solid black; */
}

.keyline-3 {
    position: absolute;
    top: 32%;
    width: 100%;
    height: 15%;
    /* border: 1px solid black; */
}

.keyline-4 {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 15%;
    /* border: 1px solid black; */
}

.keyline-5 {
    position: absolute;
    top: 67%;
    width: 100%;
    height: 15%;
    /* border: 1px solid black; */
}

.keyline-6 {
    position: absolute;
    top: 85%;
    width: 100%;
    height: 13%;
    /* border: 1px solid black; */
}

/* esc등 맨 위 키 */
.keyboard-1 { 
    position: absolute;
    width: 6.2%;
    height: 100%;
    border-radius: 5px;
    background-color: rgb(41, 41, 41);
    color: white;
    font-size: 0.5rem;
    text-align: center;
}

/* 일반키 */
.keyboard-2 {
    position: absolute;
    width: 5.7%;
    height: 100%;
    border-radius: 5px;
    background-color: rgb(41, 41, 41);
    color: white;
    font-size: 0.5rem;
    text-align: center;
}

.clicked {
    background-color: black;
}

#c27 { left: 1.5%; }
#c112 { left: 8.7%; }
#c113 { left: 15.9%; }
#c114 { left: 23.1%; }
#c115 { left: 30.3%; }
#c116 { left: 37.5%; }
#c117 { left: 44.7%; }
#c118 { left: 51.9%; }
#c119 { left: 59.1%; }
#c120 { left: 66.3%; }
#c121 { left: 73.5%; }
#c122 { left: 80.7%; }
#c123 { left: 87.9%; }
#power { width: 3.5%; left: 95%; }

#c192 { left: 1.5%; }
#c49 { left: 8.2%; }
#c50 { left: 14.9%; }
#c51 { left: 21.6%; }
#c52 { left: 28.3%; }
#c53 { left: 35%; }
#c54 { left: 41.7%; }
#c55 { left: 48.4%; }
#c56 { left: 55.1%; }
#c57 { left: 61.8%; }
#c48 { left: 68.5%; }
#c189 { left: 75.2%; }
#c187 { left: 81.9%; }
#backspace { width: 9.5%; left: 89%; }

#tab { width: 9%; left: 1.5%; }
#c81 { left: 11.6%; }
#c87 { left: 18.3%; }
#c69 { left: 25.8%; }
#c82 { left: 32.5%; }
#c84 { left: 39.2%; }
#c89 { left: 45.9%; }
#c85 { left: 52.6%; }
#c73 { left: 59.3%; }
#c79 { left: 66%; }
#c80 { left: 72.7%; }
#c219 { left: 79.4%; }
#c221 { left: 86.1%; }
#c220 { left: 92.8%; }

#c20 { width: 10.5%; left: 1.5%; }
#c65 { left: 13%; }
#c83 { left: 19.8%; }
#c68 { left: 26.6%; }
#c70 { left: 33.4%; }
#c71 { left: 40.2%; }
#c72 { left: 47%; }
#c74 { left: 53.8%; }
#c75 { left: 60.6%; }
#c76 { left: 67.4%; }
#c186 { left: 74.2%; }
#c222 { left: 81%; }
#c13 { width: 10.5%; left: 88%; }

#rshift { width: 14%; left: 1.5%; }
#c90 { left: 16.5%; }
#c88 { left: 23.3%; }
#c67 { left: 30.1%; }
#c86 { left: 36.9%; }
#c66 { left: 43.7%; }
#c78 { left: 50.5%; }
#c77 { left: 57.3%; }
#c188 { left: 64.1%; }
#c190 { left: 70.9%; }
#c191 { left: 77.7%; }
#lshift { width: 14%; left: 84.5%; }

#fn { left: 1.5%; }
#c17 { left: 8.3%; }
#ropt { left: 15.1%; }
#c91 { width: 7%; left: 21.9%; }
#c32 { width: 32.5%; left: 30.5%; }
#c93 { width: 7%; left: 64.1%; }
#lopt { left: 72.2%; }
#c37 { top: 50%; height: 50%; left: 78.9%; }
#c38 { top: 0%; height: 50%; left: 85.6%; }
#c40 { top: 50%; height: 50%; left: 85.6%; }
#c39 { top: 50%; height: 50%; left: 92.3%; }


.trackpad {
    z-index: 99;
    position: absolute;
    top: 65%;
    left: 30%;
    width: 40%;
    height: 30%;
    border-radius: 15px;
    background-color: rgb(214, 213, 213);
    box-shadow: 2px -2px 1px rgb(157, 157, 157);
}

.spickers {
    z-index: 99;
    position: absolute;
    top: 5%;
    left: 0%;
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.spicker1 {
    z-index: 99;
    position: absolute;
    top: 0%;
    left: 2%;
    width: 7%;
    height: 55%;
    background-color: rgb(200, 195, 195);
}

.spicker2 {
    z-index: 99;
    position: absolute;
    top: 0%;
    left: 91%;
    width: 7%;
    height: 55%;
    background-color: rgb(200, 195, 195);
}

.lowerplate-bottom {
    position: absolute;
    top: 46%;
    left: 30%;
    width: 50%;
    height: 30%;
    border-radius: 15px;
    background-color: rgb(204, 193, 201);
}

.lowerplate-left {
    position: absolute;
    top: 39%;
    left: 35%;
    width: 50%;
    height: 35%;
    border-radius: 15px;
    background-color: rgb(117, 118, 119);
}

/* ====================
        UPPERPLATE
======================= */

.upperplate {
    position: absolute;
    top: 11%;
    left: 30%;
    width: 50%;
    height: 35%;
    border-radius: 15px;
    background-color: rgb(170, 170, 165);
    transform: perspective(100px) rotateX(-1deg);
}

.bezel {
    position: absolute;
    top: 2%;
    left: 2%;
    width: 96%;
    height: 90%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: rgb(60, 60, 60);
}

.monitor {
    position: absolute;
    top: 6%;
    left: 2%;
    width: 96%;
    height: 90%;
    color: whitesmoke;
    background-color: rgb(41, 41, 41);
}

.cam {
    position: absolute;
    top: 1.5%;
    left: 49%;
    width: 2%;
    height: 3%;
    border-radius: 50%;
    background-color: rgb(117, 116, 119);
}

.cam-bezel {
    position: absolute;
    top: 0.5%;
    left: 48%;
    width: 4%;
    height: 5%;
    border-radius: 50%;
    background-color: rgb(41, 41, 41);
}

.maclabel {
    position: absolute;
    top: 93%;
    left: 40%;
    color: grey;
}

.monitor-input {
    width: 100%;
    height: 100%;
}