body {
   background: #0f325c;
background: linear-gradient(180deg, rgba(15, 50, 92, 1) 0%, rgba(87, 199, 133, 1) 84%);
    cursor: url(/assets/cursor1.png), auto;
    background-size: 100vh;
}

.main {
display: flex;

justify-content: center;
align-items: center;
width:50%;
margin: 5% 25%;
}

.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

/* Images */

.sqr {
    width: 10%;
    min-width: 200px;
    height: 10%;
    min-height: 200px;
}  


.a {
background: url(/assets/a.png);
background-size: cover;
    border-left: rgb(233, 131, 48) groove 5px ;
    border-top: rgb(233, 131, 48) groove 5px;
}

.a:hover{
background: url(/assets/aa.jpg);
background-size: cover;
}

.b {
background: url(/assets/b.png);
background-size: cover;
background-position: center;
    border-top: rgb(233, 131, 48) groove 5px;
}

.c {
background: url(/assets/c.jpg);
background-size: cover;
    border-top: rgb(233, 131, 48) groove 5px;
    border-right: rgb(233, 131, 48) groove 5px;
}

.c:hover {
    background: url(/assets/cc.jpg);
    background-size: cover;
    cursor: url(/assets/cursor2.png), auto;
}

.d {
background: url(/assets/d.jpg);
background-size: cover;
    border-left: rgb(233, 131, 48) groove 5px;
}

.d:hover {
    cursor: url(/assets/cursor2.png), auto;
}
.e {
background: url(/assets/e.jpg);
background-size: cover;
}

.e:hover{
background: url(/assets/ee.jpg);
background-size: cover;
}

.g {
background: url(/assets/calico.png);
background-size: cover;
    border-left: rgb(233, 131, 48) groove 5px;
    border-bottom: rgb(233, 131, 48) groove 5px;
}


.g:hover {
background: url(/assets/gg.jpg);
background-size: cover;
}

.f {
background: url(/assets/f.png);
background-size: cover;
    border-right: rgb(233, 131, 48) groove 5px;
}

.h {
background: url(/assets/h.jpg);
background-size: cover;
    border-bottom: rgb(233, 131, 48) groove 5px;
}

.i {
    background: url(/assets/wb.png);
    background-size: cover;
    background-position: center;
        border-bottom: rgb(233, 131, 48) groove 5px;
        border-right: rgb(233, 131, 48) groove 5px;
}

.i:hover{
     background: url(/assets/ii.jpg);
    background-size: cover;
    background-position: center;
}