/* Imported fonts */

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

html {
    /*Set root font size*/
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    /* Overall font family */
    font-family: sans-serif;
}

.display-panel {
    /*Set screen position*/
    width: 75%;
    height: 75vh;
    margin: 5rem auto;
    background-color: rgb(255, 255, 255);

    /*Set Grid*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    justify-items: center;
    grid-column-gap: 1rem;
    padding: 0 1rem;
}

.main-title{
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    text-align: center;
}

.display-value {
    grid-row: 6 / 7;
    grid-column: 1 / 4;

    display: grid;
    grid-template-rows: repeat(3, 33.33%);
    grid-template-columns: repeat(3, 33.33%);

    border-radius: 1rem;
    box-shadow: 0 .5rem .3rem rgba(0, 0, 0, .6);
    width: 100%;
    height: 20rem;
    text-align: center;
}

.display-panel h2 {
    grid-column: 1 / -1;
    padding-top: 1rem;
}

.value {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    font-size: 6rem;
    
}

.display-code {
    grid-row: 6 / 7;
    grid-column: 4 / 7;

    display: grid;
    grid-template-rows: repeat(3, 33.33%);
    grid-template-columns: repeat(3, 33.33%);

    border-radius: 1rem;
    box-shadow: 0 .5rem .3rem rgba(0, 0, 0, .6);
    width: 100%;
    height: 20rem;
    text-align: center;

}

.code {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    font-size: 6rem;
}

.alt-key {
    grid-row: 6 / 7;
    grid-column: 7 / 10;
    
    display: grid;
    grid-template-rows: repeat(3, 33.33%);
    grid-template-columns: repeat(3, 33.33%);

    border-radius: 1rem;
    box-shadow: 0 .5rem .3rem rgba(0, 0, 0, .6);
    width: 100%;
    height: 20rem;
    text-align: center;

}

.alt {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    font-size: 3rem;
    
}

.shift-key {
    grid-row: 6 / 7;
    grid-column: 10 / 13;

    display: grid;
    grid-template-rows: repeat(3, 33.33%);
    grid-template-columns: repeat(3, 33.33%);

    border-radius: 1rem;
    box-shadow: 0 .5rem .3rem rgba(0, 0, 0, .6);
    width: 100%;
    height: 20rem;
    text-align: center;

}

.shift {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    font-size: 3rem;
    
}

.display-panel span {
    text-align: center;
    margin-top: 1rem;
    height: 20rem;
    text-align: center;
}