.main-grid {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding-left:5%;
    padding-right: 5%;
    align-content: center;
    padding-bottom:10vh;
}
.main-grid img {
    max-width: 80%;
    display: block;
    margin: 0 auto;
}
.main-grid div {
    align-content: center;
}
#creative-production {
    padding-bottom:10vh;
}
#creative-production img {
    max-width: 40%;
}


body {
    background-color: black;
    margin:0px;
}

img{ 
    max-width: 100%;
    max-height: 100%;
}

a {
    color:inherit;
    text-decoration: none;
}

.footer {
    position:fixed;
    bottom:0;
    width:100%;
    font-family: adobe-caslon-pro, serif;
}

.social-media img {
    justify-content: center;
    align-content: center;
    max-height: 40px;
}

.social-media {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    column-gap: 2vw;
    background-color: white;
    font-size: 30px;
    max-height:40px;
}

.detail {
    color:white;
    align-content: center;
    text-align: center;
    font-family: adobe-caslon-pro, serif;
    padding-top:0px;
    padding-bottom:8vh;
}

.detail-text > h3 {
    font-weight: bolder;
    padding-bottom: 0; margin-bottom: 0;
}



@media only screen and (min-width: 768px) {
    .main-grid {
        display:grid;
        grid-template-columns: repeat(20, 1fr);
        grid-template-rows: repeat(12, 5vw);
        column-gap: 0;
        row-gap: 0;
        padding:0px;
        align-content: inherit;
    }

    .main-grid img {
        display: inherit;
        max-height:100%;
        max-width:100%;
    }
    .main-grid div {
        align-content: inherit;
    }


    .detail {
        background-image: url(/images/bubble.png);
        background-size:100% 100%;
        display:none;
        color:white;
    }
    .detail-text {
        font-size: 1.3vw;
        padding: 15%;
        padding-top:5%;
    }




    #creative-production {
        padding-bottom:0;
    }
    #creative-production img {
        max-width: 100%;
    }

    #sankyo-stream:hover + #sankyo-stream-detail{
        display:block;
    }
    
    #sankyo-stream-detail:hover {
        display:block;
    }
    #music-videos:hover + #music-videos-detail{
        display:block;
    }
    #music-videos-detail:hover {
        display:block;
    }
    #writings:hover + #writings-detail{
        display:block;
    }
    #writings-detail:hover {
        display:block;
    }
    #telling-george:hover + #telling-george-detail{
        display:block;
    }
    #telling-george-detail:hover {
        display:block;
    }
    #fafdm:hover + #fafdm-detail{
        display:block;
    }
    #fafdm-detail:hover {
        display:block;
    }
    
    
    
    #creative-production {
        grid-column: 10/ span 5;
        grid-row: 9/span 2;
    }
    #game-the-finch{
        grid-column: 7/span 7;
        grid-row: 3 /span 7;
    }
    
    
    
    #writings {
        grid-column: 3 /span 5;
        grid-row: 6 /span 4;
    }
    #writings-detail {
        grid-column: 4/span 6;
        grid-row: 5/span 3;
    }
    #music-videos{
        grid-column: 15 / span 4;
        grid-row: 7/span 4;
    }
    #music-videos-detail{
        grid-column: 17/span 4;
        grid-row: 6/span 3;
    }
    
    #sankyo-stream{
        grid-column: 15/span 4;
        grid-row: 5/ span 2;
    }
    #sankyo-stream-detail {
        grid-column:16/span 5;
        grid-row: 1/span 5;
    }
    #telling-george{
        grid-column: 2/span 5;
        grid-row:2 / span 4;
    }
    #telling-george-detail {
        grid-column: 4 / span 5;
        grid-row: 1 /span 4;
    }
    #fafdm{
        grid-column: 13/ span 4;
        grid-row: 1 / span 4;
    }
    #fafdm-detail {
        grid-column: 14 /span 7;
        grid-row: 1/ span 3;
    }
}