/* Importing static fonts */

@font-face {
    font-family: "Poppins";
    src: url(../fonts/Poppins-Regular.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins Medium";
    src: url(../fonts/Poppins-Medium.ttf) format("truetype");
    font-display: swap;
}

/* END */

/* Initiating css variables */

:root {

    /* Main */
    --main-width: 1280px;
    --main-side-margin: 1rem;
    --main-side-padding: 1rem;
    --navigation-height: 3.7rem;
    --main-radius: 0.20rem;

    /* Colors */
    --background-primary: #FFFFFF;

    --card: #FFFFFF;
    --green: #98cd04;
    --black: #37375f;
    --purple: #58588a;
    --white: #FFFFFF;
    --grey: #9c9caf;
    --dark-grey: #555555;

    --divider: #ececf2;

    --thumbnail_bg: #f9fafb;

    --btn-background: #F5F5F5;
    --btn-background-hover: #ededf5;

    --btn-background-black: #31322c;
    --btn-background-black-hover: #1c1d17;

    /* Font */
    --font: 'Poppins', sans-serif;
    --font-medium: 'Poppins Medium', sans-serif;

    --font-size: .875rem;

    /* Shadows */
    --box-shadow-0: rgba(149, 149, 149, 0.15) 0px 3px 10px;
}

/* Minimal CSS reset for browser compatibility */

body {
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: border-box;
}

ul[class], ol[class] {
    list-style: none;
}

body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd {
    margin: 0;
}

input, button, textarea, select {
    font: inherit;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    background: transparent;
    cursor: pointer;
}

/* END */

/* Dark Mode */

:root[data-lightMode="dark"] {

    /* Colors */
    --background-primary: #232325;

    --card: #2f2f33;
    --green: #98cd04;
    --black: #FFFFFF;
    --purple: #c6c6c6;
    --white: #FFFFFF;
    --grey: #66666c;
    --dark-grey: #555555;

    --divider: #ececf2;

    --btn-background: #191919;
    --btn-background-hover: #1f1f1f;

    --btn-background-black: #050505;
    --btn-background-black-hover: #161616;

    /* Shadows */
    --box-shadow-0: rgba(0, 0, 0, 0.15) 0px 3px 10px;
}

@media (prefers-color-scheme: dark) {

    .primary_green {
        fill: var(--green);
    }

    .primary_grey {
        fill: var(--dark-grey);
    }

    :root:not([data-lightMode="light"]) {

        /* Colors */
        --background-primary: #232325;

        --card: #2f2f33;
        --green: #98cd04;
        --black: #FFFFFF;
        --purple: #c6c6c6;
        --white: #FFFFFF;
        --grey: #66666c;
        --dark-grey: #555555;

        --divider: #2e2e2e;

        --btn-background: #191919;
        --btn-background-hover: #1f1f1f;

        --btn-background-black: #050505;
        --btn-background-black-hover: #161616;

        /* Shadows */
        --box-shadow-0: rgba(0, 0, 0, 0.15) 0px 3px 10px;
    }

    :root:not([data-lightMode="light"]) #dark_mode {
        display: none;
    }
}

@media (prefers-color-scheme: light) {

    .primary_green {
        fill: var(--green);
    }

    .primary_grey {
        fill: var(--dark-grey);
    }

    :root:not([data-lightMode="dark"]) #light_mode {
        display: none;
    }
}

[data-lightMode="light"] #light_mode {
    display: none;
}

[data-lightMode="dark"] #dark_mode {
    display: none;
}

/* END */

/* General style */

body {
    font-family: var(--font);
    font-size: var(--font-size);
    color: var(--purple);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--background-primary);
}

.main_container {
    width: 100%;
    max-width: var(--main-width);
    padding: 0 var(--main-side-padding);
    margin: 0 auto;
}

.purple {
    fill: var(--purple);
}

/* END */

/* Main navigation bar */

.header_navigation {
    position: fixed;
    background-color: var(--background-primary);
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
}

.navigation_bar {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-medium);
    font-size: var(--font-size);
    height: var(--navigation-height);
    padding: var(--main-side-padding);
}

.navigation_brand {
    display: flex;
    align-items: center;
    z-index: 110;
}

.navigation_logo {
    display: flex;
    cursor: pointer;
    align-items: center;
    padding-right: 0.55rem;
}

.navigation_menu {
    display: flex;
    align-items: center;
}

.navigation_list, .social_list, .footer_list {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0;
}

.navigation_list, .footer_list {
    column-gap: 1rem;
}

.navigation_link {
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border-radius: var(--main-radius);
    color: var(--purple);
}

.github_link {
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: 0.35rem 0.70rem;
    column-gap: 0.5rem;
    color: var(--white);
    background-color: var(--btn-background-black);
    border-radius: var(--main-radius);
}

.github_link:hover {
    background-color: var(--btn-background-black-hover);
}

.navigation_list .navigation_link:before, .footer_list .navigation_link:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
}

.navigation_list .navigation_link:hover:before,
.navigation_list .active:before,
.footer_list .navigation_link:hover:before,
.footer_list .active:before {
    background-color: var(--green);
}

.navigation_list .navigation_link:hover,
.navigation_list .active,
.footer_list .navigation_link:hover {
    color: var(--black);
}

.social_list .navigation_link:hover {
    color: var(--black);
    background-color: var(--btn-background-hover);
}

.navigation_divider {
    width: 0.07rem;
    height: 1.2rem;
    margin: 0 0.7rem;
    display: flex;
    background: var(--divider);
}

.navigation_extras {
    display: flex;
    align-items: center;
    border-radius: var(--main-radius);
    background-color: var(--btn-background);
    z-index: 110;
}

.navigation_open, .navigation_close {
    display: none;
    padding: 0.35rem 0.55rem;
}

.navigation_shadow {
    box-shadow: var(--box-shadow-0);
}

.scroll_top {
    position: fixed;
    display: none;
    bottom: 5rem;
    right: 5rem;
    padding: .50rem;
    color: var(--white);
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--btn-background-black);
}

.scroll_top:hover {
    background-color: var(--btn-background-black-hover);
}

@media screen and (max-width: 900px) {

    .navigation_menu .navigation_divider {
        display: none;
    }

    .navigation_list {
        position: fixed;
        flex-direction: row;
        width: 100%;
        top: 0;
        right: -150%;
        padding: 4rem 1rem 1rem 1rem;
        row-gap: 0.5rem;
        background-color: var(--background-primary);
        box-shadow: var(--box-shadow-0);
        justify-content: space-evenly;
    }

    .navigation_open {
        display: flex;
    }

    .show_nav .navigation_list {
        align-items: flex-start;
        right: 0;
    }

    .show_nav .navigation_open {
        display: none;
    }

    .show_nav .navigation_close {
        display: flex;
    }

    .social_list {
        column-gap: 1rem;
    }
}

/* END */

/* Hero */

.hero_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15rem var(--main-side-padding) 5rem var(--main-side-padding);
}

.hero_tag {
    color: var(--green);
    border-radius: 1rem;
    font-size: 1.15rem;
}

.hero_headers {
    font-family: var(--font-medium);
    font-size: 2.2rem;
    font-weight: normal;
    color: var(--purple);
    margin-bottom: 0.5rem;
}

.hero_description {
    font-family: var(--font);
    color: var(--grey);
    line-height: 1.85;
    width: 40%;
}

@media screen and (max-width: 900px) {
    .hero_description {
        width: 100%;
    }
}

/* END */

/* Social */

.main_social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    column-gap: 0.3rem;
    padding: 1rem var(--main-side-padding) 4rem var(--main-side-padding);
}

.main_social .navigation_link {
    color: var(--grey);
}

.main_social .navigation_link:hover {
    color: var(--purple);
    background-color: var(--btn-background);
}

/* END */

/* Layouts */

.layouts_container {
    padding: 5rem var(--main-side-padding) 3rem var(--main-side-padding);
}

.main_header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--divider);
    padding: 1rem 0;
    line-height: 1.85;
}

.main_title {
    font-family: var(--font-medium);
    font-size: .95rem;
    color: var(--purple);
}

.main_details {
    color: var(--grey);
}

.main_subheader {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
}

.main_subtitle {
    font-family: var(--font-medium);
    font-size: .90rem;
    padding: 1rem 0;
    color: var(--purple);
}

.layouts_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.layouts_card {
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--main-radius);
    padding: 0.6rem;
    cursor: pointer;
}

.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.disabled img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.layouts_card:hover {
    border: 1px solid var(--green);
}

.layout_new {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    font-family: var(--font-medium);
    font-size: .90em;
    background-color: var(--green);
    border-radius: 2px;
    padding: 0.15rem 0.3rem;
    line-height: 1rem;
    vertical-align: middle;
    color: var(--white);
}

.layouts_thumbnail img {
    border-radius: var(--main-radius);
    background-color: var(--thumbnail_bg);
}

.layouts_details {
    font-family: var(--font-medium);
    color: var(--purple);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.layouts_count {
    font-family: var(--font);
    opacity: 0.75;
}

.layouts_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    margin: 2rem 0 1rem 0;
}

.layouts_title {
    display: flex;
    flex-direction: row;
    column-gap: 0.5rem;
    font-family: var(--font-medium);
    white-space: nowrap;
    color: var(--green);
}

.layouts_divider {
    border-bottom: 1px solid var(--divider);
    width: 100%;
    margin: 0 1rem;
}

.layouts_back {
    font-family: var(--font-medium);
    display: flex;
    align-items: center;
    column-gap: 0.2rem;
    color: var(--green);
    border-radius: var(--main-radius);
}

.layouts_back::before {
    content: "<";
    transition: transform 0.3s ease-out;
}

.layouts_back:hover::before {
    transform: translateX(-4px);
}

.layout_section {
    padding: 3rem 0;
}

.layout_title {
    font-family: var(--font-medium);
    font-size: .95rem;
}

.layout_hashtag {
    font-size: 0.80rem;
    color: var(--green);
    padding-right: 0.5em;
    user-select: none;
}

.layout_extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.layout_buttons {
    display: flex;
    flex-direction: row;
    column-gap: 0.7rem;
}

.main_btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0.7rem;
    border-radius: var(--main-radius);
    color: var(--purple);
    background-color: var(--btn-background);
}

.main_btn:hover {
    color: var(--black);
    background-color: var(--btn-background-hover);
}

div[class^="switch_buttons"],
div[class^="responsive_buttons"] {
    display: flex;
    align-items: center;
    flex-direction: row;
    border-radius: var(--main-radius);
    background-color: var(--btn-background);
    color: var(--purple);
}

div[class^="switch_buttons"] input,
div[class^="responsive_buttons"] input {
    display: none;
}

div[class^="switch_buttons"] input:checked + .btn,
div[class^="responsive_buttons"] input:checked + .btn {
    opacity: 1;
    border-bottom: 3px solid var(--green);
}

div[class^="switch_buttons"] .btn,
div[class^="responsive_buttons"] .btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.45rem;
    opacity: 0.3;
    cursor: pointer;
    padding: 0.50rem 0.7rem;
    border-bottom: 3px solid transparent;
}

div[class^="switch_buttons"] .btn:hover,
div[class^="responsive_buttons"] .btn:hover {
    opacity: 1;
    border-bottom: 3px solid var(--green);
}

div[class^="interactive_preview"] {
    position: relative;
    border-radius: 0.5rem;
    margin: 0 auto;
}

div[class^="source_code"] {
    display: none;
}

.window_topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.8rem;
    border-top-right-radius: var(--main-radius);
    border-top-left-radius: var(--main-radius);
}

.window_topbar_light {
    border-top: 1px solid var(--divider);
    border-left: 1px solid var(--divider);
    border-right: 1px solid var(--divider);
    background-color: var(--btn-background);
}

.window_topbar_black {
    background-color: #1b1b1e;
}

iframe {
    width: 100%;
    border-bottom-left-radius: var(--main-radius);
    border-bottom-right-radius: var(--main-radius);
    border: 1px solid var(--divider);
}

.code_wrapper {
    padding-top: 1rem;
}

.code_header {
    display: flex;
    align-items: center;
    column-gap: 0.3rem;
    color: var(--grey);
    fill: var(--grey);
    padding-bottom: 1rem;
    user-select: none;
}

.code_html, .code_css {
    max-height: 40em;
}

.layout_divider {
    width: 70%;
    margin: 1.5rem auto;
    border-bottom: 2px dashed var(--divider);
}

@media screen and (max-width: 900px) {

    div[class^="responsive_buttons"] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .layouts_cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media screen and (max-width: 650px) {
    .layouts_cards {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }
}

/* END */

/* Footer */

.footer_bar {
    display: flex;
    justify-content: space-between;
    padding: var(--main-side-padding);
}

.footer_logo {
    font-family: var(--font);
    color: var(--grey);
    display: inline-flex;
    align-items: center;
}

.footer_bar .navigation_link {
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border-radius: var(--main-radius);
    color: var(--grey);
}

.footer_bar .active {
    color: var(--black);
}

@media screen and (max-width: 900px) {
    .footer_bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 0.5rem;
    }
}

/* END */

/* Tooltip */

[tooltip] {
    position: relative;
}

[tooltip]::after {
    text-transform: none;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
}

[tooltip]::after {
    content: attr(tooltip);
    font-family: var(--font-medium);
    font-size: var(--font-size);
    border-radius: var(--main-radius);
    background: #000000;
    color: var(--white);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.4rem 0.5rem;
    z-index: 1100;
}

[tooltip]:hover::after {
    display: block;
}

[tooltip=""]::after {
    display: none;
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
    left: 50%;
    transform: translate(-50%, 0.5em);
}

[tooltip][flow^="up"]::after {
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translate(-50%, 0.5em);
}

/* END */

/* Contact */

.contact_container {
    position: relative;
}

.contact_details {
    font-family: var(--font-medium);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 110;
    color: var(--white);
    background-color: #000000;
    padding: 0.35rem 0.1rem 0.35rem 0.55rem;
    border-radius: var(--main-radius);
    display: none;
    align-items: center;
}

.contact_close {
    display: flex;
    cursor: pointer;
    fill: var(--white);
    padding: 0 0.5rem;
}

.show_contact {
    display: flex;
}

@media screen and (max-width: 900px) {

    .contact_details {
        left: 0;
        right: auto;
    }
}

/* End */