Intro_basicos_HTML_CSS/home/estilo.css

/* tutorials on https://fossheim.io/writing/ */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #333335;
    background-color: #E996AF;
}

.casio {
    display: block;
    width: 960px;
    height: 260px;
    margin: 100px auto 0 auto;
    margin: calc(50vh - 150px) auto 0 auto;
    border-radius: 4px;
    background-color: #EFEFE7;
    background-image: linear-gradient(90deg, #EFEFE7, #F4F3EE);
    position: relative;
    box-shadow: 0 -2px 2px -0.5px #D0CCC1 inset,
        2px 0 2px -0.5px #E1DFE0 inset,
        0 3px 1px #FBFAF8 inset,
        0 45px 10px -25px rgba(0,0,0,0.1),
        0 65px 50px -10px rgba(0,0,0,0.05);
}

.speaker {
    display: block;
    width: 180px;
    height: 200px;
    position: absolute;
    top: 12px;
    left: 14px;
    border-radius: 0.5px;
    background-color: #D6C6A2;
    background-image: linear-gradient(transparent 40%, #EFEFE7 60%),
        linear-gradient(90deg, #BFA58D, transparent 2% 96%, #C9B59A),
        linear-gradient(#D1BBA3 20%, transparent 65%),
        linear-gradient(90deg, #D6C6A2, #E2D9CA),
        linear-gradient(90deg, #D6C6A2, #E2D9CA),
        radial-gradient(#897866 60%, transparent 61%);
    background-size: 100% 8px,
        100% 100%,
        100% 8px,
        6px 100%,
        6px 100%,
        190px 190px;
    background-repeat: repeat,
        no-repeat,
        repeat,
        no-repeat,
        no-repeat,
        no-repeat;
    background-position: 0 0,
        0 0,
        0 0,
        50px 0,
        120px 0,
        -7px 7px;
}

.controls {
    display: block;
    width: 745px;
    height: 80px;
    background-color: transparent;
    position: absolute;
    top: 7px;
    right: 15px;
    box-shadow: 0 2px 0.75px -0.8px #543F44 inset, 0 -2.5px 0.75px -0.8px #543F44 inset;
}

.controls-labels {
    display: block;
    width: 745px;
    height: 30px;
    font-family: sans-serif;
    color: #4F4949;
}

.controls-labels p {
    font-size: 0.5rem;
    letter-spacing: 0.5px;
    display: inline-block;
    border: 1px solid #7A7174;
    padding: 0px 8px;
    border-radius: 2px;
    position: absolute;
    top: 4px;
}

.controls-labels p:nth-child(1) {
    left: 55px;
}

.controls-labels p:nth-child(2) {
    left: 130px;
    padding: 0 15px;
}

.controls-labels p:nth-child(3) {
    left: 265px;
    padding: 0 15px;
}

.controls-labels p:nth-child(4) {
    left: 400px;
}

.controls-labels p:nth-child(5) {
    left: 645px;
    padding: 0 11px;
}

.controls-bar {
    display: block;
    width: 745px;
    height: 30px;
    position: absolute;
    top: 30px;
    background-image: linear-gradient(
            90deg, 
            transparent 0% 2.5%, #DCDCD0 2.5% 5%,
            transparent 5% 7.5%, #E1DFD3 7.5% 10%,
            transparent 10% 12.5%, #D5D5CD 12.5% 15%,
            transparent 15% 17.5%, #DCDCD0 17.5% 20%,
            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
            transparent 25% 27.5%, #D5D5CD 27.5% 30%,
            transparent 30% 32.5%, #DCDCD0 32.5% 35%,
            transparent 35% 37.5%, #E1DFD3 37.5% 40%,
            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
            transparent 45% 47.5%, #DCDCD0 47.5% 50%,
            transparent 50% 52.5%, #E1DFD3 52.5% 55%,
            transparent 55% 57.5%, #D5D5CD 57.5% 60%,
            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
            transparent 65% 67.5%, #E1DFD3 67.5% 70%,
            transparent 70% 72.5%, #D5D5CD 72.5% 75%,
            transparent 75% 77.5%, #DCDCD0 77.5% 80%,
            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
            transparent 85% 87.5%, #D5D5CD 87.5% 90%,
            transparent 90% 92.5%, #DCDCD0 92.5% 95%,
            transparent 95% 97.5%, #E1DFD3 97.5% 100%
        ), linear-gradient(
            90deg, 
            transparent 0% 7%, #DCDCD0 7% 14%,
            transparent 14% 21%, #E1DFD3 21% 28%,
            transparent 28% 35%, #D5D5CD 35% 42%,
            transparent 42% 49%, #DCDCD0 49% 56%,
            transparent 56% 63%, #E1DFD3 63% 70%,
            transparent 70% 77%, #D5D5CD 77% 84%,
            transparent 84% 91%, #DCDCD0 91% 98%,
            transparent 98%
        ), linear-gradient(
            90deg, 
            transparent 0% 2.5%, #E0DED1 2.5% 5%,
            transparent 5% 7.5%, #DDDBCE 7.5% 10%,
            transparent 10% 12.5%, #DEDCCF 12.5% 15%,
            transparent 15% 17.5%, #E0DED1 17.5% 20%,
            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
            transparent 25% 27.5%, #DDDBCE 27.5% 30%,
            transparent 30% 32.5%, #DEDCCF 32.5% 35%,
            transparent 35% 37.5%, #E0DED1 37.5% 40%,
            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
            transparent 45% 47.5%, #DDDBCE 47.5% 50%,
            transparent 50% 52.5%, #E4E2D6 52.5% 55%,
            transparent 55% 57.5%, #E0DED1 57.5% 60%,
            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
            transparent 65% 67.5%, #DDDBCE 67.5% 70%,
            transparent 70% 72.5%, #DEDCCF 72.5% 75%,
            transparent 75% 77.5%, #E0DED1 77.5% 80%,
            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
            transparent 85% 87.5%, #E4E2D6 87.5% 90%,
            transparent 90% 92.5%, #E0DED1 92.5% 95%,
            transparent 95% 97.5%, #E1DFD3 97.5% 100%
        ), linear-gradient(
            90deg, 
            transparent 0% 7%, #CAC8BC 7% 14%,
            transparent 14% 21%, #DBD9CD 21% 28%,
            transparent 28% 35%, #D0CEC2 35% 42%,
            transparent 42% 49%, #CAC8BC 49% 56%,
            transparent 56% 63%, #DBD9CD 63% 70%,
            transparent 70% 77%, #D0CEC2 77% 84%,
            transparent 84% 91%, #CAC8BC 91% 98%,
            transparent 98%
        ), linear-gradient(
            90deg, 
            transparent 0% 2.5%, #E0DED1 2.5% 5%,
            transparent 5% 7.5%, #DDDBCE 7.5% 10%,
            transparent 10% 12.5%, #DEDCCF 12.5% 15%,
            transparent 15% 17.5%, #E0DED1 17.5% 20%,
            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
            transparent 25% 27.5%, #DDDBCE 27.5% 30%,
            transparent 30% 32.5%, #DEDCCF 32.5% 35%,
            transparent 35% 37.5%, #E0DED1 37.5% 40%,
            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
            transparent 45% 47.5%, #DDDBCE 47.5% 50%,
            transparent 50% 52.5%, #E4E2D6 52.5% 55%,
            transparent 55% 57.5%, #E0DED1 57.5% 60%,
            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
            transparent 65% 67.5%, #DDDBCE 67.5% 70%,
            transparent 70% 72.5%, #DEDCCF 72.5% 75%,
            transparent 75% 77.5%, #E0DED1 77.5% 80%,
            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
            transparent 85% 87.5%, #D5D5CD 87.5% 90%,
            transparent 90% 92.5%, #DCDCD0 92.5% 95%,
            transparent 95% 97.5%, #E1DFD3 97.5% 100%
        ), linear-gradient(
            90deg, 
            transparent 0% 2.5%, #DCDCD0 2.5% 5%,
            transparent 5% 7.5%, #E1DFD3 7.5% 10%,
            transparent 10% 12.5%, #D5D5CD 12.5% 15%,
            transparent 15% 17.5%, #DCDCD0 17.5% 20%,
            transparent 20% 22.5%, #E1DFD3 22.5% 25%,
            transparent 25% 27.5%, #D5D5CD 27.5% 30%,
            transparent 30% 32.5%, #DCDCD0 32.5% 35%,
            transparent 35% 37.5%, #E1DFD3 37.5% 40%,
            transparent 40% 42.5%, #D5D5CD 42.5% 45%,
            transparent 45% 47.5%, #DCDCD0 47.5% 50%,
            transparent 50% 52.5%, #E1DFD3 52.5% 55%,
            transparent 55% 57.5%, #D5D5CD 57.5% 60%,
            transparent 60% 62.5%, #DCDCD0 62.5% 65%,
            transparent 65% 67.5%, #DDDBCE 67.5% 70%,
            transparent 70% 72.5%, #DEDCCF 72.5% 75%,
            transparent 75% 77.5%, #E0DED1 77.5% 80%,
            transparent 80% 82.5%, #E1DFD3 82.5% 85%,
            transparent 85% 87.5%, #E4E2D6 87.5% 90%,
            transparent 90% 92.5%, #E0DED1 92.5% 95%,
            transparent 95% 97.5%, #E1DFD3 97.5% 100%
        ), linear-gradient(
            90deg, 
            transparent 0% 7%, #CAC8BC 7% 14%,
            transparent 14% 21%, #DBD9CD 21% 28%,
            transparent 28% 35%, #D0CEC2 35% 42%,
            transparent 42% 49%, #CAC8BC 49% 56%,
            transparent 56% 63%, #DBD9CD 63% 70%,
            transparent 70% 77%, #D0CEC2 77% 84%,
            transparent 84% 91%, #CAC8BC 91% 98%,
            transparent 98%
        ), linear-gradient(90deg, #F1EEE7, #EDE8E2, #EBE8E1);
    background-size: 52px 20px,
        16px 20px,
        52px 20px, 
        16px 20px,
        52px 20px, 
        52px 20px,
        16px 20px,
        100% 100%;
    background-repeat: no-repeat;
    background-position: 1px 5px, 
        107px 5px, 
        203px 5px, 
        325px 5px,
        537px 5px,
        589px 5px,
        730px 5px,
        top left;
    box-shadow: 0 2px 1px -1px #C1BEB5 inset, 0 -2px 1px -1px #FCFCFA inset, 1px 0 0.5px -0.5px #DFDFD7 inset, -2.5px 0 1px -1px #D4CDC5 inset;
    border-radius: 1px;
}

.mode-container {
    display: block;
    width: 45px;
    height: 20px;
    border-radius: 2px;
    background-image: linear-gradient(90deg,#E6E4D7, #EAE7DE);
    position: absolute;
    top: 5px;
    left: 55px;
    box-shadow: 0 4.5px 1px -2px #837363 inset,
        4px 0 3px -2px #BEB8A8 inset,
        -3px 0 2px -2px #DBDBD3 inset,
        0 -0.5px 1px #DBD8CF inset,
        0 1px 0.5px -0.75px #FFFCF5;
}

.mode-bar {
    display: block;
    width: 35px;
    height: 8px;
    background-color: black;
    position: absolute;
    left: 5px;
    top: 7px;
    background-image: linear-gradient(#1E1E23 45%, #3D3D3D 55%);
    border-radius: 1px;
    box-shadow: 0 -0.5px 0.5px 0 #D6DBDE, 0 0 1px 0.5px #F7F4ED, 0 -1.25px 2px -1px #2A2925 inset, 0 1.25px 2px -1px black inset;
}

.mode-handle {
    display: block;
    width: 14px;
    height: 7px;
    border-radius: 3px;
    position: absolute;
    top: 8px;
    left: 7px;
    background-image: radial-gradient(transparent 40%, #1A1C1D 70%),
        linear-gradient(#23272A 60%, #484852 70%);
    box-shadow: 0 1.5px 1px -1px #676B6E inset,
        1px 3px 2px -2px #6B685F,
        3px 5px 5px rgba(110, 106, 94, 0.3);
}

.volume-container {
    display: block;
    width: 65px;
    height: 20px;
    position: absolute;
    top: 5px;
    left: 130px;
    border-radius: 2px;
    background-image: linear-gradient(90deg, #E5E0DA, #F0EEE1);
    box-shadow: 0 1px 0.5px -0.75px #FFFCF5,
        0 3.5px 1.5px -1.5px #807060 inset,
        0 -1.75px 2px -2px #ECE9E0 inset,
        3.5px 0 2px -2px #C7BFB2 inset,
        -1.5px 0 0.5px -0.75px #DBD8D1 inset,
        0 -0.5px 1px #D2D1CF;
}

.volume-bar {
    display: block;
    width: 55px;
    height: 10px;
    position: absolute;
    top: 6px;
    left: 5px;
    border-radius: 1px;
    background-image: linear-gradient(#1D1E23 45%, #3F3D40 55%);
}

.volume-handle {
    display: block;
    width: 19px;
    height: 19px;
    border-radius: 2px;
    position: absolute;
    left: 14px;
    top: 1px;
    background-color: #6A6964;
    background-image: radial-gradient(#262626 50%, #3E3D39 80%),
        radial-gradient(#353537, #3E3E40 80%, #323031 90%),
        linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%),
        linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%);
    background-size: 17px 4px,
        15px 15px,
        3px 20px,
        3px 20px;
    background-repeat: no-repeat;
    background-position: bottom left,
        2px 0,
        top right,
        top left;
    box-shadow: 0 1.5px 0.75px -0.5px #454442 inset,
        0 2px 1px -0.5px #797876 inset,
        -0.5px 0 0.5px rgba(30,32,36,0.5) inset,
        5px 0 6px -2px rgba(24,23,28,0.3),
        0 5px 4px rgba(76,74,72,0.3),
        0 6px 2px -3px rgba(76,74,72,0.75);
}

.tone-container {
    display: block;
    width: 52px;
    height: 20px;
    position: absolute;
    left: 265px;
    top: 5px;
    border-radius: 2px;
    box-shadow: 0 3.5px 1.5px -1.5px #6B5E4B inset,
        4px 0 3px -2px #A9A79B inset,
        -3px 0 2px -2px #D1CAB7 inset,
        0 -0.5px 1px #DEDCD0 inset,
        0 1px 0.5px -0.75px #FFFCF5;
    background-image: linear-gradient(90deg, rgba(207,202,196,0.5), rgba(246,243,226,0.5));
}

.tone-bar {
    display: block;
    width: 45px;
    height: 9px;
    position: absolute;
    left: 3px;
    top: 6px;
    background-image: linear-gradient(#282C2D 25%, #3C3D3F 35%, #373739);
    border-radius: 1px;
    box-shadow: 0 0.5px 0.5px #F8F5EC,
        -1px 0 0.5px #CBC8C1,
        1px 0 0.5px #E9EBDD,
        0 -1px 0.5px #E2E2E2;
}

.tone-handle {
    display: block;
    position: absolute;
    width: 19px;
    height: 18px;
    border-radius: 2px;
    left: 5px;
    top: 1px;
    background-color: #6A6964;
    background-image: radial-gradient(#272729, #22211C 60%, #5F5C55),
        radial-gradient(#3E3F41, #363638 80%, #272729 90%),
        linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%),
        linear-gradient(#4F4A46, #65645F);
    background-size: 18px 4px,
        15px 15px,
        2px 20px,
        3px 20px;
    background-repeat: no-repeat;
    background-position: bottom left,
        2.25px 0,
        top right,
        top left;
    box-shadow: 0 1.5px 0.75px -0.5px #494846 inset,
        0 2.5px 1px -0.75px #313131 inset,
        -0.75px 0 0.5px -0.25px #454545 inset,
        0.5px 0 0.5px #3D3A35 inset,
        0 5px 4px 1px rgba(76,74,72,0.4),
        0 6px 2px -3px rgba(76,74,72,0.7);
}

.btn {
    display: block;
    width: 9px;
    height: 20px;
    position: absolute;
    top: 5px;
    border-radius: 1px;
}

.clear.btn {
    left: 350px;
    background-color: #7C99DB;
    box-shadow:  0 -1px 1px -0.5px #2F3B43 inset,
        0 -2px 0.5px -0.5px #474D67 inset,
        0 0 1px 1.25px #93A6D1 inset,
        0 0 1px 0.5px #889FBF inset,
        0 3px 3px -1px #59524C,
        0 4px 4px -1px #9D998E,
        -0.5px 0 0.5px #707E9A,
        0 2px 4px #D6D4C5;
}

.del.btn {
    left: 375px;
    background-color: #EB8372;
    box-shadow:   0.5px 0 0.5px #945C4E inset,
        0 -1px 1px -0.5px #6A331E inset,
        0 -2px 0.5px -0.5px #A65F50 inset,
        0 0 1px 1.25px #D38671 inset,
        0 0 1px 0.5px #EF8C7F inset,
        0 3px 3px -1px #966C51,
        0 4px 4px -1px #C9A99A,
        -0.5px 0 0.5px #D5AEA2,
        0 2px 4px #DBBBB0;
}

.down.btn {
    left: 400px;
    background-color: #EE8273;
    box-shadow:   0.5px 0 0.5px #C07C69 inset,
        0 -1px 1px -0.5px #6A331E inset,
        0 -2px 0.5px -0.5px #A65F50 inset,
        0 0 1.25px 1px #EC8775 inset,
        0 0 1px 0.5px #EF8C7F inset,
        0 3px 3px -1px #966C51,
        0 4px 4px -1px #C9A99A,
        -0.5px 0 0.5px #D5AEA2,
        0 2px 4px #DBBBB0;
}

.up.btn {
    left: 425px;
    background-color: #EB8372;
    box-shadow:   0.5px 0 0.5px #945C4E inset,
        0 -1px 1px -0.5px #6A331E inset,
        0 -2px 0.5px -0.5px #A65F50 inset,
        0 0 1.25px 1px #D38671 inset,
        0 0 1px 1px #EF8C7F inset,
        0 3px 3px -1px #966C51,
        0 4px 4px -1px #C9A99A,
        -0.5px 0 0.5px #D5AEA2,
        0 2px 4px #DBBBB0;
}

.select.btn {
    left: 450px;
    background-color: #EE8273;
    box-shadow:   0.5px 0 0.5px #945C4E inset,
        0 -1px 1px -0.5px #6A331E inset,
        0 -2px 0.5px -0.5px #A65F50 inset,
        0 0 1.25px 1px #D38671 inset,
        0 0 1px 1px #EF8C7F inset,
        0 3px 3px -1px #966C51,
        0 4px 4px -1px #C9A99A,
        -0.5px 0 0.5px #D5AEA2,
        0 2px 4px #DBBBB0;
}

.reset.btn {
    left: 475px;
    background-color: #EDAF5D;
    box-shadow: 0.75px 0 0.5px #AE8059 inset,
        0 -0.75px 0.5px #975A2B inset,
        0 0 1px 1.5px #E3AC75 inset,
        0 0 1px 3px #E6AE60 inset,
        0 3px 3px -1px #966C51,
        0 4px 4px -1px #C9A99A,
        1px 0 3px #F8CD94,
        -1px 0 5px -2px #D1A78E,
        0 0 4px 1px #EAD4B4;
}

.demo.btn {
    left: 500px;
    background-color: #8ED8C5;
    box-shadow: 1.25px 0 0.5px #729883 inset,
        0.5px 0 1px 2px #9AD4BE inset,
        -3px 0 4px -2px #B4BFAF,
        0 3px 3px -1px #464F3E,
        0 0 5px #D6E4DA,
        0 0 7px #D1D1C7;
}

.memory.btn {
    left: 525px;
    background-color: #92A5C3;
    box-shadow:  0 -1px 1px -0.5px #2F3B43 inset,
        0 -2px 0.5px -0.5px #474D67 inset,
        0 0 1px 1.25px #93A6D1 inset,
        0 0 1px 0.5px #889FBF inset,
        0 3px 3px -1px #59524C,
        0 4px 4px -1px #9D998E,
        -0.5px 0 0.5px #707E9A,
        0 2px 4px #D6D4C5;
}

.bigbtn {
    display: block;
    width: 35px;
    height: 20px;
    background-color: red;
    border-radius: 3px;
    position: absolute;
    top: 4px;
    background-color: #759ADE;
}

.bigbtn.onekey-1 {
    right: 65px;

    background-image: linear-gradient(
        transparent 25%,

        #405E94 28%,
        #A4BFF6 31%,
        #8398D1 34%,

        #405E94 37%,
        #A4BFF6 40%,
        #8398D1 43%,

        #405E94 46%,
        #A4BFF6 49%,
        #8398D1 52%,

        #405E94 55%,
        #A4BFF6 58%,
        #8398D1 61%,

        #405E94 64%,
        #A4BFF6 67%,
        #8398D1 70%,

        #405E94 73%,
        #A4BFF6 76%,
        #8398D1 79%,
        
        transparent 80%
    );
    box-shadow: 0 -0.5px 1px #15172C inset,
        1.25px 0 0.5px -0.5px #3B3B47 inset,
        2.5px 0 1px #65748B inset,
        3.5px 0 1px #98AED3 inset,
        0 1px 1px #D4E0FA inset,
        0 -1.5px 1px #8DA3D4 inset,
        -0.5px 0 0.5px #9AAED1 inset,
        -0.75px 0.25px 0.5px #2C2C38,
        -1.25px -0.1px 0.1px #EDEEF3,
        0 5px 3px -2.5px #4F4B40,
        0 3px 4px -1px #ACA59D,
        0 4px 5px #CFCBCA;
}

.bigbtn.onekey-2 {
    right: 20px;

    background-image: linear-gradient(
        transparent 25%,

        #405E94 28%,
        #A4BFF6 31%,
        #8398D1 34%,

        #405E94 37%,
        #A4BFF6 40%,
        #8398D1 43%,

        #47659B 46%,
        #A4BFF6 49%,
        #8398D1 52%,

        #5871A7 55%,
        #A4BFF6 58%,
        #8398D1 61%,

        #405E94 64%,
        #A4BFF6 67%,
        #8398D1 70%,

        #5871A7 73%,
        #A4BFF6 76%,
        #8398D1 79%,
        
        transparent 80%
    );
    box-shadow: 0 -0.5px 1px #535E70 inset,
        1.25px 0 0.5px -0.5px #3B3B47 inset,
        2.5px 0 1px #65748B inset,
        3.5px 0 1px #98AED3 inset,
        0 1px 1px #D4E0FA inset,
        0 -1.5px 1px #8DA3D4 inset,
        -0.5px 0 0.5px #9AAED1 inset,
        -0.75px 0.25px 0.5px #454F59,
        -1.25px -0.1px 0.1px #EDEEF3,
        0 5px 3px -2.5px #433E38,
        0 3px 4px -1px #C0B9B1,
        0 4px 5px #CFCBCA;
}

.keys-container {
    display: block;
    width: 720px;
    height: 150px;
    position: absolute;
    bottom: 0;
    right: 35px;
    background-color: #E3DFDA;
    background-image: linear-gradient(90deg, #E3DFDA, #DFDCD3);
    border-radius: 0.5px;
    box-shadow: 0 3px 1.25px -0.75px #282421 inset,
        5px 0 2px #AFA896 inset,
        -2px 0 4px #9F9684 inset,
        -6px 0 2px #BFB3A5 inset,
        0 -1.5px 1px 1px #F1F6EF;
}

.white {
    width: 710px;
    height: 135px;
    background-color: #141312;
    position: absolute;
    top: 2px;
    left: 5px;
    box-shadow:  -1px 0 2px -1px rgba(40,36,33,0.35),
        3px 0 2px -1px rgba(40,36,33,0.5),
        -2px 0 3px -2px #574E45,
        0 8px 6px -3px #CBC8B9;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2px;

}

.white .key {
    height: 133px;
    background-color: #E9E7D8;
    border-radius: 3px;
    background-image: linear-gradient(#E9E7D8, #F4F2E3);
    box-shadow: 1px 0 1px -0.5px #F6EDDC inset,
        -1.25px 0 0.5px -0.5px #9D9885 inset, 
        0 0 1px 2px #F7F5E8 inset,
        0 10px 5px -5px rgba(34,33,28,0.75),
        0 10px 7px -3px rgba(40,36,33,0.25);
}

.black {
    display: grid;
    width: 665px;
    height: 72px;
    position: absolute;
    top: 2px;
    left: 35px;
    grid-template-columns: 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px;
    -ms-grid-columns: 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px;
    grid-gap: 21px;
}

.black .key {
    background-color: #000;
    background-image: linear-gradient(
        #B5BDD2 15%,
        #556478 17%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
    box-shadow: 1px 0 1px #1D212D inset,
        2px 0 1px #252D3A inset, 
        -2px 0 0.75px #252D3A inset, 
        0 -2px 0.5px #22252A inset,
        0 -6px 0.5px #3B3F42 inset,
        0 0 0.5px 1px #181913,
        7px 7px 1px -5px #FAFBF3,
        -7.25px 7px 1px -5px #FAFBF3;
    border-radius: 1.5px;
}

.black .key:nth-child(1) {
    background-image: linear-gradient(
        #B5BDD2 4%,
        #556478 7%,
        #3C4759 50%,
        #262E31 90%
    );
}

.black .key:nth-child(4) {
    background-image: linear-gradient(
        176deg,
        #B5BDD2 4%,
        #556478 8%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}

.black .key:nth-child(5) {
    background-image: linear-gradient(
        178deg,
        #B5BDD2 2%,
        #556478 3%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}

.black .key:nth-child(7) {
    background-image: linear-gradient(
        #B5BDD2 12%,
        #556478 15%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}

.black .key:nth-child(8) {
    background-image: linear-gradient(
        182deg,
        #B5BDD2 2%,
        #556478 3% 10%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}

.black .key:nth-child(9) {
    background-image: linear-gradient(
        #B5BDD2 7%,
        #556478 10% 20%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}

.black .key:nth-child(11) {
    background-image: linear-gradient(
        182deg,
        #B5BDD2 7%,
        #556478 10% 20%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}

.black .key:nth-child(12) {
    background-image: linear-gradient(
        181deg,
        #B5BDD2 5%,
        #556478 8%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}


.black .key:nth-child(14) {
    background-image: linear-gradient(
        #B5BDD2 2%,
        #556478 8%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}

.black .key:nth-child(15) {
    background-image: linear-gradient(
        175deg,
        #B5BDD2 3%,
        #556478 8% 15%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}

.black .key:nth-child(16) {
    background-image: linear-gradient(
        179deg,
        #B5BDD2 5%,
        #556478 7%,
        #3C4759 30%,
        #262E31 90%,
        #192026 92%
    );
}

.logo {
    position: absolute;
    top: 225px;
    left: 15px;
    display: block;
    width: 180px;
}

.logo h1 {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.logo h1 span:first-child {
    color: #6C4351;
    text-shadow: 0 0 1px #C3A9B2, 0 0 2px #EEDFE2;
}

.logo h1 span:last-child {
    color: #ECE8E5;
    letter-spacing: 1px;
    text-shadow: 0px 0.5px 0.75px #BCBBB7,
        0.5px 0.5px 0.75px #BCBBB7,
        0.5px 0px 0.75px #BCBBB7,
        0.5px -0.5px 0.75px #BCBBB7,
        0 -0.5px 0.75px #BCBBB7,
        -0.5px -0.5px 0.75px #BCBBB7,
        -0.5px 0.5px 0.75px #BCBBB7,
        -0.5px 0 0.75px #BCBBB7;
}

/* 
  If you like my work: 
    https://www.buymeacoffee.com/fossheim
    https://www.patreon.com/fossheim
*/