/** GENERAL **/

@font-face {
    font-family: 'Nunito Semibold';
    src: url('../fonts/min/nunito-semibold.woff2') format('woff2'),
         url('../fonts/min/nunito-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Extrabold';
    src: url('../fonts/min/nunito-extrabold.woff2') format('woff2'),
         url('../fonts/min/nunito-extrabold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-primary: #0c0a0d;
    --color-background: #130f14;
    --color-onPrimary-dark: #2C0E36;
    --color-onPrimary-lessdark: #341140;
    --color-highlight: #B524EA;
    --color-text-special: #DFC5E8;

    --transparent: rgba(0, 0, 0, 0);
}

body {
    height: 100vh;
    background-color: var(--color-primary);
    color: white;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;

    scrollbar-color: var(--color-highlight) var(--color-primary);
    scrollbar-width: thin;

    font-family: 'Nunito Semibold', sans-serif;
}

h1 { font-family: 'Nunito Extrabold', sans-serif; }
h1, h2, h3, h4, h5, h6, p { margin: 0.5rem; }

a { color: var(--color-text-special) }

/* Accessibility: visually hidden class for screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

::selection { background-color: var(--color-highlight); }

.horizontal-line {
    border: 1px solid var(--color-text-special);
    width: 100%;
    margin: 4rem 0 4rem 0;
}

/** NAVBAR **/

nav {
    align-items: center;
    background-color: var(--color-primary);
    border: 2px solid var(--color-onPrimary-dark);
    border-radius: 4rem;
    display: flex;
    height: 4rem;
    inset: 2rem;
    justify-content: space-between;
    padding: 1rem;
    position: fixed;
    transition: all 0.5s ease-in-out;
    z-index: 500;
}

nav .logo-container { margin: 1rem; display: flex; align-items: center; } nav .logo { height: 48px; width: 192px; display: block; }

nav #links-container { display: flex; gap: 1rem; margin: 1rem; align-items: center; }
nav #links-container a { display: flex; align-items: center; justify-content: center; }
nav img.links-icon { height: 2rem; width: 2rem; transition: all 0.2s ease-in-out; }
nav img.links-icon:hover { transform: scale(1.1); }

/** MAIN CONTENT **/

div#contentWrapper { height: 100vh; overflow-y: auto; }
#heroContent h1 { font-size: 3rem; }
#heroContent h2 { font-size: 1.75rem; }

/** BUTTON **/
button {
    background-color: var(--transparent);
    border: 2px solid var(--color-highlight);
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    font-family: 'Nunito Semibold', sans-serif;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease-in-out;
}

button.topflat { border-radius: 1rem 1rem 0 0; }
button.rightflat { border-radius: 1rem 0 0 1rem; }
button.bottomflat { border-radius: 0 0 1rem 1rem; }
button.leftflat { border-radius: 0 1rem 1rem 0; }

button.square { width: 48px; height: 48px; padding: 0; }

button.x2 { font-size: 1.25rem; padding: .75rem 1rem; width: 128px; }

button.primary {
    background-color: var(--color-highlight);
    border: none
}

/** FOOTER **/
footer { display: flex; justify-content: center; }
#footer {
    width: 65%;
    padding: 4rem;
    display: flex;
    flex-direction: column;
}

#footer-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#footer-bottom { display: flex; justify-content: center; opacity: 0.5; }

#footer-contact p {
    margin: 0;
    padding: 0;
    margin-top: 0.5rem;
}

#footer-links p, #footer-mailinglist p { margin: 0; padding: 0; margin-bottom: 0.5rem; }
#footer-links div { margin-top: 0.25rem; }

#footer-mailinglist-input {
    display: flex;
}

#footer-mailinglist-input input {
    color: white;
    background-color: var(--color-background);
    height: 48px;
    border: none;
    border-radius: 1rem 0 0 1rem;
    padding: 0 0 0 1rem;
}

#footer-links-quicklinks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media screen and (max-width: 768px) {
    nav { inset: 1rem; align-items: center; }
    #links-container-github { display: none; }
    nav .logo { height: 32px; width: 128px; }

    #heroContent h1 { font-size: 2rem; }
    #heroContent h2 { font-size: 1.25rem; }

    button { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
    button.x2 { font-size: 1rem; padding: 0.5rem 0.75rem; width: 96px; }

    #footer { width: 100%; padding: 2rem; }
    #footer-top { flex-direction: column; }
    #footer-contact { display: none; }

    #footer-links {
        margin: 2rem;
        padding: 1rem;
        border-radius: 1rem;
        background-color: var(--color-background);
    }

    #footer-links h4 { text-align: center; }

    .carousel { padding: 2rem 1rem; }
    .carousel h2 { font-size: 1.5rem; }
    .carousel-track { gap: 0.75rem; }
    .company-logo { height: 32px; }
}

/** CAROUSEL **/
.carousel {
    padding: 4rem 2rem;
    background-color: var(--color-background);
}

.carousel h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-family: 'Nunito Extrabold', sans-serif;
    font-size: 2rem;
}

.carousel-container {
    overflow: hidden;
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.carousel-track {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.company-logo {
    height: 96px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}

.carousel-container:hover .company-logo {
    opacity: 1;
    filter: grayscale(0%);
}