/* =======================
   ROOT VARIABLES
   ======================= */
:root {
  --powr1-dark: #4e5265;
  --powr1-black: #2c2f3a;
  --powr1-light: #9a9eb1;
  --powr1-white: #c5c8d3;
  --powr1-red: #DF5E62;
  --powr1-blue: #3BDBFF;
  --powr1-green: green;
}

/* =======================
   BASE STYLES
   ======================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

body {
  overflow: hidden;
  font-family: 'Roboto Mono', monospace;
  height: 92vh;
  -webkit-overflow-scrolling: touch;
}

/* =======================
   LAYOUT STYLES
   ======================= */
.section {
  display: flex;
  flex-direction: column;
  height: 92vh;
}

.flexcol {
  display: flex;
  flex-direction: column;
  flex:0 0 100%;
}

.flexsec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
   background: var(--powr1-black);
}

.flexbox {
  display: flex;
  min-height:30px;
  height:auto;
  justify-content: space-between;
  align-items: stretch;
  padding: 0px 14px;
  border-radius: 25px;
  background: var(--powr1-dark);
  color: var(--powr1-light);
}

/* =======================
   BUTTON STYLES
   ======================= */
.flex-button {
  display: flex;
  flex: 1 1 0;
  max-height:50px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  
  padding: 8px;
  color: var(--powr1-light);
  cursor: pointer;
  transition: background-color 0.1s ease;
  user-select: none;
  border-radius:25px;
  
-webkit-tap-highlight-color: transparent;
}

.flex-button:active {
  animation: buttonPress 0.3s ease;
}

@keyframes buttonPress {
  0% {
    
  }
  50% {
    background-color: var(--powr1-red);
    color: var(--powr1-white);
  }
  100% {
    
  }
}

.flex-button .fas {
  font-size: 12px;
  flex-shrink: 0;
  padding: 0 8px;
}

.meta {
  font-size: 8px;
  white-space: nowrap;
  text-align: center;
}

/* =======================
   CODE EDITOR STYLES
   ======================= */
#code-editor {
  width: 100%;
  height: 100%;
  padding: 15px;
  background: none;
  color: var(--powr1-white);
  border: none;
  resize: none;
  
  font-size: 10px;
  line-height: 1.5;
  tab-size: 2;
}

#code-editor:focus {
  outline: none;
}

/* =======================
   OUTPUT FRAME STYLES
   ======================= */
#output-frame {
  background: none;
}



/* =======================
   RESPONSIVE STYLES
   ======================= */
@media (min-width: 768px) {
  .section {
    flex-direction: row;
  }
  
  .flexcol
  {flex:0 0 50%;}
  
  .flex-button {
    min-height: auto;
    padding: 8px;
  }
}




/* =======================
   TOGGLE CONTROLS
   ======================= */
   
   .sec-menu-file,
.sec-menu-edit {
  display: none;}


#toggle-menu-file:checked ~ .sec-coder {
  display: none;}


#toggle-menu-file:checked ~ .sec-menu-file { display: flex;}


#toggle-menu-edit:checked ~ .sec-coder {
  display: none;}

#toggle-menu-edit:checked ~ .sec-menu-edit {
  display: flex;}


#toggle-column:checked ~ .col-input {
  display: none;}


#toggle-column:checked ~ .col-output {
  flex: 0 0 100%;}