style.css

* {
    margin: 0;
    padding: 0;
    font-family: "Bebas Neue", cursive;
    letter-spacing: 2px;
}

body {
    background: rgb(241, 241, 241);
}

.header {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    box-shadow: 0px 3px 10px 10px rgba(0, 0, 0, 0.24);
    background: rgb(96, 80, 238);
}

.header > span {
    font-size: 25px;
    margin-left: 10px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.logo {
    width: 60px;
    height: 60px;
}

.logo > img {
    width: 100%;
}

.logo > img:hover {
    cursor: pointer;
}

.board {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60vh;
}

.screen {
    width: 80%;
    height: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    background: linear-gradient(
        0deg,
        rgb(223, 245, 255) 21%,
        rgb(223, 245, 255) 100%
    );
    box-shadow: 0 0 0 5px black inset;
    border-radius: 15px;
}

.input {
    height: 100px;
    text-align: center;
}

.input > form > input {
    text-align: center;
    width: 100px;
    height: 100%;
    font-size: 80px;
    outline: none;
    border: black solid;
    border-width: 0px;
    box-shadow: 5px 5px 10px 2px rgba(131, 131, 131, 0.315);
    border-radius: 10px;
    transition: border-width 500ms ease-out;
}

.input > form > input:focus {
    border-width: 3px black;
}