/* ===================================
   Phone and small screen layout
   =================================== */

/* The menu area on the side (or top on phones) */
aside {
    background: white;      /* Make the background white */
    font-size: 120%;        /* Make the text a little bigger */
    padding: 5px 0;         /* Add a small space above and below */
    text-align: center;     /* Put the text in the middle */
    width: 100%;            /* Use the full width of the screen */
}

/* Links inside the menu */
aside a {
    color: black;           /* Make the text black */
    display: block;         /* Make each link take up a whole line */
    padding: 5px 0;         /* Add space around the text */
    text-decoration: none;  /* Remove the underline from links */
    width: 100%;            /* Make each link fill the menu width */
}

/* Change colours when the mouse is over a link */
aside a:focus, aside a:hover {
    background-color: black; /* Make the background black */
    color: aliceblue;        /* Make the text light blue */
    outline: none;           /* Remove the default outline */
}

/* Main image */
#main_image {
    width: 100%;            /* Make the image fill the screen width */
}

/* Area that contains the main content */
article {
    background-color: black; /* Black background */
    color: white;            /* White text */
    font-size: 110%;         /* Make text a little bigger */
    padding: 0 10px;         /* Add space on the left and right */
}

/* Links inside the article */
article a {
    color: white;           /* Make links white */
    padding: 5px;           /* Add space around links */
    text-decoration: none;  /* Remove link underlines */
}

/* Change colours when hovering over article links */
article a:focus, article a:hover {
    background-color: white; /* White background */
    color: black;            /* Black text */
    outline: none;           /* Remove the default outline */
}

/* Hide all h2 headings */
h2 {
    display: none;
}


/* ===================================
   Tablet screens and larger
   =================================== */
@media only screen and (min-width: 768px) {

    /* Put the menu and content next to each other */
    main {
        display: flex;
    }

    /* Menu section */
    aside {
        align-items: center;      /* Center items from top to bottom */
        padding: 50px 0px 0px 0px; /* Add space around links */
        vertical-align: top;            /* Use flexbox layout */
        flex-direction: column;   /* Stack links vertically */
        float: left;              /* Put the menu on the left */
        justify-content: center;  /* Center the links */
        width: 30%;               /* Use 30% of the page width */

    }

    /* Main content section */
    section {
        display: inline;
        float: left;             /* Put the content on the right */
        width: 70%;               /* Use 70% of the page width */
    }
}