html {
    background-color: #858585;
    height: 100%;
    width: 100%;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center; 
}

a {
    margin-top: 1rem;
    color: black;
    text-decoration: none;
}

#grid {
    display: flex;
    flex-wrap: wrap;
    height: 450px;
    width: 450px;
}

#grid div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 100px;
    font-weight:lighter;
    height: 150px;
    width: 150px;
}

.top-a {
    box-sizing: border-box;
    border: solid 4px black;
    border-top: none;
    border-left: none;
}

.top-b {
    box-sizing: border-box;
    border: solid 4px black;
    border-top: none
}

.top-c {
    box-sizing: border-box;
    border: solid 4px black;
    border-top: none;
    border-right: none;
}

.mid-a {
    box-sizing: border-box;
    border: solid 4px black;
    border-left: none;
}

.mid-b {
    box-sizing: border-box;
    border: solid 4px black;
}

.mid-c {
    box-sizing: border-box;
    border: solid 4px black;
    border-right: none;
}

.bot-a {
    box-sizing: border-box;
    border: solid 4px black;
    border-bottom: none;
    border-left: none;
}

.bot-b {
    box-sizing: border-box;
    border: solid 4px black;
    border-bottom: none
}

.bot-c {
    box-sizing: border-box;
    border: solid 4px black;
    border-bottom: none;
    border-right: none;
}

@media screen {
    @media (max-width: 835px) {
        #grid {
            transform: scale(80%);
        }
    }
}