/*LIGHT/DARK THEME VARIABLES*/
:root{
    --text:#6ead13;
    --bg:white;
    --link:#3cc100;
    --accent:grey;
    --hover:#d3eabd;
    --bg1: linear-gradient(180deg, rgba(204,233,147,0.5) 0%, rgba(255,255,255,0) 90%);
  }
  
  [data-theme="dark"] {
    --text:#f7abff;
    --bg:#64528e;
    --link:#d16eff;
    --accent:#ff8be2;
    --hover:#7615b8;
    --bg1:#50358c;
  }
  
  
  /*UNIVERSAL SETTINGS*/
  * {
    box-sizing: border-box;
  }
  html, body {
    margin:0;
    font-family:verdana;
    letter-spacing:0.5px;
  }
  header,nav,main,footer{
    border:1px solid;
  }
  nav{
      border-top:none;
      border-bottom:none;
  }
  footer{
      border:none;
  }

  /*COLORS*/
    ::selection {
      background:var(--hover);
    }
    body{
      background: var(--bg1);
      background-repeat:no-repeat;
      color:var(--text);
    }
    header,nav,main{
        background:var(--bg);
    }

    a{
      color:var(--link);
    }
    h1,h2,h3{
      color:var(--accent);
    }
  button{
    background:var(--hover);
    color:var(--text);
    border:1px solid var(--accent);
  }
  
  /*PADDING & MARGINS*/
  body{
    max-width:800px;
    margin:0 auto;
    padding:25px;
  }
  
  header,nav,footer{
    padding:4px 10px;
  }
  main{
    padding:10px;
  }
  
  h1,h2,h3{
    margin:5px 0;
  }
  
  /*TEXT FORMATTING*/
  footer{
    text-align:center;
  }
  body{
    font-size:0.8rem;
  }
  h1,h2,h3{
    font-size:1rem;
  }
  ul{
    list-style:square;
  }
  
  button{
      float:right;
      font-size:.65rem;
  }

  /*MISC*/
  hr{
    border:none;
    border-top:1px solid var(--text);
  }
  
  
  /*MOBILE STYLING*/
  @media screen and (max-aspect-ratio:16/9) {
  }