html {
    scrollbar-color: orange var(--body-background-color);
}

body {
    padding: 0;
    border: 0;
    margin: 0;
    margin-bottom: 16px;
    background-color: var(--body-background-color);
}

p, b, span {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text-color);
}

h1, h2, h3 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--header-color);
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid var(--td-th-bg-color);
    text-align: left;
    padding: 8px;
    color: var(--text-color);
}

tr:nth-child(even) {
    background-color: var(--tr-even-bg-color);
}

button {
    background-color: var(--button-bg-color);
    border: 2px solid var(--button-border-color);
}

button:hover {
    filter: var(--button-hover-filter)
}

input {
    background-color: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    color: var(--text-color);
    width: 100%;
}

/*-----------------------------------------------------------------------*/
/*--- THEME                                                             */
/*---------------------------------------------------------------------*/

:root {
    --body-background-color: white;
    --td-th-bg-color: #ddd;
    --tr-even-bg-color: #ddd;
    --main-page-border: hsl(0,0%,80%);
    --main-page-bg-color: rgb(235, 235, 235);
    --header-gradient: linear-gradient(to top, rgb(231, 231, 231), rgb(245, 245, 245));
    --header-gradient-selected: linear-gradient(to top, orange, rgb(255, 197, 90));
    --menubar-gradient: linear-gradient(to top, rgb(192, 192, 192), rgb(240, 240, 240));
    --menubar-gradient-hover: linear-gradient(to top, orange, rgb(255, 197, 90));
    --divider-color: rgb(192, 192, 192);
    --text-color: black;
    --header-color: rgb(41, 41, 41);
    --button-bg-color: rgb(255, 255, 255);
    --button-border-color: rgb(224, 224, 224);
    --button-hover-filter: brightness(90%);

    --transparent-color: #00000030;
}

.dark {
    --body-background-color: black;
    --td-th-bg-color: #333;
    --tr-even-bg-color: #333;
    --main-page-border: hsl(0,0%,20%);
    --main-page-bg-color: rgb(26, 26, 26);
    --header-gradient: linear-gradient(to top, rgb(58, 58, 58), rgb(90, 90, 90));
    --header-gradient-selected: linear-gradient(to top, orange, rgb(255, 197, 90));
    --menubar-gradient: linear-gradient(to top, rgb(46, 46, 46), rgb(73, 73, 73));
    --menubar-gradient-hover: linear-gradient(to top, orange, rgb(255, 197, 90));
    --divider-color: rgb(46, 46, 46);
    --text-color: gray;
    --header-color: rgb(155, 155, 155);
    --button-bg-color: rgb(46, 46, 46);
    --button-border-color: rgb(34, 34, 34);
    --button-hover-filter: brightness(150%);

    --transparent-color: #ffffff19;
}

.HC-light {
    --body-background-color: white;
    --td-th-bg-color: #ddd;
    --tr-even-bg-color: #ddd;
    --main-page-border: hsl(0,0%,80%);
    --main-page-bg-color: rgb(252, 252, 252);
    --header-gradient: linear-gradient(to top, rgb(245, 245, 245), rgb(248, 248, 248));
    --header-gradient-selected: linear-gradient(to top, orange, rgb(255, 197, 90));
    --menubar-gradient: linear-gradient(to top, rgb(231, 231, 231), rgb(245, 245, 245));
    --menubar-gradient-hover: linear-gradient(to top, orange, rgb(255, 197, 90));
    --divider-color: rgb(192, 192, 192);
    --text-color: black;
    --header-color: black;
    --button-bg-color: rgb(255, 255, 255);
    --button-border-color: rgb(224, 224, 224);
    --button-hover-filter: brightness(60%);
    
    --transparent-color: #00000050;
}

.HC-dark {
    --body-background-color: black;
    --td-th-bg-color: #333;
    --tr-even-bg-color: #333;
    --main-page-border: hsl(0, 0%, 28%);
    --main-page-bg-color: rgb(15, 15, 15);
    --header-gradient: linear-gradient(to top, rgb(20, 20, 20), rgb(24, 24, 24));
    --header-gradient-selected: linear-gradient(to top, orange, rgb(255, 197, 90));
    --menubar-gradient: linear-gradient(to top, rgb(24, 24, 24), rgb(31, 31, 31));
    --menubar-gradient-hover: linear-gradient(to top, orange, rgb(255, 197, 90));
    --divider-color: rgb(46, 46, 46);
    --text-color: white;
    --header-color: white;
    --button-bg-color: rgb(46, 46, 46);
    --button-border-color: rgb(34, 34, 34);
    --button-hover-filter: brightness(150%);
    
    --transparent-color: #ffffff30;
}

.parchment {
    --body-background-color: wheat;
    --td-th-bg-color: #ddd;
    --tr-even-bg-color: #ddd;
    --main-page-border: #cec5b3;
    --main-page-bg-color: #faf1e0;
    --header-gradient: linear-gradient(to top, #dbd4c7, #eee6d7);
    --header-gradient-selected: linear-gradient(to top, orange, rgb(255, 197, 90));
    --menubar-gradient: linear-gradient(to top, rgb(192, 192, 192), rgb(240, 240, 240));
    --menubar-gradient-hover: linear-gradient(to top, orange, rgb(255, 197, 90));
    --divider-color: rgb(192, 192, 192);
    --text-color: black;
    --header-color: rgb(41, 41, 41);
    --button-bg-color: rgb(255, 255, 255);
    --button-border-color: rgb(224, 224, 224);
    --button-hover-filter: brightness(90%);
}

/*-----------------------------------------------------------------------*/
/*--- IMPORTANT                                                         */
/*---------------------------------------------------------------------*/

/*--MAIN PAGE-------------------------*/

.main-page-group {
    width: 100%;
}

.main-page {
    width: 80%;
    border: 1px solid var(--main-page-border);
    background-color: var(--main-page-bg-color);
    padding: 10px;

    display: block;
    margin-left: auto;
    margin-right: auto;
}

.main-page p {
    margin-top: 12px;
    margin-bottom: 12px;
}

.main-page p:first-child {
    margin-top: 0;
}

.main-page p:last-child {
    margin-bottom: 0;
}

.main-page-header {
    width: 80%;
    margin-top: 24px;

    border-radius: 10px 10px 0 0;
    border: 1px solid var(--main-page-border);
    background-image: var(--header-gradient);
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;

    display: block;
    margin-left: auto;
    margin-right: auto;
}

.main-page-header-selected {
    width: 80%;
    margin-top: 24px;

    border-radius: 10px 10px 0 0;
    border: 1px solid var(--main-page-border);
    background-image: var(--header-gradient-selected);
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;

    display: block;
    margin-left: auto;
    margin-right: auto;
}

.vertical-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

/*--MENUBAR---------------------------*/

.menubar {
    width: 100%;
    background-image: var(--menubar-gradient);

    display: flex;
    grid-template-columns: auto auto auto;
}

.menubar-button {
    padding: 6px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 32px;
    padding-right: 32px;
    border-right: 1px solid var(--transparent-color);
    position: relative;
}

.menu-divider {
    border-right: 1px solid var(--transparent-color);
    width: 12px;
}

.titled-menu-divider {
    border-right: 1px solid var(--transparent-color);
    width: 12px;
    position: relative;
}

.titled-menu-divider p {
    position: absolute;
    top: 140%;
    left: 50%;
    transform: translate(0%, -50%);
    background: var(--main-page-bg-color);
    border: 1px solid var(--main-page-border);
    padding: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 8px;
}

.menubar-button-nohover {
    padding: 6px;
    padding-left: 32px;
    padding-right: 32px;
    border-right: 1px solid var(--transparent-color);
}

.menubar-button:hover {
    background-image: var(--menubar-gradient-hover);
}

.menu-link {
    text-decoration: none;
    color: var(--header-color);
}

.menu-link-selected-indicator {
    background-color: var(--transparent-color);
    width: 80%;
    height: 2px;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*-----------------------------------------------------------------------*/
/*--- UTILITY                                                           */
/*---------------------------------------------------------------------*/

.center-me {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.center-height {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.section-link {
    text-decoration: none;
    color: rgba(0, 0, 0, 0);
}

.section-link:hover {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
}

.divider {
    height: 2px;
    background-color: var(--divider-color);
    border-radius: 2px;
    margin-bottom: 16px;
}

.defaultImg {
    width: 100%;
    height: auto;
}

.defaultImg_height {
    height: 100%;
    width: auto;
}

.chem-eq {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
}

.grid-6-holder {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 1200px) {
    .grid-6-holder {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.max-1000 {
    max-width: 1000px;
}

.small-font {
    font-size: small;
}

/*-----------------------------------------------------------------------*/
/*--- PARAGRAPHS                                                        */
/*---------------------------------------------------------------------*/

.paragraph p {
    text-indent: 32px;
}

/*-----------------------------------------------------------------------*/
/*--- CALCULATOR                                                        */
/*---------------------------------------------------------------------*/

.calc-variable-grid {
    display: grid;
    grid-template-columns: 64px auto;
}

.solve-btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px;
}

/*-----------------------------------------------------------------------*/
/*--- OTHER                                                             */
/*---------------------------------------------------------------------*/

.periodic-table {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 4px;
}

.periodic-table-item {
    position: relative;
    aspect-ratio: 1/1;
}

.periodic-table-item #letter {
    position: absolute;
    text-align: center;
    font-size: 24px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.periodic-table-item #name {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
}

.periodic-table-item #amu {
    position: absolute;
    left: 100%;
    transform: translate(-100%, 0);
}

.periodic-table-item #atomicNumber {
    position: absolute;
}

.periodic-table-item p {
    color: rgba(255, 255, 255, 0.5);
    color: inherit;
    filter: saturate(300%) brightness(50%);
}

.periodic-table-item p b {
    color: rgba(255, 255, 255, 0.5);
    color: inherit;
    filter: saturate(300%) brightness(50%);
}

.periodic-table-item:hover {
    width: 100%;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.425);
}

.pti-react_nonmetal {
    background-color: rgb(170, 172, 255);
    color: rgb(170, 172, 255);
}

.pti-noble_gas {
    background-color: rgb(255, 128, 128);
    color: rgb(255, 128, 128);
}

.pti-alkali_metal {
    background-color: rgb(94, 201, 195);
    color: rgb(94, 201, 195);
}

.pti-metalloids {
    background-color: rgb(201, 190, 94);
    color: rgb(201, 190, 94);
}

.center {
    text-align: center;
}