/* Stylesheet for all pages */

body {
    /* Remove gap between page and window */
    margin: 0;

    /* Background and text colours */
    background: linear-gradient(to bottom, #111118, #161625);
    color: white;

    /* Font family */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.5rem;
}

/* Set small gap on both sides of each page*/
main {
    width: 90vw;
    margin: auto;
}

img {
    /* Round corners of images */
    border-radius: 25px;

    /* Cursor prompts to zoom image on hover */
    cursor: zoom-in;
}

/* --- Header --- */

header {
    background: linear-gradient(to bottom, #1f1b30, #2b2550);
    height: 200px;

    /* Center text */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure text margin does not move the header away from the center */
header h1 {
    margin: 0;
}

header a {
    color: white;
    text-decoration: none;
}

/* --- Footer --- */

footer {
    height: 100px;
    padding: 15px;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

footer p a {
    color: white;
    text-decoration: none;
}

footer p a:hover {
    text-decoration: underline;
}

hr {
    margin: 0;
}

/* --- Text Tags --- */

h1 {
    text-align: center;
    font-size: 4.5rem;
}

h2 {
    font-size: 3.5rem;
}

h3 {
    font-size: 2rem;
}

p {
    font-size: 1.5rem;
}

/* Break headings if necesary */
h1,
h2,
h3 {
    word-break: break-word;
}

/* Link to return to portfolio / home page */

.return {
    text-align: center;
    /* Space further away from main text */
    margin-top: 75px;
}

.return a {
    color: white;
}

/* Image + text side-by-side container */

.aside-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1500px;
    gap: 10px;
    margin: 100px auto;
}

/* Limit width for certain containers */
.container-thin {
    max-width: 1250px;
}

/* Ensure text does not expand across the entire screen */
.aside-text {
    max-width: 750px;
}

.aside-image {
    display: flex;
}

/* Ensure image scales to fit nicely on smaller screen widths */
.aside-image img {
    max-height: 400px;
    max-width: 50vw;
}

.image-left {
    justify-content: left;
}

.image-right {
    justify-content: right;
}

/* Image zoom preview when an image is clicked */

.zoom-container {

    /* Cover entire screen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    /* Darken background and set cursor to zoom-out as clicking again zooms out the image */
    background-color: rgba(0, 0, 0, 0.8);
    cursor: zoom-out;

    /* Center image inside container */
    display: flex;
    justify-content: center;
    align-items: center;

}

.zoom-container img {
    cursor: zoom-out;
    max-height: 90vh;
    max-width: 95%;
}

/* Mobile styling */

@media (max-width: 767px) {

    /* --- Text Tags --- */

    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    p,
    li {
        font-size: 1.3rem;
    }

    /* --- Set aside container to display vertically --- */

    .aside-container {
        flex-direction: column;
    }

    /* Display image at the top for containers that have text first */
    .image-top {
        flex-direction: column-reverse;
    }

    /* Ensure image width does not go over the screen width */
    .aside-image img {
        max-width: 100%;
    }


    /* Hide specified elements on mobile */

    .desktop-only {
        display: none !important;
    }

}