/*
    Root

    description: Contains the variables, button types, and keyframes. - Updated to match Belmont style
    author: Ben Jordan, Kritan Duwal
 */

:root{
    --maincolor: #FFFFFF;
    --maincolor2: crimson;
    --text-color: #000000;
    --text-color-white: #FFFFFF;
    --hovercolor: #EEEEEE;
    --belmont-blue: #00205b;
    --font: Roboto;
    --font-size: 24px;
    --card-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.17);

    --buttonsize: 14px;
    --buttonfont: 8px;
    --buttoncolor1: #9ccbe3;
    --buttoncolor2: #f2bf5a;
    --buttoncolor3: #a6a6a6;
    --bordersize: 0.7px;
}

@keyframes filter {
    from {opacity: 100%; filter: grayscale(0) }
    to {opacity: 40%; filter: grayscale(50%)}
}

@keyframes unfilter {
    from {opacity: 40%; filter: grayscale(50%)}
    to {opacity: 100%; filter: grayscale(0)}
}

@keyframes playfilter {
    from {opacity: 100%; filter: grayscale(0) }
    to {opacity: 20%; filter: grayscale(50%)}
}

@keyframes playunfilter {
    from {opacity: 20%; filter: grayscale(50%)}
    to {opacity: 100%; filter: grayscale(0)}
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Button Styles */
.bluebutton {
    outline: none;
    border-radius: 100%;
    height: var(--buttonsize);
    width: var(--buttonsize);
    background-color: var(--buttoncolor1);
    border: solid;
    border-width: var(--bordersize);
    padding: 0;
    font-size: var(--buttonfont);
    font-weight: bold;
    cursor: pointer;
}

.yellowsquare {
    outline: none;
    border-radius: 15%;
    height: var(--buttonsize);
    width: var(--buttonsize);
    background-color: var(--buttoncolor2);
    border: solid;
    border-width: var(--bordersize);
    padding: 0;
    font-size: var(--buttonfont);
    font-weight: bold;
    cursor: pointer;
}

.barbutton {
    outline: none;
    height: var(--buttonsize);
    min-width: calc(var(--buttonsize) + 20px);
    background-color: var(--buttoncolor3);
    border: solid;
    border-width: var(--bordersize);
    padding: 0 4px;
    font-size: var(--buttonfont);
    font-weight: bold;
    cursor: pointer;
}