@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

html, body {
    width: 100%;
    text-align: left;
    margin: auto;
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 16px;
}

body {
    width: 50em;
    max-width: 800px;
}

header {
    height: 6em;
}

article {
    min-height: 100%;
    margin-bottom: -2em; /* - footer height */
}

article:after {
    content: "";
    display: block;
}

footer, article:after {
    height: 2em;
    padding-top: 2em;
    width: 100%;
    margin: auto;
    text-align: center;
}

.brand {
    text-transform: capitalize;
}

#logo {
    padding-top: 6em;
    width: 100%;
    margin: auto;
    text-align: center;
    display: inline-block;
    position: relative;
    z-index: -1;
}

.keyboard {
    rotate: 2deg;
    display: inline-block;
}

.row {
    float: left;
    clear: both;

}

.key {
    display: inline-block;
    border: 2pt solid black;
    border-radius: 5pt;
    box-shadow: 5pt 2pt 5pt 2pt silver;
    height: 100pt;
    width: 100pt;
    margin: 5pt;
    font-family: Arial, sans-serif;
    font-weight: normal;
}

.key .text {
    position: relative;
    top: 10pt;
    left: 10pt;
    font-size: 30pt;
}

.key span {
    float: left;
    clear: both;
    margin-bottom: 0.5em;
}

#gecko {
    width: 300pt;
    position: absolute;
    left: 80pt;
    top: -110pt;
    rotate: 170deg;
}

#ctrl {
    width: 180pt;
}

#shift {
    width: 140pt;
}

#fn,
#brackets {
    width: 100pt;
}

#shift,
#fn,
#brackets {
    border-color: grey;
    background-color: #d9d9d9;
}

#shift .text {
    font-size: 50pt;
    /*font-stretch: ultra-expanded;*/
    line-height: 10pt;
    position: relative;
    top: 28pt;
}