@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');

* {
    margin: 0;
    padding: 0;

    /* Text colour */
    color: white;

    /* Font to be used across the website. */
    font-family: 'Space Grotesk', sans-serif;
}

/* Setup grid for all displays */
body {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: max-content auto max-content;
    grid-template-areas:
        "header"
        "main"
        "footer"
    ;
    
    min-height: 100vh;
}

/* Setup Semantic HTML tags into Grid */

header {
    grid-area: header;
    background-color: #179ce9;
    padding: 2vh;
    font-size: 100%
}

main {
    grid-area: main;
    background-color: #4B4B48;
    padding: 2vh;

    /* Centre main text */
    text-align: center;
    vertical-align: middle;
}

footer {
    grid-area: footer;
    background-color: #2D2D2B;
    padding: 2vh;
}

/* Add padding to main paragraphs. */
main p {
    padding: 5px;
}

/* Colour for IP types */
.IPv4 {
    color: red;
}

.IPv6 {
    color: lime;
}