/* VT323 and Ubuntu fonts */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');

:root {
    font-size:100%; /* 16px on most browsers */
    box-sizing:border-box;
    --teal:hsla(188, 62%, 43%, 1);
    --teal-green:hsla(182, 71%, 20%, 1);
    --dark-teal-green:hsla(194, 66%, 15%, 1);
    --spearmint:hsla(159, 44%, 72%, 1);
    --mint:hsla(138, 100%, 93%, 1);
    --light-orange:hsla(39, 97%, 60%, 1);
}
* {
    margin:0;
    padding:0;
    box-sizing:inherit;
}
body {
    background-color:var(--spearmint);
}
.content-wrapper {
    background-color:var(--teal);
    width:20.3125em; /* 325px */
    height:31.25em; /* 500px */
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    border-radius:2.1875em; /* 35px */
    box-shadow:inset 2px 2px 3px hsla(0, 0%, 100%, .6),
    7px 7px 20px 2px rgba(1, 2, 2, 0.75);
}
.display {
    background-color:var(--mint);
    font-family:'VT323', monospace;
    width:17.5em; /* 280px */
    height:6.25em; /* 100px */
    margin:1.25em auto 0 auto; /* 20px */
    border-radius:2.1875em 2.1875em 0 0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    box-shadow:inset 0px 3px 8px hsla(0, 0%, 0%, .6);
}
.input, .history {
    color:var(--dark-teal-green);
    margin-right:1.25rem;
}
.input {
    font-size:3.375em; /* 54px */
}
.buttons {
    width:17.5em;
    margin:1.5625em auto; /* 25px */
    display:grid;
    grid-template:repeat(5, 1fr) / repeat(4, 1fr);
    column-gap:1.25em;
    row-gap:0.9375em;
}
button {
    background-color:var(--teal-green);
    color:var(--mint);
    font-family:'Ubuntu', sans-serif;
    font-size:1.5em;
    border:none;
    border-radius:5px;
    width:3.4375rem; /* 60px */
    height:3.4375rem;
    justify-self:center;
    cursor:pointer;
    box-shadow:inset 2px 2px 3px hsla(0, 0%, 100%, .2),
        5px 5px 20px hsla(182, 71%, 20%, .3);
}
button:active {
    background-color:hsla(182, 71%, 30%, 1);
    box-shadow:inset 2px 2px 3px hsla(0, 0%, 0%, .45),
       -5px -5px 20px hsla(182, 71%, 20%, .3);
}
.number:active {
    background-color:hsla(194, 66%, 25%, 1);
}
.equals:active {
    background-color:hsla(39, 97%, 70%, 1);
}
.clear {
    width:8.125rem; /* 130px*/
    grid-column:1/3;
}
.equals {
    background-color:var(--light-orange);
    color:var(--dark-teal-green);
}
.number {
    background-color:var(--dark-teal-green);
}
footer {
    color:hsla(0, 0%, 0%, 1);
    opacity:.5;
    font-family:sans-serif;
    text-align:center;
    padding-top:5px;
    line-height:1.25;
}
footer a {
    color:var(--dark-teal-green);
    cursor:pointer;
}
footer a:focus, footer a:hover {
    color:hsla(194, 66%, 35%, 1);
}
.top-triangle, .bottom-triangle {
    display:none;
}
/* SVGs are only visible on tablet sized devices and up*/
@media (min-width: 768px) and (min-height:768px) {
    .top-triangle, .bottom-triangle {
        display:block;
        position:absolute;
        left:0;
        width:100%;
        line-height:0;
    }
    .top-triangle {
        top:0;
    }
    .bottom-triangle {
        bottom:0;
        transform:rotate(180deg);
    }
    .top-triangle .shape-fill, .bottom-triangle .shape-fill {
        fill:hsla(138, 100%, 93%, .65);
    }
    .top-triangle svg, .bottom-triangle svg {
        position:relative;
        display:block;
        width:calc(100% + 1.3px);
        height:80px;
        transform:rotateY(180deg);
        filter:drop-shadow(8px 8px 5px hsla(182, 71%, 20%, .3));
    }
}