@font-face {
    font-family: 'Kanjoni';
    src:  url(assets/Kanjoni-Regular.woff)
}


/* MEDIA QUERIES */

body {
    background-color: #572FFE;
    overflow: scroll;
}

h1, h2, h3, p {
        font-family: "Kanjoni";
        text-align: center;
        font-style: regular;
    
}

a {
    color: black;
    text-decoration: none;
}

.links a {
    color: white;
} 

.content {
    display: grid;
}

/* Mobile styles */
@media (max-width: 740px) {
    .content {
        grid-template-areas:
            "left header right"
            "left img right"
            "left main right"
            "left footer right";
        grid-template-columns: 30px auto 30px;
        grid-template-rows: auto auto auto auto;
        position: absolute;
        width: 100vw;
        height: 100%;
    }
    h1, h2, h3, p {
        padding-left: 10px;
        padding-right: 10px;
    }

    .links {
    margin-top: 10%;
    }
}



@media (min-width: 740px) {
.content {
grid-template-areas:
    "header header header header"
    "left img main right"
    "footer footer footer footer";


grid-template-columns: auto 500px 500px auto; /* Three equal columns */
grid-template-rows: auto auto auto; /* Three rows with specific heights */ 

/* justify-items: center; Align items in the center of their cells horizontally */
/* align-items: center; Align items in the center of their cells vertically */

justify-content: center; /* Align the grid in the center of the container horizontally */
align-content: center; /* Align the grid in the center of the container vertically */

height: 100%;
min-height: 500px;
width: 100vw;

position: absolute;
}

.links {
    margin-top: 25%;
}

}

.main { grid-area: main; }

.image {
    grid-area: img;
}