@font-face{
    font-family:'digital';
    src: url("../Glass_TTY_VT220.ttf")
}

* {
  box-sizing: border-box;
}

body {
    height: 100vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(222,209,128);
}

#border {
    padding: 2vmin;
    background-color: rgb(189,189,189);
    border-top: .4vmin solid white;
    border-left: .4vmin solid white;
    border-bottom: .4vmin solid rgb(123,123,123);
    border-right: .4vmin solid rgb(123,123,123);
}

#menu {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(189,189,189);
    width: 60.5vmin;
    height: 9vmin;
    margin: 0 0 2vmin 0;
    padding-right: 3vmin;
    padding-left: 3vmin;
    border-bottom: .4vmin solid white;
    border-right: .4vmin solid white;
    border-top: .4vmin solid rgb(123,123,123);
    border-left: .4vmin solid rgb(123,123,123);
}

.digitalHolder {
    background-color: black;
    height: 4.8vmin;
    width: 8.1vmin;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: .4vmin solid white;
    border-right: .4vmin solid white;
    border-top: .4vmin solid rgb(123,123,123);
    border-left: .4vmin solid rgb(123,123,123);
}

.digital {
    height: 3.2vmin;
    width: 1.76vmin;
    background-size: contain;
    background-repeat: no-repeat;
}

#buttonholder {
    display:flex;
}

#buttonholder > div > img {
    height: 85%;
}

.unpushed{
    height: 6vmin;
    width: 6vmin;
    border-top: .6vmin solid white;
    border-left: .6vmin solid white;
    border-right: .6vmin solid rgb(123,123,123);
    border-bottom: .6vmin solid rgb(123,123,123);
    background-color: rgb(189,189,189);
    display: flex;
    justify-content: center;
    align-items: center;
}

.pushed{
    height: 6vmin;
    width: 6vmin;
    border-top: .8vmin solid rgb(123,123,123);
    border-left: .8vmin solid rgb(123,123,123);
    border-right: .2vmin solid rgb(123,123,123);
    border-bottom: .2vmin solid rgb(123,123,123);
    padding-right: .4vmin;
    padding-bottom: .4vmin;
    background-color: rgb(189,189,189);
    display: flex;
    justify-content: center;
    align-items: center;
}

.boardborder20 {
    display: flex;
    justify-content: center;
    align-items: center;
    width:60.6vmin;
    height:60.6vmin;
    border-bottom: .5vmin solid white;
    border-right: .5vmin solid white;
    border-top: .5vmin solid rgb(123,123,123);
    border-left: .5vmin solid rgb(123,123,123);
}

.boardborder10 {
    display: flex;
    justify-content: center;
    align-items: center;
    width:30.6vmin;
    height:30.6vmin;
    border-bottom: .5vmin solid white;
    border-right: .5vmin solid white;
    border-top: .5vmin solid rgb(123,123,123);
    border-left: .5vmin solid rgb(123,123,123);
}

.boardborder25 {
    display: flex;
    justify-content: center;
    align-items: center;
    width:75.6vmin;
    height:75.6vmin;
    border-bottom: .5vmin solid white;
    border-right: .5vmin solid white;
    border-top: .5vmin solid rgb(123,123,123);
    border-left: .5vmin solid rgb(123,123,123);
}



.board10 {
    display:grid;
    grid-template-columns: repeat(10, 3vmin);
    grid-template-rows: repeat(10, 3vmin);
    gap: 0;
}

.board20 {
    display:grid;
    grid-template-columns: repeat(20, 3vmin);
    grid-template-rows: repeat(20, 3vmin);
    gap: 0;
}

.board25 {
    display:grid;
    grid-template-columns: repeat(25, 3vmin);
    grid-template-rows: repeat(25, 3vmin);
    gap: 0;
}

.unrevealed {
    background-color: rgb(189,189,189);
    border-top: .4vmin solid white;
    border-left: .4vmin solid white;
    border-right: .4vmin solid rgb(123,123,123);
    border-bottom: .4vmin solid rgb(123,123,123);
    color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.revealed {
    border: .1vmin solid rgb(123,123,123);
    background-color: rgb(189, 189, 189);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 2vmin;
}

.difficulty {
    display:none;
}

.typing::after{
    content: "";
    border-right: 1vmin solid black;
    animation: blink 0.6s infinite;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

header {
    margin-bottom: 1vmin;
    font-family: 'digital';
    font-weight: bold;
    width: 65vmin;
}