/*Style code governing the look of the whole page*/
html {
    font-family: 'Courier New', Courier, monospace;
}

/*Style code for header & contents*/
header {
    /*background-color: rgb(100, 149, 237);*/
    align-items: center;
    border-radius: 1rem;
    display: grid;
    font-size: 2vw;
    grid-template-columns: minmax(20%, auto) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "logo heading1"
        "logo heading2";
    text-align: center;
}
#heading1 {
    grid-area: heading1;
}
#heading2 {
    grid-area: heading2;
}
#logo {
    border-radius: 50%;
    display: block;
    grid-area: logo;
    margin: 1rem;
    width: 20vw;
}

/*Style code for the main body of the page*/
article {
    border-radius: 1rem;
    margin: 1rem 0;
    padding: 1rem;
}
#about p {
    text-align: justify;
}
#contact p {
    text-align: left;
}

/*Style code for the footer*/
footer {
    align-items: center;
    border-radius: 1rem;
    display: grid;
    font-size: 2vw;
    grid-template-columns: 1fr minmax(20%, auto);
    grid-template-rows: auto auto;
    grid-template-areas: 
        "footerHeadline1 profilePic"
        "footerHeadline2 profilePic";
    text-align: center;
}
#footerHeadline1 {
    grid-area: footerHeadline1;
}
#footerHeadline2 {
    grid-area: footerHeadline2;
}
#me {
    border-radius: 50%;
    display: block;
    grid-area: profilePic;
    padding: 1rem;
    width: 20vw;
}

/*Optional code to be run if dark mode is enabled*/
/*@media (prefers-color-scheme: dark) {*/
    header {
        background-color: rgb(82, 82, 82);
    }
    body {
        background-color: rgb(40, 40, 40);
        color: rgb(255, 255, 255);
    }
    article {
        border: 0.5rem solid rgb(82, 82, 82);
    }
    footer {
        background-color: rgb(82, 82, 82);
        color: rgb(255, 255, 255);
    }
/*}*/
@media (width <= 30cm) {
    header {
        display: grid;
        grid-template-columns: minmax(20%, auto) 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "logo heading1"
            "heading2 heading2";
    }
    footer {
        display: grid;
        grid-template-columns: 1fr minmax(20%, auto);
        grid-template-rows: auto auto;
        grid-template-areas: 
            "footerHeadline1 profilePic"
            "footerHeadline2 footerHeadline2";
    }
}