/* Sets color variables to use in stylesheet */
:root {
    /* ELement Colors */
    --teal:              rgba(0, 132, 132, 0.5);  /* Alkali Metals */
    --red:               rgba(255, 0, 0, 0.8);    /* Alkaline Earth Metals */
    --purple:            rgba(170, 0, 255, 0.5);  /* Transition Metals */
    --green:             rgba(0, 255, 0, 0.5);    /* Post-Transition Metals */
    --dark-orange:       rgba(255, 140, 0, 0.5);  /* Metalloids */
    --dark-blue:         rgba(0, 0, 255, 0.5);    /* Reactive Non-Metals */
    --dark-red:          rgba(255, 0, 0, 0.5);    /* Noble Gases */
    --blue:              rgba(0, 0, 255, 0.8);    /* Lanthanides */
    --orange:            rgba(255, 140, 0, 0.8);  /* Actinides */
    --light-grey:        rgba(0, 0, 0, 0.2);      /* Unknown Propeties */
    
    /* Hover Colors */
    --hover-teal:        rgba(0, 132, 132, 0.6);  
    --hover-red:         rgba(255, 0, 0, 0.9);
    --hover-purple:      rgba(170, 0, 255, 0.6);
    --hover-green:       rgba(0, 255, 0, 0.6);
    --hover-dark-orange: rgba(255, 140, 0, 0.6);
    --hover-dark-blue:   rgba(0, 0, 255, 0.6);
    --hover-dark-red:    rgba(255, 0, 0, 0.6);
    --hover-blue:        rgba(0, 0, 255, 0.9);
    --hover-orange:      rgba(255, 140, 0, 0.9);
    --hover-light-grey:  rgba(0, 0, 0, 0.3);
    
    /* Extra Colors */
    --grey:              rgba(0, 0, 0, 0.4);      
    --black:             rgba(0, 0, 0, 1);
    --white:             rgba(255, 255, 255, 1);
    --neon-blue:         rgba(200, 230, 254, 1);
}

/* Default website formatting (Mobile First) */
body {
    background-color: var(--neon-blue);
    font-family: Arial Narrow, system-ui, sans-serif;
    font-size: 120%;
    padding: 3%;
}

/* Makes the bg color of body content neon blue */
:is(header, main) {background-color: var(--neon-blue);}

/* Puts text for button side by side */
.button {
    display: flex;
    gap: 1%;
}

/* Makes windows png look like icon */
.windows-icon {
    width: 10%;
    height: auto;
}

/* Removes spacing between other elements */
.download {margin: 0;}

/* Decoration for download button */
.download-button {
    text-align: center;
    text-decoration: none;
    background-color: var(--orange);
    color: var(--white);
    padding: 5px;
    border: 1px solid var(--dark-orange);
    border-radius: 5px;
}

/* For release page */
.stretch {
    margin-bottom: 60vh;
}

/* Makes description for button grey */
.button-desc {
    margin: 0;
    color: var(--grey);
}

/* Makes table horizontally scrollable (on mobile) */
table {
    background-color: var(--white);
    display: flex;
    overflow-x: auto;
}

/* Format for table cells */
table.periodic-table tr>* {
    min-width: 7.5em;
    height: 7.5em;
    line-height: 0.5;
}

/* Makes all p elements in table.periodic-table to be in top-left of cells */
table.periodic-table p {text-align: left; vertical-align: top;}

/* Makes elements with .hide invisible and not read by screen readers (aria-hidden) */
.hide {visibility: hidden;}

/* Removes color coding cell borders and normal line height */
table.periodic-table :is(.color-code-row1, .color-code-row2, .color-code-row3) {
    border: none;
    line-height: normal;
}

/* Formats color-code-rows neatly */
.color-code-row1 {vertical-align: bottom;}
.color-code-row3 {vertical-align: top;}

/* Sets all bg colors for periodic table */
:is(.highlight1, .alkali-metals)          {background-color: var(--teal);        border: 1px solid var(--black);}
:is(.highlight2, .alkaline-earth-metals)  {background-color: var(--red);         border: 1px solid var(--black);}
:is(.highlight3, .transition-metals)      {background-color: var(--purple);      border: 1px solid var(--black);}
:is(.highlight4, .post-transition-metals) {background-color: var(--green);       border: 1px solid var(--black);}
:is(.highlight5, .metalloids)             {background-color: var(--dark-orange); border: 1px solid var(--black);}
:is(.highlight6, .reactive-nonmetals)     {background-color: var(--dark-blue);   border: 1px solid var(--black);}
:is(.highlight7, .noble-gases)            {background-color: var(--dark-red);    border: 1px solid var(--black);}
:is(.highlight8, .lanthanides)            {background-color: var(--blue);        border: 1px solid var(--black);}
:is(.highlight9, .actinides)              {background-color: var(--orange);      border: 1px solid var(--black);}
:is(.highlight10, .unknown-properties)    {background-color: var(--light-grey);  border: 1px solid var(--black);}

.alkali-metals:hover                      {background-color: var(--hover-teal);}
.alkaline-earth-metals:hover              {background-color: var(--hover-red);}
.transition-metals:hover                  {background-color: var(--hover-purple);}
.post-transition-metals:hover             {background-color: var(--hover-green);}
.metalloids:hover                         {background-color: var(--hover-dark-orange);}
.reactive-nonmetals:hover                 {background-color: var(--hover-dark-blue);}
.noble-gases:hover                        {background-color: var(--hover-dark-red);}
.lanthanides:hover                        {background-color: var(--hover-blue);}
.actinides:hover                          {background-color: var(--hover-orange);}
.unknown-properties:hover                 {background-color: var(--hover-light-grey);}

/* =======================|-------------------|=================== */
/* =======================| Pre-Register Page |=================== */
/* =======================|-------------------|=================== */

/* Makes .back element look like a button */
.back {
    padding: 5px;
    border: 1px solid var(--black);
    border-radius: 10%;
    color: var(--black);
    background-color: var(--light-grey);
    text-decoration: none;
}

/* Makes .back element darker grey when hovering over */
.back:hover {background-color: var(--hover-light-grey);}

fieldset {
    border: 1px solid var(--black);
}

/* Makes titles of questions bold */
.question-label {font-weight: bold;}

/* Fixes website based on min width of most computers */
@media only screen and (min-width: 961px) {

    body {
        /* FIXME: Format bg image (when found) */
        font-family: system-ui, sans-serif;
        font-size: 100%;
        padding: 0;
        margin: 0 18%;
        background-color: var(--black);
    }

    header {
        padding: 3%;
        padding-bottom: 1%;
    }

    main {
        padding: 3%;
        padding-top: 1%;
    }

    .description {margin-top: 0;}
    
}