* {
  font-family: 'Lato', sans-serif;
 }

.container {  
    display: grid;
    grid-template-columns: 0.5fr 1.5fr 1fr;
    grid-template-rows: 0.2fr 2.7fr 0.1fr; 
    gap: 0px 0px;
    grid-auto-flow: row;
    justify-content: stretch;
    grid-template-areas:
      "sidebar page-tabs page-tabs"
      "sidebar content content"
      "footer footer footer";
  }

  p {
    font-weight: normal;
    font-size: large;
    font-family: 'Lato', sans-serif;
  }
  
  .sidebar {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.4fr 2.1fr 0.5fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "sidebar-logo sidebar-logo sidebar-logo"
      "sidebar-answers sidebar-answers sidebar-answers"
      "sidebar-button-area sidebar-button-area sidebar-button-area";
    grid-area: sidebar;
    background-color: rgb(38, 41, 49);
  }
  
  .sidebar-logo { 
      grid-area: sidebar-logo; 
      background-color: rgb(111, 119, 143);
      position: relative;
    }

    .sidebar-logo > img {
        position: absolute;
        width: 75%;
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
  
  .sidebar-button-area { 
      grid-area: sidebar-button-area; 
    }

    .sidebar-button {
      display:block;
      width:100%;
      height: 100%;
      border: none;
      background-color: rgb(31, 78, 121);
      cursor: pointer;
    }

    .sidebar-button span {
      color: white;
      font-weight: normal;
      font-size: x-large;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    
    .sidebar-button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
    
    .sidebar-button:hover span {
      padding-right: 20px;
    }
    
    .sidebar-button:hover span:after {
      opacity: 1;
      right: 0;
    }
  
  .sidebar-answers { 
      grid-area: sidebar-answers; 
      animation: fadeEffect 0.5s;
    }

    .sidebar-answer-title {
      color: white; 
      text-align: center;
    }
  
  .page-tabs { 
      grid-area: page-tabs; 
      background-color: rgb(38, 41, 49);
      display: flex;
  }

  .tab {
      padding: 0px 3% 0 3%;
      color: white;
      font-weight: bold;
      user-select: none;
  }

  .tab:hover {
      background-color: rgba(105, 105, 105, 0.37);
      cursor: pointer;
  }

  .tab-open {
    background-color: rgba(105, 105, 105, 0.37);
  }
  
  .reset-tab {
    margin-left:auto;
    background-color: rgb(46, 104, 158);
  }

  .content {  
    font-size: x-large;
    font-family: 'Lato', sans-serif;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "content-body content-body content-body"
      "content-body content-body content-body"
      "output output output";
    grid-area: content;
    background-color: rgb(49, 52, 64);
  }
  
  .content-body { grid-area: content-body; }
  
  .output { 
      grid-area: output; 
      padding: 20px;
      background-color: black;
      animation: fadeEffect 0.5s;
    }

    .output > textarea {
        height: 100%;
        width: 100%;
        color: green;
        line-height: 1.3;
        border: none;
        background-color: transparent;
        resize: none;
        outline: none;
        font-size: large;
    }
#output-textarea::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px #0000004d;
	border-radius: 10px;
}

#output-textarea::-webkit-scrollbar
{
	width: 12px;
}

#output-textarea::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: rgb(44, 47, 59);
}

  
  .footer { 
      grid-area: footer; 
      background-color: rgb(38, 41, 49);
    }
  
  
  html, body , .container {
    height: 100%;
    margin: 0;
  }

  .sidebar-answer {
    border: 1px solid black;
    color:rgb(246,146,0);
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 25px;
    margin-bottom: 20px;
    transform: translate(0px, 0px);
    touch-action: none;
    user-select: none;
   }
   

   .answer { 
    
  }

  #question {
    color:white;
    margin: 2% 2% 2% 2%;
  }
  
  .answer > ol {
    list-style-type: none;
  }
  
  .answer > ol > li {
    color:white;
    margin-bottom: 25px;
  }

  .tabcontent {
    animation: fadeEffect 0.5s;
  }

  .hide {
      display: none;
  }

  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  


   /* DRAG AND DROP - DRAGGABLE.JS*/
   .draggable {
    touch-action: none;
    user-select: none;
   }

   .drag-drop {
    display: inline-block;
    min-width: 40px;
    padding: 0em 0.5em;
    margin: 1rem 0 0 1rem;
  
    color: #fff;
    background-color: #29e;
    border: solid 2px #fff;
  
    touch-action: none;
    transform: translate(0px, 0px);
  
    transition: background-color 0.3s;
  }

  /* Code Text Styling */
  .keyword {
    color: rgb(91, 167, 229)
  }

  .identifier {

  }

  .terminator {

  }
  
  .comment {
    color: rgb(104, 152, 83);
  }
  
  .drag-drop.can-drop {
    color: #000;
    background-color: #4e4;
  }

   #outer-dropzone {
    height: 140px;
  }
  
  #inner-dropzone {
    height: 80px;
  }
  
  .dropzone {
    display: inline-block;
    width: 110px;
    border: dashed 4px transparent;
    background: gray;
    margin: 0 3px;
    text-align:center;
    transition: background-color 0.3s;
  }

  .drop-active {
    border-color: #aaa;
  }
  
  .drop-target {
    background-color: #29e;
    border-color: #fff;
    border-style: solid;
  }
  
  .disclaimer {
    display: none;
  }