body{
            background-size: 100%;
            padding: 0;
            margin: 0;
            background-image: linear-gradient(to right, #ff9c9c, rgba(196, 91, 91) 80%);
            word-wrap: break-word;

        }
        
        .glowbox{
        background-color: white;
            box-shadow: 0 0 10px 10px white;
            border: 1px dashed maroon;
            padding: 10px;
            margin-top: 5%;
            display: grid;
            width: auto;
            height: auto;
            grid-template-columns: 20% 58% 20%;
            grid-gap: 5px 5px;
            grid-template-areas: 
                'header header header'
                'sidebar main sidebar'
                'sidebar main2 sidebar'
        }
        
        .side1 {
        grid-area: 'sidebar';
            grid-row: 2 / 4;
            padding: 2px;
            background-color: #ff9c9c45;
        }
        .head {
        grid-area: 'header';
            grid-column: 1 / 4;
            background-image: url(/images/webbanner.png);
            background-size: 120%;
            background-position: 0% 45%;
            height: 100px;
            box-shadow: 0 0 5px 5px white inset;
        }
        .main {
        grid-area: 'main';
            background-image: url(/images/paragraphimage.png);
            background-position: right;
            background-repeat: no-repeat;
            background-size: contain;
            height: auto;
            padding: 5px;
        }
        
        .main2{
        grid-area: 'main2';
            grid-column: 1 / span 3;
            padding: 5px;

        }
        
        .mainscontent{
        width: auto;
        }
        
        .side2 {
        grid-area: 'sidebar';
            grid-column: 3;
            grid-row: 2 / 4;
            padding: 2px;
            background-color: #ff9c9c45;

        } 
        
        .sidecontent{
            width: auto;
        }
        
        #playPauseImage {
    cursor: pointer; /*IDK if you wanted it to be obvious or not that it could be clicked but this is what does it lol*/
} 

        .card{
        background-image: linear-gradient(to right, #c45b5b, rgb(255,0,0,0) 80%);
            text-decoration: underline;
            font-weight: bold;
            width: auto;
            color: #7b2828;
            text-shadow: 1px 1px 2px #c45b5b;
            margin-bottom: 5px;
            margin-top: 5px;
        }
        
        .card:first-child{
        margin-top: 0;
        }
        
.uppydate{
padding: 5px;
border: 1px dashed maroon;
    width: auto;
    height: 100px;
    overflow-y: scroll;
}

#statuscafe {
    padding: .5em;
    background-color: #ff9c9c45;
    border: 1px dashed maroon;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.imgleft{
    bottom: 0;
    left: 0;
    position: absolute;
}

        @media screen and (max-width: 650px){

            .title{
            font-size: 35px;
            }
            
            .glowbox{
            grid-template-rows: 25% 40% auto;
                height: auto;
            }
            
            .main{
            background-position: top right;
            background-size: 50%;
            }
            
            .side2 img{
            width: 90%;
            }
            
            .imgleft{
                display: none;
            }
        }