body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 14px;
    text-align: justify;
    text-indent: 3px;
    font-weight: 500;
}

h1 {
    text-align: center;
    color: black;
    font-size: 20px;
    margin-top: 30px;
    font-weight: 900;
}

footer {
    text-align: center;
    color: black;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-weight: 600;
}

h2 {
    color: black;
    text-indent: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.extraspace {
    margin-top: 30px;
}

.morespace {
    margin-bottom: 30px;
}

.grid-container {
    display: grid;
    grid-template-columns: 80px 80px 80px 80px 80px 80px;
    grid-template-rows: 70px 70px 70px 70px 70px 70px 70px 70px;
}

.item1, .item2, .item3 {
    background-color: deepskyblue;
    gap: 5px;
    border-style: solid;
    border-color: white;
    padding-top: 5px;
}

.item4, .item5, .item6, .item7, .item10, .item12, .item13, .item18, .item19, .item24, .item25, .item30, .item31, .item42, .item43, .item44, .item45, .item47, .item48 {
    background-color: white;
    border-color: white;
}

.item8 {
    background-color: deepskyblue;
    border-top: solid white;
    border-left: solid white;
    font-size: 18px;
    padding-top: 5px;
}

.item9 {
    background-color: deepskyblue;
    border-top: solid white;
    border-right: solid white;
}

.item14 {
    background-color: deepskyblue;
    border-bottom: solid white;
    border-left: solid white;
}

.item15 {
    background-color: deepskyblue;
    border-bottom: solid white;
    border-right: solid white;
}

.item11, .item16, .item17, .item20, .item26, .item27, .item32 {
    background-color: teal;
    border-style: solid;
    border-color: white;
    gap: 5px;
    padding-top: 5px;
}

.item21 {
    background-color: deepskyblue;
    border: solid white;
    padding-top: 5px;
}

.item22 {
    background-color: teal;
    border-top: solid white;
    border-left: solid white;
    font-size: 18px;
    padding-top: 5px;
}

.item23 {
    background-color: teal;
    border-top: solid white;
    border-right: solid white;
}

.item28 {
    background-color: teal;
    border-bottom: solid white;
    border-left: solid white;
}

.item29 {
    background-color: teal;
    border-bottom: solid white;
    border-right: solid white;
}

.item33 {
    background-color: rebeccapurple;
    border-top: solid white;
    border-left: solid white;
    font-size: 18px;
    padding-top: 5px;
}

.item34 {
    background-color: rebeccapurple;
    border-top: solid white;
    border-right: solid white;
}

.item39 {
    background-color: rebeccapurple;
    border-bottom: solid white;
    border-left: solid white;
}

.item40 {
    background-color: rebeccapurple;
    border-bottom: solid white;
    border-right: solid white;
}

.item35, .item36, .item41, .item46 {
    background-color: rebeccapurple;
    border-style: solid;
    border-color: white;
    gap: 5px;
    padding-top: 5px;
}

.flex-container {
    display: flex;
    flex-flow: column wrap;
    gap: 5px;
    height: 95vh;
    width: auto;
    background-color: black;
    justify-content: space-evenly;
    margin: 10px;
    border: solid black 5px;
}

.itema {
    order: 1;
    background-image: url(https://images.unsplash.com/photo-1583511655826-05700d52f4d9?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjV8fHB1cHB5fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemb {
    order: 2;
    background-image: url(https://images.unsplash.com/photo-1601979031925-424e53b6caaa?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OHx8cHVwcHl8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 25vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media only screen and (min-width: 1300px) {
    .itemb {
        flex-basis: 60vh;
    }
}

.itemc {
    order: 3;
    background-image: url(https://images.unsplash.com/photo-1610244130620-fd348aa7854e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjJ8fHB1cHB5fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemd {
    order: 4;
    background-image: url(https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTN8fHB1cHB5fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.iteme {
    order: 5;
    background-image: url(https://images.unsplash.com/photo-1565708097881-bbf4ecf47cc1?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fHB1cHB5fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 25vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemf {
    order: 6;
    background-image: url(https://images.unsplash.com/photo-1546238232-20216dec9f72?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTJ8fHB1cHB5fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemg {
    order: 7;
    background-image: url(https://images.unsplash.com/photo-1608096299210-db7e38487075?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTM4fHxwdXBweXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemh {
    order: 8;
    background-image: url(https://images.unsplash.com/photo-1583723341336-5ca990430d29?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjR8fHB1cHB5fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemi {
    order: 9;
    background-image: url(https://images.unsplash.com/photo-1537151672256-6caf2e9f8c95?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzR8fHB1cHB5fGVufDB8fDB8&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemj {
    order: 10;
    background-image: url(https://images.unsplash.com/photo-1566903451935-7e8835ed3e97?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mjd8fHB1cHB5fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemk {
    order: 11;
    background-image: url(https://images.unsplash.com/photo-1610635064984-ef3eb66318d5?ixid=MXwxMjA3fDB8MHxzZWFyY2h8ODl8fHB1cHB5fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 25vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.iteml {
    order: 12;
    background-image: url(https://images.unsplash.com/photo-1608831540955-35094d48694a?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjN8fHB1cHB5fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemm {
    order: 13;
    background-image: url(https://images.unsplash.com/photo-1564919787336-7827a0a8a042?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTI5fHxwdXBweXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemn {
    order: 14;
    background-image: url(https://images.unsplash.com/photo-1613928521908-24ccf17a1707?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTAxfHxwdXBweXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemo {
    order: 15;
    background-image: url(https://images.unsplash.com/photo-1560945928-71cc7a77316f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8OTB8fHB1cHB5fGVufDB8fDB8&auto=format&fit=crop&w=500&q=60);
    flex: 1 1 18vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemp {
    order: 16;
    background-image: url(https://images.unsplash.com/photo-1593134257782-e89567b7718a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80);
    flex: 1 1 25vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}