body {
    background-color:      black;
    display:               grid;
    grid-template-columns: 1fr;
    grid-template-rows:    1fr 1fr 1fr;
    height:                100vh;
    margin:                unset;
    overflow:              hidden;
    width:                 100vw;
}

.player {
    grid-area:    2 / 1 / 2 / 3;
    justify-self: center;
    
    & span,
    & h1 {
        font-size:      5vh;
        font-weight:    600;
        font-family:    sans-serif;
        color:          white;
        letter-spacing: 2px;
    }
    
    & span.small-text {
        font-size:   2vh;
        font-weight: 300;
    }
    
    & iframe {
        margin: 1rem;
        width: 90%
    }
}

.wallyce {
    grid-area: 1 / 3 / 2 / 4;
    
    & img {
        bottom:     0;
        position:   absolute;
        right:      5vw;
        transition: all 500ms ease;
        width:      20vw;
    }
    
    & :hover {
        transform:        scale(1.2);
        transform-origin: center bottom;
        transition:       transform 500ms ease;
    }
}

@media screen and ( 600px <= width <= 767px ) {
    /* For tablets: */
    body {
        grid-template-columns: 1fr 1fr;
    }
    
    .player {
        grid-area: 2 / 1 / 3 / 3;
    }
    
    .wallyce {
        grid-area: 2 / 3 / 3 / 4;
    }
    
}

@media screen and ( 1200px <= width ) {
    /* For desktop: */
    body {
        grid-template-columns: 10% 1fr 10%;
    }
    
    .player {
        grid-area: 2 / 2 / 3 / 3;
    }
    
    .wallyce {
        grid-area: 3 / 3 / 4 / 4;
    }
}