.grid-container {
    font-size: xx-large;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "Cat1 Cat2 Cat3 Cat4""Cat5 Random-Letter Random-Letter Cat6""Cat7 Cat8 Cat9 Cat10";
}
.grid-container img {
    width: 100px;
    margin-bottom: 20px;
}

.Cat1 {
    margin: auto;
    grid-area: Cat1;
}

.Cat2 {
    margin: auto;
    grid-area: Cat2;
}

.Cat3 {
    margin: auto;
    grid-area: Cat3;
}

.Cat4 {
    margin: auto;
    grid-area: Cat4;
}

.Cat5 {
    margin: auto;
    grid-area: Cat5;
}

.Random-Letter {
    margin: auto;
    transition: transform .6s;
    grid-area: Random-Letter;
}

#displayLetter {
    font-family: 'Fredoka One', cursive;
}
.Cat6 {
    margin: auto;
    grid-area: Cat6;
}

.Cat7 {
    margin: auto;
    grid-area: Cat7;
}

.Cat8 {
    margin: auto;
    grid-area: Cat8;
}

.Cat9 {
    margin: auto;
    grid-area: Cat9;
}

.Cat10 {
    margin: auto;
    grid-area: Cat10;
}


 @media all and (-ms-high-contrast:none) {
    .grid-container {
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        -ms-grid-rows: 1fr 1fr 1fr;
    }

    .Cat1 {
        margin: auto;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
    }

    .Cat2 {
        margin: auto;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
    }

    .Cat3 {
        margin: auto;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
    }

    .Cat4 {
        margin: auto;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 4;
        -ms-grid-column-span: 1;
    }

    .Cat5 {
        margin: auto;
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
    }

    .Random-Letter {
        margin: auto;
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 2;
    }

    .Cat6 {
        margin: auto;
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        -ms-grid-column: 4;
        -ms-grid-column-span: 1;
    }

    .Cat7 {
        margin: auto;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
    }

    .Cat8 {
        margin: auto;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
    }

    .Cat9 {
        margin: auto;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
    }

    .Cat10 {
        margin: auto;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        -ms-grid-column: 4;
        -ms-grid-column-span: 1;
    }

} 


.selectDrops {
    background-color: white;
    border-radius: 7px;
}

.selectDrops select{
    border: 1px solid #ccc;
    border-radius: 7px;
    margin: 10px;
}

.selectDrops div {
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px 1px #eeeeee;
    border-radius: 7px;
    margin: 10px;
    transition: transform .6s;
    /* Animation */
}

.active, .selectDrops div:hover {
    box-shadow: 1px 1px 1px 1px #2196f3;
    border: 1px solid #2196f3;
    transform: scale(1.05);
}

.active,
.Random-Letter button:hover {
    box-shadow: 1px 1px 1px 1px #2196f3;
    border: 1px solid #2196f3;
}

.object {
    animation: MoveUpDown 2s linear infinite;
}

@keyframes MoveUpDown {

    0%,
    100% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.10);
    }
}


.blinks div{
    animation: Blinker 3.7s linear infinite;
}

@keyframes Blinker {
    0%,
    100% {
        border: 2px solid #eeeeee;
    }

    50% {
        border: 2px solid #87c8fd;
    }
}

.game-box {
    box-shadow: 10px 10px 10px 10px #eeeeee;
    border-radius: 8px;
}

.newspaper {
    column-count: 2;
}