body {
    font-family: 'IBM Plex Mono', monospace;
    background-image: url(./resources/images/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}


ul {
    list-style: none;
}

ul li {
    margin: 1rem 0;
}

a {
    text-decoration: none;
    font-size: 24px;
    color: black;
}

a:hover {
    opacity: 0.3;
}

a:visited {
    color: black;
}

@media only screen and (min-width: 700px) {
    .grid {
        position: relative;
        top: 230px;
        right: 35px;
        display: grid;
        grid-template-areas: "image menu";
        justify-content: center;
        align-items: center;
    }

    .main-img {
        height: 200px;
        grid-area: image;
    }
}


@media only screen and (max-width: 700px) {
    .grid {
        position: relative;
        top: 150px;
        right: 20px;
        display: grid;
        grid-template-areas: "image""menu";
        justify-content: center;
        align-items: center;
    }

    .main-img {
        display: none;
    }

    ul {
        text-align: center;
    }
}




.menu {
    grid-area: menu;
}

#portfolio {
    font-weight: 700;
}