/* mc skin grids */
#mcSkinsGrid {
    display: grid;
    grid-template: auto / 25% 25% 50%;
    width: 90%;
    margin: 10px auto;
    align-items: center;
    justify-items: center;
    gap: 10px;

}
#mcSkinsGrid img {
    width: 100%;
    height: auto;
    max-width: 300px;
    background-color: white;
}
#minecraftBlurb {
    margin: auto;
    margin-bottom: 20px;
}
#mcSkinsBlurb {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 5px;
    gap: 10px;
}
#mcSkinsBlurb a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}
#mcSkinsBlurb a p {
    text-align: center;
}



#pastSkinsGrid {
    display: grid;
    grid-template: auto / 25% 25% 25% 25%;
    width: 90%;
    margin: auto;
    align-items: center;
    justify-items: center;
}
#pastSkinsGrid img {
    width: 100%;
    height: 100%;
    max-width: 450px;
    background-color: white;
}
#pastSkinsGrid div {
    width: 85%
}

.buttonContainer{
    gap: 10px;
}

@media screen and (max-width: 640px) {
    #mcSkinsGrid {
        grid-template: auto / 45% 45%;
        gap: 20px;
        justify-content: center;
    }
    #mcSkinsGrid img {
        max-width: 150px;
    }

    #mcSkinsBlurb {
        grid-column: 1 / span 2;
        gap: 5px;
    }
}

/* Blockbench */
#BlockbenchGrid {
    display: grid;
    grid-template: auto / 40% 55%;

    grid-template-areas: 
    "Video Blurb"
    "AxolotlBlurb Axolotl";
    justify-items: center;
    justify-content: center;
    width: 70%;
    margin: auto;
    margin-bottom: 20px;
    gap: 10px;
}
#BlockbenchGrid img {
    width: 100%;
}

#slimeVideo {
    grid-area: Video;
}
#slimeVideo video {
    width: 100%;
    max-width: 200px;
}
#blockbenchBlurb {
    grid-area: Blurb;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
}
#axolotlProject {
    grid-area: Axolotl;
    width: 80%;
    max-width: 400px;
}
#axolotlProjectBlurb {
    grid-area: AxolotlBlurb;
}

@media screen and (max-width: 640px) {
    #BlockbenchGrid {
        grid-template: auto/ 90%;
        grid-template-areas:
        "Blurb"
        "Video"
        "AxolotlBlurb"
        "Axolotl";
        gap: 10px;
        align-items: center;
    }
}

/* Flippies */
#flippiesContainer {
    display: flex;
    flex-flow: row nowrap;
    width: 90%;
    margin: auto;
    justify-content: space-around;
    gap: 10px;
}
#flippiesContainer img {
    border-radius: 100%;
    width: 200px;
    height: 200px;
    cursor: pointer;
    transition:box-shadow 0.3s;
}
#flippiesContainer img:hover {
    box-shadow: 0 0 15px 5px grey;
}
#flippiesContainer img:active {
    animation: flipping 1s;
}
@keyframes flipping {
  0% {transform: rotatey(0deg)}
  50% {transform: rotatey(180deg)}
  100% {transform: rotatey(0deg)}
}

@media screen and (max-width: 640px) {
    #flippiesContainer {
        flex-flow: row wrap;
    }
    #flippiesContainer img {
        width: 130px;
        height: 130px;
    }
}
/* Visit me! */
#visitMe {
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    grid-template-areas:
    "h2 map"
    "p map"
    "a map";
    align-items: center;
    justify-items: center;
    width: 90%;
    margin: auto;
    margin-top: 20px;
}
#visitMe h2 {
    grid-area: h2
}
#visitMe p {
    grid-area: p;
    width: 80%;
}
#visitMe a {
    grid-area: a;
    background-color: #7ce4d6;
    padding: 20px;
    width: 50%;
    text-align: center;
    margin-top: 10px;
    border-radius: 5px;
    border: 2px solid #4eccbb;
}
#visitMe a:hover {
    background-color: #4eccbb;
    border: 2px solid #35b0aa
}
#visitMe a:active {
    background-color: #35b0aa;
}
#visitMe iframe{
    grid-area: map;
    width: 80%;
    min-height: 300px;
}

@media screen and (max-width: 640px) {
    #visitMe {
        grid-template: auto / 1fr;
        grid-template-areas:
        "h2"
        "p"
        "map"
        "a"
    }
}

/* SKIN GALLERY ------------ */
#skinGalleryFilters {
    display: flex;
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
    justify-content: center;
    gap: 20px;
}
#skinGalleryFilters {
    width: 100%;
    max-width: 1000px;
}


.SkinGalleryGrid {
    display: grid;
    grid-template: auto / 25% 25% 25% 25%;
    width: 90%;
    margin: auto;
    grid-gap: 20px;
    justify-content: center;
    justify-items: center;
}
.SkinGalleryGrid div {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
.SkinGalleryGrid img {
    width: 100%;
    max-width: 300px;
}
.SkinGalleryGrid .caption {
    line-height: 25px;
    width: 95%
}

.evilEevee {
    color: darkred;
    cursor: url('../IMAGES/AFREAKINGBOMB.png'), crosshair;
}
.noMoreEevee img {
    max-width: 50%;
}

@media screen and (max-width: 640px) {
    .SkinGalleryGrid {
        grid-template: auto / 33% 33% 33%;
    }
    .SkinGalleryGrid .caption {
        line-height: 18px;
    }
    .SkinGalleryGrid h3 {
        font-size: 16px;
        font-weight: bold;
    }
    
}
.SkinGalleryGrid ~ p {
    font-size: 14px;
    text-align: center;
}

.dontShow {
    display: none;
}