body{
background: #d0d0cf;
background-image: url("images/bg text 01.png");
background-repeat: repeat;
}

h1 {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 60px;
    font-stretch: condensed;
    color: transparent;
    -webkit-text-stroke: 3px rgb(255, 233, 36);
}
h2 {
    color: rgb(217, 41, 88);
    font-family: "Helvetica Neue Light", sans-serif;
    font-size: 20px;
    text-align: center;
    outline-style: none;
    padding: 2px;
    font-weight: lighter;
    text-transform: uppercase;
}
h3 {
    font-family: "Helvetica Neue Light", sans-serif;
    font-size: 15px;
    text-align: center;
    font-weight: lighter;
    padding: 2px;
    color: grey
}
/* Icons */
.icon-container {
    display: flex;
    width: auto;
    height: auto;
}
.icon-container img {
    display: block;
    width: 50px;
    height: auto;
}
/* Index page grid */
.griddy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 10px;
    margin: 10px;
    border: 1px;
    grid-template-areas: 
        "t2 t2"
        "b2 b2"
        "m3 m3"
        "f2 f2";
}
.griddy div {
    padding: 5px;
}
.griddy div.t2 {
    grid-area: t2;
    justify-content: center;
    text-align: center;
    max-width: 100%;
    height: auto;
} 
.griddy div.b2 {
    grid-area: b2;
    text-align: center;
    justify-content: center;
    height: 40px;
}  

.griddy div.m3 {
    grid-area: m3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.griddy div.m3 a {
  display: block;
}
.griddy div.m3 img{
    display: block;
    width: 45vw;
    height: auto;
    max-width: 400px;
}

.griddy div.f2 {
    grid-area: f2;
    text-align: center;
    padding-top: 30%;
}