/* Gregory Ecklund */
/* February 2023 */

/* Background Color */
body {
    background-color: lime;
}

/* Table */
table {
    border-spacing: 0px;
    cursor: default;
}
td {
    font-size: 16px;
    border-style: solid;
    border-color: black;
    height: 60px;
    width: 60px;
    text-align: center;
    font-weight: bolder;
    border-width: 1px
}
.BLANKSPACE {
    border-color: lime;
}
.pTable {
    margin-left: auto;
    margin-right: 30%;
}

/* Blue Staircase */
#boronSquare {
    border-bottom-color: blue;
    border-bottom-width: 2px;
}
#tennessineSquare {
    border-top-color: blue;
    border-top-width: 2px;
}
#aluminiumSquare, #germaniumSquare, #antimonySquare, #poloniumSquare {
    border-right-color: blue;
    border-top-color: blue;
    border-right-width: 2px;
    border-top-width: 2px;
}
#siliconSquare, #arsenicSquare, #telluriumSquare, #astatineSquare {
    border-left-color: blue;
    border-bottom-color: blue;
    border-left-width: 2px;
    border-bottom-width: 2px;
}

/* Element Category Coloring */
.reactiveNonMetal {
    background-color: yellow;
}
.nobleGas {
    background-color: #46BDC6
}
.postTransitionMetal {
    background-color: #999999
}
.metalloid {
    background-color: #93C47D
}
.transitionMetal {
    background-color: #EAD1DC
}
.alkaliMetal {
    background-color: #FFC90E;
}
.alkalineEarthMetal {
    background-color: #F9CB9C
}
.lanthanide {
    background-color: #d4aded
}
.actinide {
    background-color: #bd919c
}
.unknown {
    background-color: #D9D9D9
}

/* D-F Block */
#lanthanumSquare, #actiniumSquare {
    border-right-color: goldenrod;
    border-right-width: 3px;
}
#ceriumSquare, #thoriumSquare {
    border-left-color: goldenrod;
    border-left-width: 6px;
}
#hafniumSquare, #rutherfordiumSquare {
    border-left-color: goldenrod;
    border-left-width: 3px;
}

/* Timer */
#seconds {
    float: right;
}
#minutes {
    float: right;
}
#colon {
    float: right;
}
.timer {
    display: flex;
    float: right;
    margin-right: 100px;
    font-size: 40px;
    text-align: center;
    margin-top: -400px;
    visibility: hidden;
}

/* Start Button */
#start {
    align-content: center;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 5px;
    padding-top: 5px;
}

/* Text Input */
.inputClass {
    text-align: center;
    margin-right: 30%;
}
#input {
    padding: 7.5px;
    visibility: hidden;
}

/* Win/Lose Text */
.textClass {
    text-align: center;
    margin-right: 30%;
}
#text {
    visibility: hidden;
    font-size: 24px;
}

/* Navbar */
.navbar {
    overflow: hidden;
    margin-bottom: 2%;
}
/* Navbar Elements */
.navbar a {
    float: left;
    text-decoration: none;
}
/* Navbar Dropdown Containers */
.dropdown {
    float: left;
    overflow: hidden;
}
/* Change Background Color on Hover */
.navbar a:hover, .dropdown:hover .dropdownLabel {
    background-color: lightgreen;
}
/* Dropdown Div */
.dropdownLinks {
    display: none;
    position: absolute;
}
/* Dropdown Options */
.dropdownLinks a {
    float: none;
    display: block;
}
/* Display Dropdown Options on Hover */
.dropdown:hover .dropdownLinks {
    display: block;
}
/* Background Color and Border */
.navbar a, .dropdownLabel {
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: lightskyblue;
    padding: 15px;
    font-size: 16px;
    color: black;
    text-align: left;
}