*{
    font-family: Georgia, 'Times New Roman', Times, serif;
}

body{
    background: lightblue;
    
}

h1, p, h2{
    text-align: center;
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    border: solid white 10px;
}

.catimg{
    display: block;
    width: 350px;
    height: 200px;
    margin-bottom: 20px;
}

.imgsize{
    margin-top: 15px;
    width: 350px;
    height: 350px;
}

.screenshotimg{
    width: 350px;
    height: 350px;
}

main{
    display: grid;
    grid-template-columns: 2fr 2fr;
}

.mainimg{
    display: grid;
    text-align: center;
    align-items: center;
    grid-template-areas:
    "img1  img2"
    "img3  img4"
    "img5  img6"  
    "img7  img8"
    "img9  img10"
    "img11a  img12";

    .img1 {grid-area: img1;}
    .img2 {grid-area: img2;}
    .img3 {grid-area: img3;}
    .img4 {grid-area: img4;}
    .img5 {grid-area: img5;}
    .img6 {grid-area: img6;}
    .img7 {grid-area: img7;}
    .img8 {grid-area: img8;}
    .img9 {grid-area: img9;}
    .img10 {grid-area: img10;}
    .img11a {grid-area: img11;}
    .img12 {grid-area: img12;}
}

.mainimg img{
    width: 400px;
    height: 300px;
}

a{
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
}

p{
    width: 200px;
    height: 100px;
    border: solid purple 5px;
    text-align: center;
    border-radius: 10px;
}

h3{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding:10px;
    width: 400px;
    border: solid white 10px;
    background-color: white;
    border-radius: 10px;
}

header{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}