*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--color-text-primary);
    font-family: 'M Plus Rounded 1c', sans-serif;
    transition-duration: var(--transition-time);
}

:root {
    --header-height: 4.5rem;
    --background-default: #101014;
    --card-bg: #202024;
    --footer-bg: #18181c;
    --color-text-primary: #e6e6eafe;
    --color-text-secondary: #aaaaaefe;
    --color-text-tertiary: #aaaaaefe;
    --edge-radius: 0.5rem;
    --medium-gap: 1rem;
    --xsmall-gap: calc(var(--medium-gap) / 4);
    --small-gap: calc(var(--medium-gap) / 2);
    --large-gap: calc(var(--medium-gap) * 2);
    --xlarge-gap: calc(var(--medium-gap) * 4);
    --xxlarge-gap: calc(var(--medium-gap) * 6);
    --transition-time: 0.4s;
}

/* classes */

.icon-wrapper {
    aspect-ratio: 1;
    width: 40px;
    overflow: hidden;
    background-color: transparent;
    border: none;
    outline: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--small-gap);
}

.icon-wrapper img {
    width: 100%;
    object-fit: cover;
}

.img-wrapper {
    overflow: hidden;
    border-radius: var(--edge-radius);
    display: flex;
    justify-content: center;
    align-items: center;
}

.v-separator {
    width: 2px;
    max-width: 2px;
    height: 80%;
    align-self: center;
    background-color: white;
}

.horizontal-break {
    width: 100%;
    height: 2px;
}

.horizontal-break::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-text-primary);
}

.hbox {
    display: flex;
    flex-direction: row;
}

.vbox {
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none;
}

.primary-button {
    background-color: #00a4eb;
    border-radius: calc(var(--edge-radius) / 1.5);
    padding: 15px;
    width: fit-content;
    min-width: 12%;
    font-size: 0.85rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.secondary-button {
    border: 1px solid var(--color-text-primary);
    /* background-color: #00a4eb; */
    border-radius: calc(var(--edge-radius) / 1.5);
    padding: 10px;
    width: fit-content;
    min-width: 12%;
    font-size: 0.85rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* elements */

img {
    width: 100%;
    object-fit: cover;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1 {
    color: white;
    font-size: 2rem;
}

h2 {
    color: var(--color-text-primary);
    font-size: 1.4rem;
}

h3 {
    color: var(--color-text-primary);
    font-size: 0.95rem;
}

p {
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    line-height: 1.4rem;
}

section {
    width: 100%;
    padding: 80px 6%;
    background-color: var(--background-default);
    overflow: hidden;
}

/* main */

html,
body {
    overflow-x: hidden;
}

body {
    width: 100%;
    height: 100vh;
    min-width: 320px;
    background-color: var(--background-default);
}

#yaphe-simulation {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    pointer-events: none;
}

#nav-bar {
    position: relative;
    z-index: 100;
    padding: 0% 6%;
    min-height: var(--header-height);
    border-bottom: 1px solid;
    background-color: var(--background-default);
    display: flex;
    align-items: center;
}

#mobile-nav {
    width: 100%;
}

.nav-active {
    position: fixed !important;
    top: 0;
    left: 0;
}

.active-link {
    display: flex;
    justify-content: center;
    padding: var(--small-gap);
    border-radius: 0.45rem;
    min-width: 100px;
    background-color: var(--card-bg);
}

.active-link> a {
    color: var(--color-text-primary) !important;
}

#mobile-nav {
    width: 100%;
    display: flex;
    flex-direction: row;
}

#mobile-nav> div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#mobile-nav> div> div> a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#mobile-nav> div> div> a> .icon-wrapper {
    width: 55px;
}

#mobile-nav-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--medium-gap);
    background-color: var(--background-default);
    translate: 0 -150%;
    position: fixed;
    z-index: 99;
    width: 100%;
    height: calc(100% - var(--header-height));
    top: var(--header-height);
    padding: 40px 2%;
}

#mobile-nav-popup> * {
    width: 90%;
}

#mobile-nav-popup #toolbar {
    display: none;
    width: 100%;
    height: var(--xmedium-gap);
    padding: var(--xsmall-gap);
}

#mobile-nav-popup #toolbar> div,
#mobile-nav-popup #toolbar> div div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--small-gap)
}

#mobile-nav-popup #toolbar div {
    position: relative;
    display: flex;
    align-items: center;
}

#mobile-nav-popup #toolbar div button {
    height: 100%;
}

#mobile-nav-popup #toolbar div button:nth-child(1) {
    width: 32px;
}

#mobile-nav-popup #toolbar div input {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}

#mobile-nav-popup> div:nth-child(2) {
    /* max-height: calc(100% - var(--medium-gap)); */
    /* max-height: 95%; */
    overflow: scroll;
}

#mobile-nav-popup div:nth-child(2) ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
}

#mobile-nav-popup div:nth-child(2) ul li {
    width: 100%;
    max-height: 53px;
    aspect-ratio: 6.31;
    border-radius: var(--edge-radius);
    overflow: hidden;
}

#mobile-nav-popup div:nth-child(2) ul li a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    background-color: var(--card-bg);
    padding: var(--medium-gap);
}

#mobile-nav-popup div:nth-child(3) {
    margin-top: var(--medium-gap);
    width: 35%;
    height: 5%;
}

#mobile-nav-popup div:nth-child(3) a {
    width: 100%;
    height: calc(var(--large-gap) * 1.2);
}

#desktop-nav {
    display: none;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: var(--large-gap)
}

#desktop-nav #logo a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#desktop-nav div:nth-child(2) ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--medium-gap);
}

#desktop-nav div:nth-child(2) ul li a {
    color: var(--color-text-secondary);
}

#landing> div:nth-child(1)> div:nth-child(1){
    margin-bottom: var(--medium-gap);
}

#landing> div:nth-child(1)> div:nth-child(2) {
    margin-bottom: var(--large-gap);
}

#landing> div:nth-child(1)> div:nth-child(3) {
    width: 100%;
    margin-bottom: var(--xlarge-gap);
}

#landing #video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    border-radius: var(--edge-radius);
}

#video-wrapper video {
    width: 100%;
    object-fit: cover;
}

#news> div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--large-gap);
}

#news> div:nth-child(1) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#featured-news,
#featured-news ul {
    width: 100%; 
}

#featured-news ul {
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
}

#featured-news ul li {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1.79;
    border-radius: var(--edge-radius);
    background-color: var(--card-bg);
}

#featured-news> ul> li> div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
}

#featured-news ul li> div> div:nth-child(1) {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#featured-news ul li> div> div:nth-child(1) img {
    width: auto;
    height: 100%;
}

#featured-news ul li> div> div:nth-child(2) {
    padding: var(--xsmall-gap);
    padding-top: var(--medium-gap);
}

#featured-news ul li> div> div:nth-child(2) h3 {
    margin-bottom: var(--small-gap);
}

#uses,
#uses ul {
    width: 100%;
}

#uses ul {
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
}

#uses ul li {
    width: 100%;
    aspect-ratio: 1.79;
    overflow: hidden;
    border-radius: var(--edge-radius);
}

#show-more-uses {
    display: flex;
    flex-direction: row;
    background-color: transparent;
    border: none;
}

#copyright ul {
    text-align: center;
}

#copyright ul li:last-child {
    display: flex;
    flex-direction: row;
}

#features> div:nth-child(1) {
    margin-bottom: var(--large-gap);
}

#features> div:nth-child(2) {
    margin-bottom: var(--medium-gap);
}

#features> p {
    margin-bottom: var(--large-gap);
}

#features-landing p {
    color: var(--color-text-secondary);
}

#features-landing div:nth-child(1) {
    margin-bottom: var(--large-gap);
}

#features-landing div:nth-child(2) {
    margin-bottom: var(--medium-gap);
}

#features-landing div:nth-child(2) div:nth-child(1) {
    border-radius: var(--edge-radius);
    overflow: hidden;
    aspect-ratio: 1.79;
}

#features-list {
    width: 100%;
}

#features-list ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
}

#features-list ul li {
    overflow: hidden;
    border-radius: var(--edge-radius);
    background-color: var(--card-bg);
    width: 100%;
    min-height: var(--xxlarge-gap);
}

#features-list ul li button:nth-child(1) {
    width: 100%;
    height: 100%;
    padding: var(--small-gap);
    background-color: transparent;
    min-height: var(--xxlarge-gap);
    border: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#features-list ul li> div {
    padding: var(--small-gap);
}

#features-list ul li> div> div:nth-child(2) {
    padding: var(--small-gap);
    overflow: hidden;
    background-color: var(--footer-bg);
}

/* div[data-accordion-name] {
    display: none;
} */

#integrate-cta {
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
}

#integrate-cta div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: var(--large-gap);
}

#integration div:nth-child(1) {
    margin-bottom: var(--large-gap);
}

#documentation {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#documentation div:nth-child(1) {
    margin-bottom: var(--large-gap);
}

#contact section:not(#nav-bar, #footer, #copyright) a {
    text-decoration: underline;
}

#contact section:not(#nav-bar, #landing) {
    padding-top: 30px;
    padding-bottom: 30px;
}

#contact #landing {
    padding-top: 60px;
    padding-bottom: 20px;
}

#contact section:not(#nav-bar, #landing) div:nth-child(1) {
    margin-bottom: var(--medium-gap);
}

#teams-list {
    display: flex;
    flex-direction: column;
    gap: var(--large-gap);
}

#teams-list> li> h3 {
    margin-bottom: var(--medium-gap);
}

#teams-list> li> ul> li {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

#examples-listing div {
    margin-bottom: var(--large-gap);
}

#examples-listing ul {
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
    list-style-type: disc;
    padding: 0% 6%;
}

#examples-listing ul li button {
    background-color: transparent;
    outline: none;
    border: none;
}

#examples-listing ul li button:hover {
    text-decoration: underline;
}

#example-display-section {
    height: calc(100vh - 80px);
}

#example-display {
    width: 100%;
    height: 100%;
    background-color: #ffffffee;
}

#footer {
    background-color: var(--footer-bg);
}

#footer #socials {
    min-height: 40px;
    margin-bottom: var(--xlarge-gap);
    display: flex;
    align-items: center;
}

#footer #socials ul {
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--medium-gap);
    display: flex;
    align-items: center;
}

#footer #socials ul li {
    height: 100%;
    display: flex;
    align-items: center;
}

#footer #socials ul li a {
    display: block;
    height: 100%;
}

#footer #socials ul li a img {
    width: auto;
    height: 40px;
}

#footer> div:nth-child(2)> ul {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: var(--large-gap);
}

#footer> div:nth-child(2) ul li h3 {
    margin-bottom: var(--large-gap);
}

#footer> div:nth-child(2) ul li ul {
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
}

#footer> div:nth-child(2) ul li ul li a {
    color: var(--color-text-tertiary);
}

#copyright {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--medium-gap);
    background-color: var(--footer-bg);
}

#copyright p {
    color: var(--color-text-tertiary);
    margin-bottom: var(--large-gap);
}

#copyright ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--small-gap);
}

#copyright div:nth-child(1) {
    margin-bottom: var(--medium-gap);
}

#copyright .icon-wrapper {
    width: 120px;
}

/* media queries */
@media screen and (width >= 768px) {
    section {
        padding: 80px 8%;
    }
    #nav {
        padding-left: 8%;
        padding-right: 8%;
    }
    #featured-news ul {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    #footer> div:nth-child(2)> ul {
        grid-template-columns: auto auto auto;
    }
    #contact #landing {
        padding-top: 60px;
        padding-bottom: 0px !important;
    }
    #contact section:nth-child(4) {
        padding-top: 40px !important;
    }
}

@media screen and (width >= 992px) {
    section {
        padding: 80px 7%;
    }
    #nav-bar {
        padding-left: 7%;
        padding-right: 7%;
    }
    #contact #landing {
        padding-top: 60px;
    }
    #contact section:nth-child(4) {
        padding-top: 50px !important;
    }
    #footer> div:nth-child(2)> ul {
        grid-template-columns: auto auto auto auto;
    }
    #copyright {
        flex-direction: row;
        justify-content: space-between
    }
    #copyright> div:nth-child(1) {
        width: 100%;
        text-align: start;
        display: flex;
        flex-direction: column;
        gap: var(--medium-gap);
    }
    #copyright p {
        margin-bottom: var(--small-gap);
    }
    #copyright ul {
        flex-direction: row;
        gap: var(--large-gap);
    }
}

@media screen and (width >= 1200px) {
    #desktop-nav {
        display: flex;
    }
    #mobile-nav {
        display: none;
    }
    #landing {
        position: relative;
        display: grid;
        align-items: center;
    }
    #landing h1 {
        font-size: 3.25rem;
    }
    #landing p {
        font-size: 1.25rem;
        -webkit-text-stroke: 1px;
        -webkit-text-stroke-color: rgba(0, 0, 0, 0.2);
    }
    #landing> div:nth-child(1) {
        /* padding: 80px 10%; */
        left: 7%;
        translate: 0% 8%;
        width: 40%;
        height: fit-content;
        position: absolute;
        justify-self: start;
        z-index: 1;
    }
    #landing> #video-wrapper {
        width: 65%;
        justify-self: end;
        aspect-ratio: 16/9;
    }
    #landing> #video-wrapper video {
        height: 100%;
        width: auto;
    }
    #featured-news ul {
        display: grid;
        grid-template-columns: 33% 33% 33%;
    }
    #features {
        display: grid;
        gap: var(--medium-gap);
        grid-template-areas: 
                            "title img img"
                            "p     img img"
                            "a     img img"
    }
    #features h2 {
        font-size: 3rem;
    }
    #features p {
        font-size: 1rem;
    }
    #features> *,
    #features> *> * {
        margin: 0 !important;
    }
    #features div:nth-child(1) {
        grid-area: title;
    }
    #features div:nth-child(2) {
        grid-area: img;
    }
    #features div:nth-child(3) {
        grid-area: p;
    }
    #features div:nth-child(3) {
        grid-area: a;
    }
    #features a {
        height: fit-content;
    }
    #documentation div {
        width: 50%;
    }
    #features-landing {
        height: 88vh;
        padding-bottom: 0;
    }
    #features-landing  h1 {
        font-size: 3.25rem;
    }
    #features-landing  p {
        font-size: 1rem;
    }
    #features-landing {
        display: grid;
        column-gap: var(--xlarge-gap);
        grid-template-areas:"title img img"
                            "p     img img"
                            ".     img img";
    }
    #features-landing div:nth-child(1) {
        grid-area: title;
        margin-bottom: var(--large-gap);
    }
    #features-landing div:nth-child(2) {
        grid-area: img;
        height: 75%;
    }
    #features-landing div:nth-child(2) img {
        width: auto;
        height: 100%;
    }
    #features-landing div:nth-child(3) {
        grid-area: p;
    }
    #features-listing {
        padding-top: 0;
    }
    #features-listing ul li {
        padding: var(--medium-gap);
    }
    #features-list ul li> div {
        display: grid;
        grid-template-columns: 50% auto;
        gap: var(--large-gap);
    }
    #contact #landing {
        padding-top: 160px;
        padding-bottom: 0px !important;
    }
    #contact section:nth-child(4) {
        padding-top: 20px !important;
    }
}

/* animations */

.slide-from-top {
    animation: slide-from-top var(--transition-time) forwards;
    display: block;
}

@keyframes slide-from-top {
    0% {
        translate: 0% -150%;
        opacity: 0;
    }
    100% {
        translate: 0% 0%;
        opacity: 100%;
    }
}

.slide-to-top {
    animation: slide-to-top var(--transition-time) forwards;
    display: block;
}

@keyframes slide-to-top {
    0% {
        translate: 0% 0%;
        opacity: 100%;
    }
    100% {
        translate: 0% -100%;
        opacity: 0%;
    }
}

.expand-vertically {
    animation: expand-vertically var(--transition-time) forwards;
    display: block;
}

@keyframes expand-vertically {
    0% {
        height: 0px;
        display: block;
    }
    100% {
        height: auto;
    }
}

.collapse-vertically {
    animation: collapse-vertically var(--transition-time) forwards;
}

@keyframes collapse-vertically {
    100% {
        height: 0px;
        display: none;
    }
}

.slider {
    position: relative;
    opacity: 0;
    transition-duration: 1.5s;
}

.slider.visible {
    opacity: 1;
    position: static;
}

.slide-up {
    transform: translateY(100%);
}

.slide-up.visible {
    transform: translateY(0);
}

.slide-left {
    transform: translateX(100%);
}

.slide-left.visible {
    transform: translateX(0);
}

.slide-right {
    transform: translateX(-100%);
}

.slide-right.visible {
    transform: translateX(0);
}

.slide-down {
    transform: translateY(-100%);
}

.slide-down.visible {
    transform: translateY(0);
}