/* --- Color variables and overall initial styling --- */
:root {
    --darkblue: rgb(20, 24, 102);
    --lightblue: rgb(156, 202, 255);
    --black: rgb(0, 0, 0);
}

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    font-family: sans-serif;
    color: var(--darkblue);
}

p {
    line-height: 1.5;
}

/* --- Header styling --- */
header {
    background-color: var(--darkblue);
    /* Flex content */
    display: flex;
    /* Get the heading on the left and the navbar on the right */
    justify-content: space-between;
    /* Center the items top-to-bottom */
    align-items: center;
}

header * {
    color: var(--lightblue)
}

header h1 {
    background-color: var(--lightblue);
    color: var(--darkblue);
    font-size: 3em;
    padding: 0.2em 0.5em 0.2em 2em;
}

header nav ul {
    /* Flex content */
    display: flex;
}

header nav ul li {
    font-size: 1.5em;
    margin-right: 1.5em;
    /* "Underline" the links */
    border-style: solid;
    border-width: 0 0 0.15em 0;
    border-color: var(--lightblue);
}

/* --- Main content styling --- */
main {
    /* Set correct whitespace on edges of sections, set half whitespace on top and bottom of sections */
    padding: 1%;
    /* Flex content */
    display: flex;
    /* Align the flexbox vertically */
    flex-flow: column;
    /* Center the sections and stretch them to full width */
    align-items: center stretch;
}

section {
    background-color: var(--lightblue);
    /* Finish setting correct whitespace on top and bottom of sections */
    margin: 1%;
    /* Flex content */
    display: flex;
    /* Align the flexbox horizontally */
    flex-direction: row;
    /* Center the items top-to-bottom and stretch them to full height */
    align-items: center stretch;
}

section h2 {
    background-color: var(--darkblue);
    padding: 1%;
    color: var(--lightblue);
    font-size: 2em;
    /* Have the heading take up 20% of the flex width */
    flex: 1 0 0;
}

/* About section styling */
#about div {
    /* Have the about text take up 60% of the flex width */
    flex: 3 0 0;
}

#about img {
    height: 100%;
    width: 100%;
    align-self: center;
    /* Have the about image take up 20% of the flex width */
    flex: 1 0 0;
}

#about p {
    font-size: 1.1em;
    margin: 1em;
}

/* Projects section styling */
.card-area {
    /* Have the div take up 80% of the flex width */
    flex: 4 0 0;
    /* Flex content */
    display: flex;
}

.card-area #primary-project {
    /* Have the primary projects take up 66.7% of the flex width */
    flex: 2 0 0;
}

.card-area #other-projects {
    /* Have the other projects take up 33.3% of the flex width */
    flex: 1 0 0;
}

.card {
    /* Needed in order to position the captions absolutely relative to the cards */
    position: relative;
    aspect-ratio: 4/3;
}

.card figcaption {
    background-color: var(--lightblue);
    padding: 0.5em;
    /* Position the captions absolutely relative to the cards */
    position: absolute;
    top: 1em;
    left: 1em;
    /* Make sure the caption is in front of the image */
    z-index: 1;
    /* Add a shadow to help distinguish the caption from the image */
    box-shadow: 0 0 1em var(--black);
}

.card img, .card a {
    /* Make the image take up the full height, leaving no empty space */
    height: 100%;
    /* Make the image shrink to fit with the flex styling */
    width: 100%;
}

#primary-project img, #other-projects img {
    /* Make the images faint (until hovered over) */
    opacity: 0.5;
    transition: opacity 1s 0.2s;
}

#primary-project:hover img, #other-projects .card:hover img {
    /* Make the images full-color when hovered over */
    opacity: 1;
}

#other-projects {
    margin: 0;
    /* Flex content */
    display: flex;
    /* Align flexbox vertically to get a column */
    flex-flow: column;
    /* Center items left-to-right and stretch to fit */
    align-items: center stretch;
}

#other-projects .card {
    /* Get all four cards to fit in the one column */
    height: 25%;
    /* Match height of column to that of primary project card */
    aspect-ratio: 8/3;
}

#other-projects .card img, #other-projects .card a {
    /* Match height of primary project card - (both aspect ratios are needed) */
    aspect-ratio: 8/3;
}

#other-projects .card img {
    /* Crop instead of stretching */
    object-fit: cover;
    /* Include the top of the image in the crop */
    object-position: top;
}

/* Contact section styling */
#contact ul {
    /* Have the contact links take up 80% of the flex width */
    flex: 4 0 0;
}

#contact ul {
    font-size: 1.5em;
    /* Flex content */
    display: flex;
    /* Include space around and between the links */
    justify-content: space-around;
    /* Center the links top-to-bottom */
    align-items: center;
}

#contact ul li {
    /* "Underline" the links */
    border-style: solid;
    border-width: 0 0 0.15em 0;
    border-color: var(--darkblue);
}

/* --- Footer styling --- */
footer {
    background-color: var(--darkblue);
    padding: 2em;
    /* Flex content */
    display: flex;
    /* Align flexbox vertically */
    flex-direction: column;
    /* Center the items left-to-right */
    align-items: center;
    /* Add space in between the items */
    gap: 1em;
}

footer * {
    color: var(--lightblue);
    font-size: 1.5em;
}

/* --- Responsive design --- */
/* Medium screen styling */
@media (max-width: 1000px) {
    header {
        /* Stack the heading and navbar vertically */
        flex-flow: column;
        align-items: stretch;
    }

    header h1 {
        padding: 0.2em;
    }

    header ul {
        padding: 0.5em;
    }

    /* Give more room for the picture in the about section */
    #about div {
        flex: 2 2 0;
    }

    #about img {
        flex: 2 2 0;
    }

    /* Stack the project cards all vertically next to the heading */
    #projects {
        flex-flow: row wrap;
    }

    #projects h2 {
        flex: 1 0 0;
    }

    .card-area {
        flex: 4 0 0;
        flex-direction: column;
    }
}

/* Narrow screen styling */
@media (max-width: 700px) {
    /* Remove whitespace on the sides of the screen, add more whitespace vertically */
    main {
        padding-inline: 0;
        padding-block: 2%;
    }

    section {
        margin-inline: 0;
        margin-block: 2%;
        /* Stack the heading of each section on top of its content */
        flex-direction: column;
    }

    /* Re-style the image in the about section */
    #about img {
        object-fit:contain;
        min-height: 300px;
        min-width: 300px;
        padding-bottom: 1.5em;
    }

    #projects {
        /* Stack the heading of the projects section on top of its content */
        /* (This is necessary: although this section should be targeted by the section rule above, it isn't) */
        flex-direction: column;
    }

    #contact ul {
        padding: 1em;
    }
}