@import url(pages/responsiveness/pages/loadingflow.css);

:root {

        /*Backgrounds*/

    --background: #000000;
    --stroke: #16161a;

    --background-glass: #11111600;
    --stroke-glass: #afb2cc17 ;

    --bg-card: rgb(14, 14, 17);
    --stroke-card: rgb(16, 16, 20);

    --brand-color: #fcfcfc;
    --brand-color-glass: rgba(255, 255, 255, 0.466);

    --hilight-text: #6d5dff;
    --stroke-hilight: rgb(62, 98, 255);

    /*texts*/
    --white-text: #f3f2fae5;
    --dark-text: #19191B;
    --gray-text: #797B86;
    --light-gray-text: #d3d3d3;

    --light-text: #f0f0f0;
    --glass-light-text: #f4f4ffa8;
    --glass-dark-text: #0a0a0ea1;

        /*Font scale*/

    --font-xxl: 14rem ; 
    --font-xl: 4rem ;
    --font-lg: 4rem ;
    --font-md: 2rem;
    --font-generic: 1.2rem;
    --font-sm: 1.2rem;
    --font-smm: .5rem ;

    
}
    body {
      background-color: black;
      color: var(--brand-color);
      font-family: 'Consolas', monospace;
      padding: .8rem;
    }
    .terminal {
      white-space: pre-wrap;
    }
    .config-line {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
    section {
      display: flex;
      flex-direction: row;
      margin-top: 1.2rem;
    }
    .ascii-art {
      color: #cccccc;
      white-space: pre;
      font-size: var(--font-generic);
      line-height: 20px;
      margin-right: 20px;
    }
    .fetch-info {
      min-width: 280px;
    }
    .color-palette {
      display: flex;
      margin-top: 10px;
    }
    .color-block {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }