:root {
    /*text*/
    --textColor: #fff;
    --primBackground: rgb(9, 9, 9);
    --secBackground: #111;
  
    --accentColor: red;
    --accentText: #000;
    --accentColor2: #fff;
    --accentText2: #000;
  
    --border: 0px solid #eceaea;
  }
  
  [data-theme="fun"] {
    --textColor: #000;
    --primBackground: rgb(0, 229, 255);
    --secBackground: rgb(255, 0, 128);
  
    --accentColor: magenta;
    --accentText: #000;
  }
  
  [data-theme="light"] {
      --textColor: #000;
      --linkColor: red;
      
      --accentColor: rgb(255, 21, 21);
      --accentColor2: #000;
    
      --primBackground: #fff;
      --secBackground: #f3f3f3;
  } 
  
  /*OTHER PAGES*/
  #theme-filter {
    padding-bottom: 50px;
  }
  #theme-filter li {
    display: inline-block;
    margin-right: 15px;
  }
    
 #grid {
    position: relative;
    height: auto;
 }

 #grid .card {
    position: relative;
    min-width: 250px;
    width: calc(50% - 30px);
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
 }

 #grid .card.sheets::before {
    content: "Spreadsheets";
    padding: 15px;
    background: var(--accentColor);
    color: var(--accentText);
    top: 0;
    right: 0;
    position: absolute;
    z-index: 2;
    font-family: var(--fontFamily2);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
 }

 #grid .card h3 {
    margin-top: 15px;
 }

 #grid .card h3 a {
    color: var(--textColor);
    font-weight: bold;
 }

 #grid .card .box_desc {
    margin-top: 0;
 }

 #grid .card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    filter: grayscale(100%);
    transition: 0.5s all ease;
 }

 #grid .card:hover img {
    filter: grayscale(0);
 }

 #grid .card p {
    margin-top: 5px;
 }