#topBar {
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    width: clamp(5vw,100vw,320px);
    height: 50px;
    font-family: 'Secular One';
    overflow: hidden;
    font-size:clamp(0.5vw,5vw,15px);
}
    #topBar div {
    text-align: center;
    align-self: center;
    /* justify-self: center; */
}
    #topBar button {
    border: none;
    background-color: transparent;
}
    #topBar img{
    width:clamp(0.5vw,13vw,40px);
}
    #shareButton {
    font-family: 'Secular One';
    font-size: clamp(0.9vw, 4vw, 20px);
    top: 0px;
    width:40%;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    text-align: center;
    background: transparent;
    overflow: hidden;
    box-sizing: border-box;
    transition: height .2s;
    border-color: transparent;
    border-radius: 1rem;
    visibility: visible;
    padding:0;
}
    #shareButton:active{
    background-color: midnightblue;
}
    #notify {
    display: flex;
    font-family: 'Secular One';
    font-size: clamp(0.9vw, 4vw, 22px);
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    top: 0px;
    width: 500px;
    max-width: 95vw;
    height: 0%;
    box-sizing: border-box;
    color: white;
    text-align: center;
    background: rgba(43, 43, 43, 0.6);
    overflow: hidden;
    box-sizing: border-box;
    transition: height .2s;
    border-radius: 1rem;
    visibility: visible;
}
    #notify2 {
    display: flex;
    font-family: 'Secular One';
    font-size: clamp(0.9vw, 4vw, 22px);
    align-items: center;
    justify-content: center;
    margin:4 auto;
    top: 0px;
    width: 500px;
    max-width: 95vw;
    height: 0%;
    box-sizing: border-box;
    color: rgb(224, 224, 224);
    text-align: center;
    background: rgba(43, 43, 43, 0.6);
    overflow: hidden;
    box-sizing: border-box;
    transition: height .2s;
    border-radius: 1rem;
    visibility: visible;
}
    #container {
    display: flexbox;
    font-family: 'Secular One';
    font-size: clamp(1vw,10vw,2em)
}
    .row {
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: row-reverse;
    justify-content: center;
}
    .tile {
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: solid rgb(212, 212, 212);
    border-radius: 5px;
    vertical-align: top;
}
    .tile[data-animation='pop'] {
    animation-name: PopIn;
    animation-duration: 100ms;
}
    @keyframes PopIn {
    from {
    transform: scale(0.8);
    opacity: 0;
}
    40% {
    transform: scale(1.1);
    opacity: 1;
}
}
    .tile[data-animation='flip-in'] {
    animation-name: FlipIn;
    animation-duration: 800ms;
    animation-timing-function: ease-in;
}
    @keyframes FlipIn {
    0% {
    transform: rotateX(0);
}
    50% {
    transform: rotateX(-90deg);
}
    100% {
    transform: rotateX(0);
}
}
    .tile.wakeup {
    animation-name: WakeUp;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
}
    @keyframes WakeUp {
    0% {
    transform: translate(0px,0px)
}
    10% {
    transform: translate(10px,0px)
}
    20% {
    transform: translate(-10px,0px)
}
    30% {
    transform: translate(8px,0px)
}
    40% {
    transform: translate(-8px,0px)
}
    50% {
    transform: translate(6px,0px)
}
    60% {
    transform: translate(-6px,0px)
}
    70% {
    transform: translate(4px,0px)
}
    80% {
    transform: translate(-4px,0px)
}
    90% {
    transform: translate(2px,0px)
}
    100%{
    transform: translate(0,0px)
}
}
    #instructions {
    display: flex;
    left:50%;
    /* margin-left:-125px; */
    width: clamp(20vw,70vw,400px);
    transform: translate(-50%,0%);
    background-color: rgb(243, 243, 243);
    box-shadow:10px 10px 10px -5px rgb(68, 68, 68);
    position: absolute;
    /* z-index: 10;  */
    text-align: right;
    line-height:clamp(0.5vw,7vw,40px);
    padding:20px;
    font-family: 'Secular One';
    font-size: clamp(0.5vw, 3vw, 17px);
    flex-direction: column;
    border-radius:clamp(0.5vw,2vw,10px);
}
    .rulesTitle{
    font-size:clamp(0.5vw, 9vw, 24px);
    align-self: center;
}
    .lineBar{
    width: clamp(20vw,70vw,400px);
    height:2px;
    background-color: rgb(163, 163, 163);
}
    a{
    color:rgb(0, 112, 112);
    text-decoration: none;
}
    #coffee {
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    width: clamp(5vw,100vw,320px);
    height: 50px;
    font-family: 'Secular One';
    overflow: hidden;
    font-size:clamp(0.5vw,7vw,13px);
}
    #keyboard {
    display: flexbox;
    padding-top: 10px;
    border-radius: 10px;
    width: 100vw;
    text-align: center;
}
    #keyboard div {
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-right:14px;
}
    #keyboard button {
    touch-action: manipulation;
    width: clamp(1vw,10vw,40px);
    height: 50px;
    font-family: 'Secular One';
    text-align: center;
    font-size: clamp(0.2vw,8vw,17px);
    border: none;
    border-radius: 5px;
    margin: clamp(0.3vw,0.5vw,2px);
    padding:0;
}
    #keyboard .letter {
    background-color: rgb(209, 209, 209);
    color: black;
}
    #keyboard .send {
    color: rgb(255, 255, 255);
    width: clamp(1.5vw,25vw,100px);
    background-color: rgb(110, 110, 110);
}
    #keyboard .clear{
    color: rgb(235, 235, 235);
    /* width: 70px; */
    background-color: rgb(110, 110, 110);
}