body{
 margin:0;
 font-family:sans-serif;
}

.container{
 display:flex;
}

.left{
 width:50%;
 display:flex;
 flex-direction:column;
 align-items:center;
}

.right{
 width:50%;
}

.skewb{
 background:#d9d9d9;
 border:1px solid #ccc;
 margin:0 auto;
 align-items:center;
 display:block;
}

.textbox{
 width:300px;
 background:#d9d9d9;
 color:Black;
 align-items:center;
 font-weight: bold; 
 padding:10px;
 box-sizing:border-box;
}

.buttons{
 width:300px;
 display:flex;
}

.buttons button{
 background:#ffe600;
 flex:1;
 padding:12px;
 font-size:18px;
 border:1px solid black;
 cursor:pointer;
}

.case-actions{
 justify-content:flex-start;
 gap:8px;
 width:100%;
}

.case-actions button{
 flex:0 0 auto;
 min-width:90px;
}

.mode-toggle{
  display:flex;
 align-items:center;
 margin:0 0 0 10px;
 font-weight:bold;
}

.card{
  background:#ffffff;
  padding:20px;
  margin:20px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}

.header{
  background:#ffff00;
  padding:20px;
  border-bottom:1px solid #1e293b;
}

.logo{
  font-size:35px;
  font-weight:bold;
  color:#000000;
}

.checkrow{
 display:grid;
 grid-template-columns: repeat(4, 1fr);
 gap:10px;
 margin-bottom:10px;
}

.checkrow label{
 text-align:center;
 background:#eee;
 padding:8px 0;
 border-radius:6px;
 cursor:pointer;
}

.skewb,.textbox,.buttons{
 align-items:center;
 margin: 0 auto;
}

.case-actions{
 justify-content:flex-start;
 gap:8px;
 width:100%;
}

.case-actions button{
 flex:0 0 auto;
 min-width:90px;
}

.toggle {
  position: relative;
  box-sizing: border-box;
}
.toggle input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.toggle label {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap:10px;
  cursor:pointer;
}

.toggle label span{
  margin-left:10px;
  white-space:nowrap;
}
.toggle label:before {
  content: '';
  width: 78px;
  height: 40px;
  background: #f8f8f8;
  border: 2px solid #DDD;
  box-shadow: inset 0 0 0 0px #13bf11;
  position: relative;
  display: inline-block;
  border-radius: 20px;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.toggle label:after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid #DDD;
  border-radius: 50%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 1px 10px #0002;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.toggle input[type="checkbox"]:checked + label:before {
  box-shadow: inset 40px 0 0 #13bf11;
}
.toggle input[type="checkbox"]:checked + label:after {
  left: 38px;
}