body {
    background-color: #1e1e1e;
    overflow: hidden;
}

@media (min-width:1000px){

    body {
        background-color: #1e1e1e;
    }
    .plate {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-rows: repeat(3, 1fr); */
        grid-column-gap: 10px;
        grid-row-gap: 20px; 

        transform: scale(0.3) translate(40px, 0px) skew(63deg, -31deg);
        /* translate(1px, -1px) */
        transition: translate .4s ease-in-out, top .4s ease-in-out;
    }
    .picture-border img{

        width: 150%;
        /* height: 36svh;   */
        aspect-ratio: 10.8 / 13.5;
    }
    .glow{
        box-shadow: -5px 5px 10px #000000;
        transition: .5s ease-out;
    }
    .glow:hover{
        box-shadow: -5px 5px 10px #ffffff;
        transition: 0s ease-out;
    }
    .glow:focus{
        box-shadow: -5px 5px 10px #ffffff;
        transition: 0s ease-out;
    }



}

    .plate {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-rows: repeat(3, 1fr); */
        grid-column-gap: 10px;
        grid-row-gap: 20px; 
        transition: translate .4s ease-in-out, top .4s ease-in-out;
    }  


.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 4; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 3 / 1 / 4 / 2; }
.div5 { grid-area: 2 / 2 / 4 / 4; }





.picture-border {
    background-color: #ffffff;
    width: 60svw;
    height: 40svh;
    grid-area: 1 / 1 / 2 / 3; 
    display: flex;
    align-items: center;
    justify-content: center;
   
}
.picture-border img{

    /* width: 54svw; */
    height: 36svh;  
     aspect-ratio: 10.8 / 13.5;
}
/* .holder {
    background-color: rgb(255, 255, 255);
    grid-area: 1 / 3 / 2 / 4;
    transform: translate(-1px, -65px) skew(-0deg, -31deg);
    
}
.holder2 {
    background-color: rgba(255, 255, 255, 0.601);
    grid-area: 1 / 3 / 2 / 4;
    transform: translate(220px, -135px);
} */
.holder3 {
    background-color: rgb(0, 0, 0);
    grid-area: 1 / 3 / 2 / 4;
    
}
/* .holder4 {
    background-color: rgb(94, 94, 94);
    grid-area: 1 / 3 / 2 / 4;
    transform: translate(220px, -65px) skew(-0deg, -31deg);
    
} */

.namecard {
    background-color: rgb(0, 0, 0);
    grid-area: 2 / 1 / 3 / 2; 
    width: 30svw;
    height: 15svh;
} 

.namecard img {
    width: 30svw;
    height: 15svh;
}
.videocard {
    background-color: rgb(0, 0, 0);
    grid-area: 3 / 1 / 4 / 2;
    width: 30svw;
    height: 25svh;

}
.videocard img{
    width: 30svw;
    height: 25svh;
}

.websitecard {
    background-color: rgb(0, 0, 0);
    grid-area: 2 / 2 / 4 / 4;
    width: 60svw;
    height: 50svh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.websitecard img{
    width: 60svw;
    height: 50svh;
}
.websitecard p {
    margin-bottom: 10svh;
    font-size: 6svw;
    font-family: Electrolize;
    font-weight: bold;
}

.glow{
    box-shadow: 0px 0px 10px #000000;
    transition: .5s ease-out;
}
.glow:hover{
    box-shadow: 0px 0px 10px #ffffff;
    transition: 0s ease-out;
}
.glow:focus{
    box-shadow: 0px 0px 10px #ffffff;
    transition: 0s ease-out;
}