@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    /* Fonts */
    --font-pt-sans: "PT Sans";
    --font-inconsolata: "Inconsolata";
    --font-montserrat: "Montserrat";

    /* Main HSL Colors */
    --bg-darker: hsl(187 25% 86%);
    --bg-dark: hsl(220 59% 91%);
    --bg: hsl(220 100% 97%);
    --bg-light: hsl(220 100% 100%);
    --text: hsl(226 85% 7%);
    --text-muted: hsl(220 26% 31%);
    --highlight: hsl(220 100% 100%);
    --border: hsl(220 19% 53%);
    --border-muted: hsl(220 27% 65%);
    --primary: hsl(221 49% 33%);
    --secondary: hsl(44 100% 14%);
    --danger: hsl(9 21% 41%);
    --warning: hsl(52 23% 34%);
    --success: hsl(147 19% 36%);
    --info: hsl(217 22% 41%);

    /* Box Shadow */
    --box-shadow: 3px 14px 32px -17px rgba(74, 74, 74, 0.42);
}

.dark-mode {
    --bg-darker: hsl(187 25% 36%);
    --bg-dark: hsl(228 79% 2%);
    --bg: hsl(222 55% 5%);
    --bg-light: hsl(220 35% 10%);
    --text: hsl(220 100% 98%);
    --text-muted: hsl(220 35% 73%);
    --highlight: hsl(220 20% 42%);
    --border: hsl(220 26% 31%);
    --border-muted: hsl(220 37% 20%);
    --primary: hsl(220 78% 76%);
    --secondary: hsl(40 53% 60%);
    --danger: hsl(9 26% 64%);
    --warning: hsl(52 19% 57%);
    --success: hsl(146 17% 59%);
    --info: hsl(217 28% 65%);
}

/* General style set up */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-pt-sans);
    background-color: var(--bg);
    color: var(--text);
    height: 100svh;
    height: 100vh;
    line-height: 1.5;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
}

.hidden {
    display: none;
}

.show {
    display: block;
}

/* Navigation at top of page */

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

header h1 {
    padding: 0.75rem;
    font-size: 2.5rem;
}

.pageLinks ul {
    display: flex;
    justify-content: space-between;
}

.pageLinks ul li {
    list-style-type: none;
    padding-inline-end: 1rem;
}

.pageLinks a {
    background-color: transparent;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    padding: 0.25rem;

    transition: background-color 500ms ease,
        color 500ms ease;
}

.pageLinks a:hover {
    background-color: var(--info);
    color: var(--highlight);
    padding: 0.25rem;
    border-radius: 3px;
}

#toggle-btn {
    background-color: var(--bg);
    color: var(--text);
    padding: 0.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start;


    transition: background-color 300ms ease;
}

#toggle-btn:hover {
    opacity: 0.7;
}

#toggle-btn:active {
    transform-origin: center;
    transition: rotate(30deg);
}


.wi--solar-eclipse {
    display: inline-block;
    width: 30px;
    height: 30px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='%23000' d='M4.37 14.62c0-.24.08-.45.25-.62c.17-.16.38-.24.6-.24h2.04c.23 0 .42.08.58.25c.15.17.23.37.23.61s-.07.44-.22.61s-.35.25-.58.25H5.23c-.23 0-.43-.08-.6-.25a.83.83 0 0 1-.26-.61m2.86 6.93c0-.23.08-.43.23-.61l1.47-1.43c.15-.16.35-.23.59-.23s.44.08.6.23s.24.34.24.57c0 .24-.08.46-.24.64L8.7 22.14q-.615.48-1.23 0a.8.8 0 0 1-.24-.59m0-13.84c0-.23.08-.43.23-.61c.2-.17.41-.25.64-.25c.22 0 .42.08.59.24l1.43 1.47c.16.15.24.35.24.59q0 .36-.24.6c-.24.24-.36.24-.6.24s-.44-.08-.59-.24L7.47 8.32a.84.84 0 0 1-.24-.61m2.55 6.91c0-.93.23-1.8.7-2.6s1.1-1.44 1.91-1.91s1.67-.7 2.6-.7c.7 0 1.37.14 2.02.42c.64.28 1.2.65 1.66 1.12c.47.47.84 1.02 1.11 1.66s.41 1.32.41 2.02c0 .94-.23 1.81-.7 2.61s-1.1 1.43-1.9 1.9s-1.67.7-2.61.7s-1.81-.23-2.61-.7s-1.43-1.1-1.9-1.9c-.45-.81-.69-1.68-.69-2.62m4.36 7.78c0-.24.08-.44.25-.6s.37-.24.6-.24c.24 0 .45.08.61.24s.24.36.24.6v1.99c0 .24-.08.45-.25.62s-.37.25-.6.25s-.44-.08-.6-.25a.85.85 0 0 1-.25-.62zm0-15.5V4.86c0-.23.08-.43.25-.6S14.76 4 15 4s.43.08.6.25s.25.37.25.6V6.9c0 .23-.08.42-.25.58s-.37.23-.6.23s-.44-.08-.6-.23s-.26-.35-.26-.58m.11 4.32c.87.11 1.6.49 2.19 1.15s.89 1.44.89 2.33c0 .83-.26 1.56-.78 2.2c-.52.63-1.18 1.04-1.98 1.21c.2.02.35.04.44.04c.97 0 1.81-.35 2.5-1.04s1.04-1.52 1.04-2.5c0-.96-.35-1.78-1.04-2.47c-.69-.68-1.52-1.02-2.5-1.02c-.27.02-.52.05-.76.1m5.41 8.86c0-.23.08-.42.23-.56c.15-.16.34-.23.56-.23c.24 0 .44.08.6.23l1.46 1.43c.16.17.24.38.24.61s-.08.43-.24.59q-.6.465-1.2 0l-1.42-1.42a.97.97 0 0 1-.23-.65m0-10.92c0-.25.08-.45.23-.59l1.42-1.47a.84.84 0 0 1 .59-.24c.24 0 .44.08.6.25c.17.17.25.37.25.6c0 .25-.08.46-.24.62l-1.46 1.43q-.27.24-.6.24c-.23 0-.41-.08-.56-.24s-.23-.36-.23-.6m2.26 5.46c0-.24.08-.44.24-.62q.24-.24.57-.24h2.02c.23 0 .43.09.6.26s.26.37.26.6s-.09.43-.26.6s-.37.25-.6.25h-2.02c-.23 0-.43-.08-.58-.25s-.23-.36-.23-.6'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.wi--moon-alt-waning-gibbous-1 {
    display: inline-block;
    width: 30px;
    height: 30px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='%23000' d='M3.74 14.43c0-2.04.51-3.92 1.52-5.65S7.64 5.7 9.37 4.69s3.61-1.5 5.65-1.5s3.92.5 5.65 1.5s3.09 2.36 4.09 4.09s1.5 3.61 1.5 5.65s-.5 3.93-1.5 5.65s-2.36 3.1-4.09 4.11s-3.61 1.52-5.65 1.52s-3.93-.51-5.65-1.52s-3.1-2.38-4.11-4.11s-1.52-3.61-1.52-5.65m1.2 0q0 2.04.81 3.9c.81 1.86 1.25 2.32 2.15 3.22s1.97 1.62 3.22 2.15s2.55.81 3.9.81c.86 0 1.62-.09 2.29-.28c.83-.44 1.55-.96 2.17-1.57s1.1-1.22 1.46-1.85s.64-1.33.86-2.09s.36-1.48.43-2.14s.1-1.37.1-2.15c0-.93-.1-1.84-.3-2.74s-.51-1.79-.93-2.67s-.99-1.72-1.72-2.5s-1.57-1.45-2.54-1.99c-.4-.09-1.01-.13-1.82-.13c-1.36 0-2.66.26-3.9.79S8.8 6.43 7.9 7.32s-1.62 1.97-2.15 3.2s-.81 2.54-.81 3.91'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/* Overlay */


.overlay-wrapper {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;

    /* width: 90%; */
    padding-block-start: 5rem;
    margin: 0 auto;
}

.overlay-body {
    background-color: var(--text);
    color: var(--highlight);

    display: flex;
    justify-content: space-between;
}

.overlay-text {
    flex-grow: 1;


    display: flex;
    flex-direction: column;
    align-items: center;
}

.overlay-text {
    align-content: center;
    padding-block: 3rem;
}

.overlay-cta {
    align-content: space-between;
    padding-block: 3rem;
    text-align: center;
}

.overlay-button {
    background-color: var(--success);
    color: var(--highlight);
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
}

.overlay-button:hover {
    background-color: red;
}

.overlay-button:active {
    background-color: brown;
}

.overlay img {
    width: auto;
    height: 300px;
}

/* Social Media Links */

.fa {
    padding: 0.5rem;
    font-size: 1.5rem;
    width: 3rem;
    text-align: center;
    text-decoration: none;
    color: var(--text-muted)
}

.fa:hover {
    opacity: 0.7;
}

.social-media {
    text-align: center;
    padding-top: 4rem;
}

/* Company Image at top of page */

figure {
    display: flex;
    flex-direction: column;
    max-width: max-content;
    margin: 0 auto;
}

figure img {
    max-height: 300px;
    width: auto;
    display: inline-block;
    margin: -0.5rem auto;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

figcaption {
    background-color: var(--text);
    color: var(--bg);
    font-family: var(--font-inconsolata);
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 200;
    padding: 0.25rem;
    text-align: center;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* Hero Text */

.main-index {
    border: 1px solid var(--border-muted);
    border-radius: 0.25rem;
    box-shadow: var(--box-shadow);
    padding: 2rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3rem auto;

    background-color: var(--bg-light);

    width: 60%;
}

.main-index h2 {
    padding-block-end: 2rem;
    font-size: 2rem;
}

.main-index p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Footer */

footer {
    text-align: center;
    padding: 10px;
    width: 100%;
}


/* Contact Form */
input,
button,
legend,
label {
    font: inherit;
}

label {
    text-transform: uppercase;
    font-size: 1rem;
}

input {
    background: var(--bg);

    border: var(--border-muted);
    border-radius: 15px;
    padding: 1ex 2ex;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--success);
}

input:not([type="Checkbox"]):not([type="radio"]) {
    width: 100%;
}

form {
    display: grid;
    gap: 0.5rem;

    @media (width > 720px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.contact-wrapper {
    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--bg-dark);
    padding: 1rem;
    margin: 0 auto;
    margin-top: 1.5rem;
    width: 80%;

    filter: drop-shadow(1px 2px 8px var(--border-muted));
}

.form-group {
    display: grid;
    gap: 0.5em;
}

.form-group:has(.req-checkbox) {
    grid-column: 1 / -1;
    display: flex;
}

.req-checkbox {
    text-transform: none;
    font-size: small;
}

.button-input {
    justify-self: start;
}

.button-input>button {
    background: var(--primary);
    color: var(--highlight);
    padding: 0.5em;
    border-radius: 10px;
}

/* Table layout */

.featured-products {
    text-align: center;
    padding: 2rem;
}

.featured-products h2 {
    font-size: 2rem;
    padding-block-end: 2rem;
}

.featured-products p {
    color: var(--text-muted);
    font-size: 1.2rem;
}

.table-container {
    /* width: min(900px, 100%); */
    padding: 3rem;
    margin-inline: auto;
}

table {
    width: 100%;
    background-color: var(--bg-dark);
    border-collapse: collapse;
    font: inherit;
}

table button {
    background-color: var(--primary);
    color: var(--highlight);
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 3px;
}

table button:hover {
    /* reminder to do something later */
    background-color: red;
}

table button:active {
    /* reminder to do something later */
    background-color: brown;
}

td img {
    height: 200px;
    width: auto;
}

th,
td {
    padding: 1rem;
    text-align: left;
}

td {
    color: var(--text-muted)
}

th {
    background-color: var(--info);
    color: var(--highlight)
}

tr:nth-of-type(2n) {
    background-color: var(--bg-darker);
}

@media (max-width: 1020px) {
    th {
        display: none;
    }

    td {
        display: block;
        padding: 0.5rem 1rem;
    }

    td:first-child {
        padding-top: 1rem;
    }

    td:last-child {
        padding-bottom: 1rem;
    }

    td::before {
        content: attr(data-cell) ": ";
        font-weight: 700;
        text-transform: capitalize;
    }
}

/* About page */

.team {
    max-width: 250px;
    height: auto;
    display: block;
    position: relative;
    margin: 0 auto;
    border-radius: 3px;
}

.about-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.about-container img {
    max-height: 400px;
    width: auto;
}

.about-wrapper h3 {
    text-align: center;
    font-size: 3rem;
}

.img-card {
    display: block;
    text-align: center;
    margin: 0 auto;
}

.about-card {
    border: 1px solid var(--border);

    border-radius: 3px;
    background-color: var(--bg-light);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    padding: 1rem;

    box-shadow: var(--box-shadow);
}

.name-card {
    color: var(--text);
    text-align: center;
}

.department {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
}

.email,
.phone {
    text-align: center;
}

@media (min-width: 720px) {
    .about-container {
        grid-template-columns: repeat(2, 1fr);
    }
}