/* fonts */
@font-face  {
    font-family: "Atkinson";
    src: url("/fonts/AtkinsonHyperlegible-Regular.ttf");
}

/* color variables */
:root  {
    /* light */
    --red-100: #ffcdd2; --pink-100: #f8bbd0; --purple-100: #e1bee7; --deep-purple-100: #d1c4e9;
    --indigo-100: #c5cae9; --blue-100: #bbdefb; --light-blue-100: #b3e5fc; --cyan-100: #b2ebf2;
    --teal-100: #b2dfdb; --green-100: #c8e6c9; --light-green-100: #dcedc8; --lime-100: #f0f4c3;
    --yellow-100: #fff9c4; --amber-100: #ffecb3; --orange-100: #ffe0b2; --deep-orange-100: #ffccbc;
    --brown-100: #d7ccc8; --gray-100: #f5f5f5; --blue-gray-100: #cfd8dc;

    /* bright */
    --red-400: #ef5350; --pink-400: #ec407a; --purple-400: #ab47bc; --deep-purple-400: #7e57c2;
    --indigo-400: #5c6bc0; --blue-400: #42a5f5; --light-blue-400: #29b6f6; --cyan-400: #26c6da;
    --teal-400: #26a69a; --green-400: #66bb6a; --light-green-400: #9ccc65; --lime-400: #d4e157;
    --yellow-400: #ffee58; --amber-400: #ffca28; --orange-400: #ffa726; --deep-orange-400: #ff7043;
    --brown-400: #8d6e63; --gray-400: #bdbdbd; --blue-gray-400: #78909c;

    /* standard */
    --red-500: #f44336; --pink-500: #e91e63; --purple-500: #9c27b0; --deep-purple-500: #673ab7;
    --indigo-500: #3f51b5; --blue-500: #2196f3; --light-blue-500: #03a9f4; --cyan-500: #00bcd4;
    --teal-500: #009688; --green-500: #4caf50; --light-green-500: #8bc34a; --lime-500: #cddc39;
    --yellow-500: #ffeb3b; --amber-500: #ffc107; --orange-500: #ff9800; --deep-orange-500: #ff5722;
    --brown-500: #795548; --gray-500: #9e9e9e; --blue-gray-500: #607d8b;

    /* dark */
    --red-900: #b71c1c; --pink-900: #880e4f; --purple-900: #4a148c; --deep-purple-900: #311b92;
    --indigo-900: #1a237e; --blue-900: #0d47a1; --light-blue-900: #01579b; --cyan-900: #006064;
    --teal-900: #004d40; --green-900: #1b5e20; --light-green-900: #33691e; --lime-900: #827717;
    --yellow-900: #f57f17; --amber-900: #ff6f00; --orange-900: #e65100; --deep-orange-900: #bf360c;
    --brown-900: #3e2723; --gray-900: #212121; --blue-gray-900: #263238;
}

/* color utility classes */
.red            { background-color: var(--red-500);         }
.pink           { background-color: var(--pink-500);        }
.purple         { background-color: var(--purple-500);      }
.deep-purple    { background-color: var(--deep-purple-500); }
.indigo         { background-color: var(--indigo-500);      }
.blue           { background-color: var(--blue-500);        }
.light-blue     { background-color: var(--light-blue-500);  }
.cyan           { background-color: var(--cyan-500);        }
.teal           { background-color: var(--teal-500);        }
.green          { background-color: var(--green-500);       }
.light-green    { background-color: var(--light-green-500); }
.lime           { background-color: var(--lime-500);        }
.yellow         { background-color: var(--yellow-500);      }
.amber          { background-color: var(--amber-500);       }
.orange         { background-color: var(--orange-500);      }
.deep-orange    { background-color: var(--deep-orange-500); }
.brown          { background-color: var(--brown-500);       }
.gray           { background-color: var(--gray-500);        }
.blue-gray      { background-color: var(--blue-gray-500);   }


/* button utility classes */
.bttn-red            { border: none; border-radius: 1em; background-color: var(--red-100); color: var(--red-500);                 }
.bttn-pink           { border: none; border-radius: 1em; background-color: var(--pink-100); color: var(--pink-500);               }
.bttn-purple         { border: none; border-radius: 1em; background-color: var(--purple-100); color: var(--purple-500);           }
.bttn-deep-purple    { border: none; border-radius: 1em; background-color: var(--deep-purple-100); color: var(--deep-purple-500); }
.bttn-indigo         { border: none; border-radius: 1em; background-color: var(--indigo-100); color: var(--indigo-500);           }
.bttn-blue           { border: none; border-radius: 1em; background-color: var(--blue-100); color: var(--blue-500);               }
.bttn-light-blue     { border: none; border-radius: 1em; background-color: var(--light-blue-100); color: var(--light-blue-500);   }
.bttn-cyan           { border: none; border-radius: 1em; background-color: var(--cyan-100); color: var(--cyan-500);               }
.bttn-teal           { border: none; border-radius: 1em; background-color: var(--teal-100); color: var(--teal-500);               }
.bttn-green          { border: none; border-radius: 1em; background-color: var(--green-100); color: var(--green-500);             }
.bttn-light-green    { border: none; border-radius: 1em; background-color: var(--light-green-100); color: var(--light-green-500); }
.bttn-lime           { border: none; border-radius: 1em; background-color: var(--lime-100); color: var(--lime-500);               }
.bttn-yellow         { border: none; border-radius: 1em; background-color: var(--yellow-100); color: var(--yellow-500);           }
.bttn-amber          { border: none; border-radius: 1em; background-color: var(--amber-100); color: var(--amber-500);             }
.bttn-orange         { border: none; border-radius: 1em; background-color: var(--orange-100); color: var(--orange-500);           }
.bttn-deep-orange    { border: none; border-radius: 1em; background-color: var(--deep-orange-100); color: var(--deep-orange-500); }
.bttn-brown          { border: none; border-radius: 1em; background-color: var(--brown-100); color: var(--brown-500);             }
.bttn-gray           { border: none; border-radius: 1em; background-color: var(--gray-100); color: var(--gray-500);               }
.bttn-blue-gray      { border: none; border-radius: 1em; background-color: var(--blue-gray-100); color: var(--blue-gray-500);     }

/* button utility classes */
.bttn-red:hover            { background-color: var(--red-400); color: var(--red-900);                 }
.bttn-pink:hover           { background-color: var(--pink-400); color: var(--pink-900);               }
.bttn-purple:hover         { background-color: var(--purple-400); color: var(--purple-900);           }
.bttn-deep-purple:hover    { background-color: var(--deep-purple-400); color: var(--deep-purple-900); }
.bttn-indigo:hover         { background-color: var(--indigo-400); color: var(--indigo-900);           }
.bttn-blue:hover           { background-color: var(--blue-400); color: var(--blue-900);               }
.bttn-light-blue:hover     { background-color: var(--light-blue-400); color: var(--light-blue-900);   }
.bttn-cyan:hover           { background-color: var(--cyan-400); color: var(--cyan-900);               }
.bttn-teal:hover           { background-color: var(--teal-400); color: var(--teal-900);               }
.bttn-green:hover          { background-color: var(--green-400); color: var(--green-900);             }
.bttn-light-green:hover    { background-color: var(--light-green-400); color: var(--light-green-900); }
.bttn-lime:hover           { background-color: var(--lime-400); color: var(--lime-900);               }
.bttn-yellow:hover         { background-color: var(--yellow-400); color: var(--yellow-900);           }
.bttn-amber:hover          { background-color: var(--amber-400); color: var(--amber-900);             }
.bttn-orange:hover         { background-color: var(--orange-400); color: var(--orange-900);           }
.bttn-deep-orange:hover    { background-color: var(--deep-orange-400); color: var(--deep-orange-900); }
.bttn-brown:hover          { background-color: var(--brown-400); color: var(--brown-900);             }
.bttn-gray:hover           { background-color: var(--gray-400); color: var(--gray-900);               }
.bttn-blue-gray:hover      { background-color: var(--blue-gray-400); color: var(--blue-gray-900);     }