:root {
  --main-lightgrey: rgb(250,255,250);
  --main-darkgrey: rgb(50,50,50);
  --contrast-red: rgb(200,20,20);  
}

body {
  background-color: #EEE;
  color: black;
}

.grid {
  display: grid;
  grid-template-rows: 1fr 12fr;
  grid-template-columns: 1fr 8fr 1fr;
  height: 97vh;
  width: 98vw;
}

.grid > div {
  border: 1px solid black;
}

.screen-grid {
  display: grid;
  grid-template-rows: 5rem 15fr 2rem;
  grid-template-columns: 3fr 15fr 2rem;
  height: 100%;
  width: 100%;  
}

#side-top-l {}
#side-top-r {}


#main {
  /*
    background-color: var(--main-darkgrey);
    transform: scale3d(1, 1, 0.5);
    transform: perspective(300px);
    transform: skew(0deg, 0deg);  
    transition: transform 1s;
    #main:hover
  */
}


#title-bar {
  background-color: var(--main-lightgrey);  
}

#side-left {}
#side-right {}

.screen-bezel {
  background-color: beige;  
}

/*
#screen-bezel-tl {}
#screen-bezel-top {}
#screen-bezel-tr {}
#screen-left-controls {}
#screen-bezel-right {}
*/


#screen {
  background-color: rgb(7,7,25);
  padding: 0.5rem 1rem 2rem 1rem;
  color: #EEE;
  display: grid;
  grid-template-rows: 1fr 10fr;
}


input[type="radio"] {
    display: none;
}

#screen-tab-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row: 1;
  border: solid 1px var(--main-lightgrey);
}

#screen-tab-bar label {
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: var(--main-darkgrey);
  border: solid 1px var(--contrast-red);
  margin: 0.5rem 1rem 0.5rem 1rem;
}

.panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-row: 2;
}

#tab-my:checked ~ #panel-my, 
#tab-me:checked ~ #panel-me {
  display: grid;
}

#tab-my:checked ~ #screen-tab-bar label[for="tab-my"],
#tab-me:checked ~ #screen-tab-bar label[for="tab-me"] {
  border: solid 3px var(--contrast-red);
  background: var(--main-darkgrey);
  font-weight: bold;
}

#screen-tab-bar label:hover {  
  border: solid 2px var(--main-lightgrey);
  padding: 0.1rem;
  margin: 0.4rem 0.9rem 0.4rem 0.9rem;
}

#screen-tab-bar label:active {
  background-color: var(--contrast-red);
  box-shadow: 3px 3px 1px black inset;
  
}