/* * * * * * * * * * * *\
 *   LCD Calculator    *
 *                     *
 *  By: Dean Wagner    *
 *  me@deanwagner.net  *
 *                     *
 *   Assignment for:   *
 *  The Odin Project   *
 * theodinproject.com  *
\* * * * * * * * * * * */

* {
    box-sizing: border-box;
    cursor: default;
}

/* * * * * * * * *\
 * Element Base  *
\* * * * * * * * */

html, body {
    font-size: 2vmin;
    margin: 0;
    padding: 0;
}

body {
    background-color: #666;
    background-image: linear-gradient(to bottom right, rgba(0,0,0,0),rgba(0,0,0,0.7));
    color: #c5c5c5;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2vmin;
    min-height: 100vh;
    text-shadow: 0.1em 0.1em 0.1em #000;
}

a, a * {
    cursor: pointer;
}

a:link, a:visited {
    color: #f4f4f4;
    text-decoration: underline;
}

a:hover, a:focus, a:active {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 0.2em #fff;
}

/* * * * * * * * *\
 *  GitHub Icon  *
\* * * * * * * * */

.github-link {
    transition: all 0.3s ease-out;
}

.github-link:hover,
.github-link:focus {
    transform: rotate(360deg) scale(1.5);
}

.github-icon {
    filter: drop-shadow(0.1em 0.1em 0.1em #000);
    height: 1.6em;
    transition: all 0.3s ease-out;
    width: 1.6em;
}

.github-link:hover .github-icon,
.github-link:focus .github-icon {
    filter: drop-shadow(0 0 0.3em #fff);
}

.github-path {
    fill: #f4f4f4;
}

/* * * * * * * * *\
 *   Main Grid   *
\* * * * * * * * */

main {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 0 auto;
    max-width: 60em;
    padding: 1em 2em 0;
    width: auto;
}

/* * * * * * * * *\
 *  Page Header  *
\* * * * * * * * */

header {
    display: flex;
    justify-content: space-between;
    grid-column: 1 / span 4; 
    grid-row: 1;
    padding: 0 1em;
}

h1 {
    color: #f4f4f4;
    font-size: 1.2em;
    margin: 0;
    padding: 0;
}

/* * * * * * * * *\
 *  LCD Screen   *
\* * * * * * * * */

#lcd_screen {
    align-items: center;
    background-color: #7d8c73;
    border-color: rgba(0,0,0,0.5);
    border-width: 2px;
    border-style: solid;
    border-radius: 2em;
    box-shadow: inset 0 0 2em rgba(0, 0, 0, 0.5);
    display: none;
    gap: 1em;
    grid-column: 1 / span 4; 
    grid-row: 2;
    justify-content: center;
    margin: 0;
    outline: rgba(255, 255, 255, 0.5) solid 2px;
    padding: 2em;
}

#lcd_screen .lcd_pixels {
    fill: #000000;
}

#lcd_screen .lcd_hide {
    opacity: 0.10;
    transition: opacity 0.3s ease-out;
}

#lcd_screen .lcd_show {
    filter: url(#lcd_shadow);
    opacity: 0.70;
    transition: opacity 0.3s ease-out;
}

#lcd_screen .lcd_off {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* * * * * * * * *\
 * Input Buttons *
\* * * * * * * * */

button {
    background-image: linear-gradient(to bottom right, rgba(0,0,0,0),rgba(0,0,0,0.3));
    background-color: #bababa;
    border-color: rgba(0,0,0,0.5);
    border-width: 2px;
    border-style: solid;
    border-radius: 0.3em;
    box-shadow: 0 0 0.2em rgba(0,0,0,0.8);
    color: #696969;
    cursor: pointer;
    display: block;
    font-size: 3em;
    height: 10vh;
    outline: rgba(255, 255, 255, 0.5) solid 2px;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.4),  
        1px -1px 0 rgba(0,0,0,0.4),
        -1px 1px 0 rgba(255,255,255,0.3),
        1px 1px 0 rgba(255,255,255,0.3);
    transition: all 0.2s ease-out;
    width: auto;
}

button:hover,
button:focus,
button.press {
    background-color: #fff;
    box-shadow: 0 0 0.5em #fff;
    color: #333;
    text-shadow: 0 0 0.1em #333;
}

button:active,
button.press {
    transform: scale(0.9);
}

#btn_c { background-color: #ff4b2e; }
#btn_c:hover, 
#btn_c:focus { 
    background-color: #ff8a8a; 
    box-shadow: 0 0 0.5em #ff8a8a;
}

#btn_b { background-color: #f28500; }
#btn_b:hover, 
#btn_b:focus { 
    background-color: #ffc47d; 
    box-shadow: 0 0 0.5em #ffc47d;
}

#btn_a, #btn_s, #btn_m, #btn_d { background-color: #689ab8; }
#btn_a:hover, #btn_s:hover, #btn_m:hover, #btn_d:hover,
#btn_a:focus, #btn_s:focus, #btn_m:focus, #btn_d:focus { 
    background-color: #cddeee; 
    box-shadow: 0 0 0.5em #cddeee;
}

#btn_e { background-color: #32cd32; }
#btn_e:hover, 
#btn_e:focus { 
    background-color: #a1e8a1;
    box-shadow: 0 0 0.5em #a1e8a1; 
}

#btn_c { grid-column: 1 / span 2; grid-row: 3; }
#btn_b { grid-column: 3; grid-row: 3; }
#btn_d { grid-column: 4; grid-row: 3; }
#btn_7 { grid-column: 1; grid-row: 4; }
#btn_8 { grid-column: 2; grid-row: 4; }
#btn_9 { grid-column: 3; grid-row: 4; }
#btn_m { grid-column: 4; grid-row: 4; }
#btn_4 { grid-column: 1; grid-row: 5; }
#btn_5 { grid-column: 2; grid-row: 5; }
#btn_6 { grid-column: 3; grid-row: 5; }
#btn_s { grid-column: 4; grid-row: 5; }
#btn_1 { grid-column: 1; grid-row: 6; }
#btn_2 { grid-column: 2; grid-row: 6; }
#btn_3 { grid-column: 3; grid-row: 6; }
#btn_a { grid-column: 4; grid-row: 6; }
#btn_n { grid-column: 1; grid-row: 7; }
#btn_0 { grid-column: 2; grid-row: 7; }
#btn_p { grid-column: 3; grid-row: 7; }
#btn_e { grid-column: 4; grid-row: 7; }

/* * * * * * * * *\
 *  Page Footer  *
\* * * * * * * * */

footer {
    font-size: 0.8em;
    grid-column: 1 / span 4; 
    grid-row: 8;
    padding-top: 1em;
    text-align: center;
}