*{
    margin:0;
    padding:0;
    box-sizing: border-box;
  }

  ::-webkit-scrollbar-track
  {
      box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      
      background-color: #555;
  }
  
  ::-webkit-scrollbar
  {
      width: 12px;
      background-color: #555;
  }
  
  ::-webkit-scrollbar-thumb
  {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: rgb(129, 129, 129);
  }

  a{
    text-decoration: none;
    color: rgb(238, 238, 238);
  }

  body{
    background-image:url(background.webp);
    background-size: fill;
    background-repeat: no-repeat;
    height: 100vh;
    font-family: 'Fira Code', monospace;
    display:flex;
    align-items: center;
    justify-content: center;
  }

  .container{
    display:flex;
    flex-direction: column;
    width:100%;
    max-width:800px;
    height:500px;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid gray;
    margin:20px;
    cursor: text;
  }

  .menu{
    display:flex;
    align-items: center;
    text-align: center;
    flex-direction: row-reverse;
    width: 100%;
    height: 24px;
    background-color: #21232C;
    padding: 0 8px;
    cursor:default;
  }

  .menu .button{
    align-content: right;
    width:16px;
    height:16px;
    border-radius:50%;
    margin-right:8px;
    cursor:pointer;
  }

  .close{ 
    background: url(window-close-symbolic.svg) no-repeat;
}
  .max{
    background: url(window-maximize-symbolic.svg) no-repeat;
}

  .min{
    background: url(window-minimize-symbolic.svg) no-repeat;
}

  div.title{
    flex:1;
    text-align:center;
  }

  .menu h1{
    font-size:13px;
    color:#9c9c9c;
  
  }

  .buttons-flex{
    position: absolute;
    display:flex;
    flex-direction: row;
  }

  @media (max-width:500px){
    .buttons-flex{
      position: unset;
      display:flex;
      flex-direction: row;
    }
  }

  @media (max-width:330px){
    .menu h1{
      display:none;
    }
  }

  #app{
    display:flex;
    flex-direction: column;
    background-color:#21232C;
    width:100%;
    height:100%;
    padding:8px;
    overflow: auto;
    opacity: 90%;
  }

  p{
    font-size:16px;
    color:rgb(238, 238, 238);
    padding:8px 0;
  }

  h2{
    font-size:16px;
    color:rgb(238, 238, 238);
  }

  p.code{
    color:#9714a8;
    margin-left:8px;
  }

  span.text{
    margin-left:16px;
    color:white;
  }

  p.path{
    color:#6A77D2;
  }

  p.path span{
    color:#6A77D2;
  }

  p.path span + span{
    color:#6A77D2;
  }
  
  .success{
    color:#5AD786;
  }

  .error{
    color:#F78F85;
  }

  p.response{
    color:rgb(238, 238, 238);
  }
  
  input{
    border:none;
    background-color: unset;
    color:rgb(238, 238, 238);
    width:100%;
    font-size:16px;
    font-family: 'Fira Code', monospace;
  }

  input:focus{
    border:none;
    outline: none;
    box-shadow: none;
    background-color: unset;
    
  }

  .type{
    display:flex;
    align-items: center;
    padding:8px 0;
  }

  .type2{
    display:flex;
    align-items: center;
    padding:8px 0;
  }

  .icon{
    color:#5AD786;
    padding-right:8px;
  }
  
  .icon.error{
    color:#F78F85;
  }

  aside {
    position: relative;
    width: 800px;
    height: 500px;
  }