/* [GLOBAL STYLES] */

/* Remove browser spacing. Include borders and padding in element sizes. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Use the full window height when the content is short. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Trebuchet MS", Arial, sans-serif;
    background-color: #87d1f2ff;
    overflow-x: hidden;
}

/* [HEADER] */

/* Put a light band above the blue gradient. */
header {
    --gradient-color: #1e99d5;
    margin-top: 1vmin;
    background: linear-gradient(to bottom, #0000 2px, #fff7 2px, #fff3 30%, #0000 30%),
        linear-gradient(to bottom in oklch, var(--gradient-color) 60%, #fff);
    border: solid black;
    border-width: 1px 0;
    box-shadow: 0 0 2px black;
}

/* [NAV BAR] */

/* Put the logo and links at opposite ends. */
header > nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 30px 0 20px;
}

/* Keep the logo at a fixed height. */
.logo img {
    height: 30px;
    display: block;
}

/* [NAV BUTTONS] */

/* Put the navigation links in one row. */
header > nav > ul {
    display: flex;
    height: 100%;
    margin: 0 1rem;
}

/* Give the buttons sloped sides. */
header > nav > ul > li {
    display: flex;
    transform: skewX(-40deg);
    background: linear-gradient(to bottom, #0000 2px, #fff7 2px, #fff3 30%, #0000 30%),
        linear-gradient(to bottom in oklch, var(--gradient-color) 60%, #fff);
    width: 175px;
    justify-content: center;
    padding: 1em;
}

/* Keep the text upright inside each button. */
header > nav > ul > li > a {
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 30px;
    font-weight: bold;
    transform: skewX(40deg);
    color: white;
    text-decoration: none;
}

/* Set the base color of each button. */
#home-link {
    --gradient-color: #ec4342;
}

#about-link {
    --gradient-color: #f47032;
}

#contact-link {
    --gradient-color: #63bb4c;
}

/* Change the button color when the pointer is over it. */
#home-link:hover {
    --gradient-color: #cf1116;
}

#about-link:hover {
    --gradient-color: #cf4708;
}

#contact-link:hover {
    --gradient-color: #4a9338;
}

/* [PAGE CONTENT] */

/* Use the space below the header to center the content. */
.content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* [CONSTRUCTION IMAGE] */

/* Limit the image width to the container width. */
.construction-container img {
    max-width: 100%;
}

/* [RESPONSIVE HEADER] */

/* When the page has side margins, round the header corners. */
@media (width > 1200px) {
    header {
        border-width: 1px;
        border-radius: 12px;
        overflow: hidden;
    }
}