:root {
    --primary-bg: #171719;
    --primary-txt: #fff;
    --primary-p: #7c7c7c;
    --primary-plight: #a5a5a5;
    --primary-rest: #314ef0;
}

.__uppercase { text-transform: uppercase; }

body, html {height: 100%; overflow-x: hidden; user-select: none;}

.body__container {
    padding: 0;
    margin: 0;
    background-color: var(--primary-bg);
    color: var(--primary-txt);
    min-height: 100vh;
}

.page__container {
    max-width: 1152px;
    margin: 0 auto;
    padding-inline: 35px;
    display: flex;
    flex-direction: column;
    gap: 70px;
}

/* Header container styling */
.header__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 40px;
    padding-block: 25px;
    position: relative;
}

.header__logo h1 {
    font-family: "Furore";
    font-weight: lighter;
    font-size: 22px;
}

.header__links {
    display: flex;
    justify-content: center;
    gap: 40px;
}
.header__links li {
    list-style: none;
    display: flex;
    align-items: center;
}
.header__links li::before {
    content: "•";
    color: var(--primary-rest);
    font-weight: bolder;
    margin-right: 0.4em;
    filter: drop-shadow(0 0 5px var(--primary-rest));
}
.header__links li span {
    font-family: "Google Sans";
    transition: .325s;
}
.header__links li span:hover {
    cursor: pointer;
    color: var(--primary-rest);
}

.header__actions {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
}

.__languages {
    position: absolute;
    margin-top: 16px;
}

.language__selector {
    border: none;
    outline: none;
    background: none;
    display: flex;
    align-items: center;
    font-family: "Google Sans";
    font-weight: bold;
    font-size: medium;
    color: var(--primary-p);
    transition: .325s;
}
.language__selector img {
    width: 0.85em;
    margin-right: 0.25em;
}
.language__selector:hover {
    cursor: pointer;
    color: var(--primary-plight);
}

.language__selector.other {
    opacity: 0;
    pointer-events: none;
}
.language__selector.visible {
    opacity: 1;
    pointer-events: auto;
}

.main__container {
    display: flex;
    flex-direction: column;
    gap: 150px;
    flex: 1 0 auto;
}


/* Description section styling */
.description__section {
    display: flex;
    align-items: center;
}

.section__title {
    width: fit-content;
}
.section__title h1 {
    font-family: "Wix Madefor Display";
    font-size: 55px;
    padding-bottom: 0.35em;
    border-bottom: 4px solid var(--primary-rest);
    transition: .325s;
}

.description__section_text p {
    font-family: "Google Sans";
    font-size: 15px;
    color: var(--primary-p);
    line-height: 1.7em;
    width: 80%;
    margin-block: 30px;
}

button:not(.language__selector) {
    border: 1px solid var(--primary-rest);
    border-radius: 5px;
    outline: none;
    font-family: "Google Sans";
    font-size: 17px;
    padding-block: 10px;
    padding-inline: 30px;
    color: var(--primary-rest);
    background-color: transparent;
    transition: .325s;
}
button:not(.language__selector):hover {
    cursor: pointer;
    background-color: var(--primary-rest);
    color: var(--primary-bg);
}
button:not(.language__selector):active {
    transform: scale(0.975);
}

.description__section_img { position: relative; }
.description__section_img img {
    transform: scaleX(-1);
    width: 500px;
    transition: .325s;
    position: relative;
}

.__blob {
    width: var(--s); height: var(--s);
    opacity: var(--o);
    background-color: var(--primary-rest);
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}



/* Features section styling */
.features__section .section__title {
    width: 100%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}
.features__section .section__title h1 {
    padding-left: 220px;
}

.features__section_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 20px;
}

.features__section_grid .__item {
    font-family: "Google Sans";
    font-size: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.175);
    border-radius: 15px;
    padding-block: 10px;
    padding-inline: 20px;
    transition: transform .325s;
}
.features__section_grid .__item:hover {
    cursor: pointer;
    transform: translateY(-5px);
    box-shadow: 0 0 1px 1px var(--primary-rest) inset;
}

.features__section_grid .__title {
    font-size: large;
    margin-block: 10px;
}
.features__section_grid .__icon {
    color: var(--primary-rest);
    padding: 15px;
    border-radius: 10px;
    opacity: 0.75;
    font-size: 20px;
    border: 1px solid var(--primary-rest);
    filter: drop-shadow(0 0 10px var(--primary-rest));
}
.features__section_grid .__description {
    color: var(--primary-p);
}


/* Products section styling */
.products__section .section__title {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}
.products__section .section__title h1 {
    padding-inline: 150px;
}

.products__section_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
}

.products__section_grid .__item {
    font-family: "Google Sans";
    font-size: 15px;
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.175);
    border-radius: 15px;
    width: auto;
    padding: 15px;
}

.products__section_grid .__icon img {
    width: 100%;
    border-radius: 15px
}


.products__section_grid .__item_body {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.products__section_grid .__info * {
    margin: 0;
}
.products__section_grid .__item hr {
    border: 1px solid var(--primary-rest);
    margin-top: 25px;
}
.products__section_grid .__title {
    font-size: x-large;
}
.products__section_grid .__price {
    font-size: larger;
    color: var(--primary-p);
    padding-block: 10px;
}

.products__section_grid .__buttons button {
    width: 100%;
    margin-block: 5px;
}


/* Footer container styling */
.footer__container:nth-of-type(hr) {
    opacity: 0.5;
}

.footer__container hr {
    border: 1px solid var(--primary-rest);
}

.footer__container .__socials ul {
    display: flex;
    list-style: none;
    padding: 0;
    justify-content: center;
    gap: 40px;
    font-size: xx-large;
    margin-bottom: 0;
}

.footer__container .__socials a {
    color: var(--primary-p);
    text-decoration: none;
    transition: .325s;
}
.footer__container .__socials a:hover {
    color: var(--primary-plight);
}

.footer__container .__copyright {
    font-family: "Wix Madefor Display";
    font-size: 15px;
    text-align: right;
    color: var(--primary-p);
}

.page__container {min-height: 100vh;}
.footer__container {margin-top: 150px !important;}


/* Overlay */
.__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-family: "Wix Madefor Display";
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .325s;

}

.overlay__window {
    position: absolute;
    background-color: var(--primary-bg);
    border: 1px solid var(--primary-rest);
    padding: 23px;
    margin: 20px;
    border-radius: 12px;
    max-width: 500px;
    overflow: hidden;
}
.overlay__product_modal {opacity: 0; pointer-events: none;}
.overlay__product_modal * {padding: 0; margin: 0;}
.overlay__product_modal ul {
    list-style: none;
    padding: 10px;
}
.overlay__product_modal li {
    font-family: "Google Sans";
    color: var(--primary-p);
    margin-block: 25px;
}
.overlay__product_modal li::before {
    content: "•";
    color: var(--primary-rest);
    font-weight: bolder;
    margin-right: 0.4em;
    filter: drop-shadow(0 0 5px var(--primary-rest));
}
.overlay__product_modal li b {
    color: var(--primary-rest);
    filter: drop-shadow(0 0 5px var(--primary-rest));
    font-weight: 100;
}
.__overlay h1 {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 4px solid var(--primary-rest);
}
.__overlay h2 {
    text-align: center;
    padding-bottom: 15px;
    font-size: 15px;
}
.overlay__product_modal .__menu {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}
.overlay__product_modal .__menu button:last-of-type, .overlay__social_modal .__menu button:last-of-type {
    background-color: var(--primary-rest);
    color: var(--primary-bg);
}
.overlay__product_modal .__menu button:last-of-type:hover, .overlay__social_modal .__menu button:last-of-type:hover {
    filter: drop-shadow(0 0 5px var(--primary-rest));
}

.overlay__social_modal {
    opacity: 0;
    pointer-events: none;
    transition: .325s;
}
.overlay__social_modal .__socials ul {
    display: flex;
    list-style: none;
    padding: 0;
    justify-content: center;
    gap: 40px;
    font-size: xx-large;
    margin-bottom: 0;
    margin-block: 32px;
}
.overlay__social_modal .__socials a {
    color: var(--primary-p);
    text-decoration: none;
    transition: .325s;
}
.overlay__social_modal .__socials .active {
    color: var(--primary-rest);
    pointer-events: none;
}

.overlay__social_modal .__socials a:not(.active):hover {
    color: var(--primary-plight);
    cursor: pointer;
}
.overlay__social_modal .__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}
.overlay__social_modal .__menu input {
    outline: none;
    border: 1px solid var(--primary-p);
    border-radius: 5px;
    outline: none;
    font-family: "Google Sans";
    font-size: 17px;
    padding-block: 10px;
    padding-inline: 15px;
    color: var(--primary-txt);
    background-color: transparent;
    transition: .325s;
    background-color: rgba(0, 0, 0, 0.175);
}
.overlay__social_modal .__errormsg {
    margin: 0;
    text-align: center;
    color: #d13a3a;
    filter: drop-shadow(0 0 5px #d13a3a);
    display: none;
}
.__overlay.active, .overlay__product_modal.active, .overlay__social_modal.active {
    opacity: 1;
    pointer-events: auto;
}

/* Adaptive */
@media screen and (max-width: 1024px) {
  .description__section_img img { width: 400px; }
  .features__section_grid, .products__section_grid {grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 800px) {
 .header__container {gap: 10px;}
 .header__links {padding-left: 20px; gap:10px}
 .features__section_grid, .products__section_grid {grid-template-columns: repeat(2, 1fr);}
 .features__section .section__title {text-align: center; justify-content: center;}
 .features__section .section__title h1 {padding-left: 0;}
}
@media screen and (max-width: 640px) {
 .features__section_grid {grid-template-columns: repeat(1, 1fr);}
 .section__title h1 {font-size: 40px;}
 .__overlay h1 {font-size: 20px;}
 .overlay__product_modal li {font-size: 13px;}
 .__overlay .__menu button {font-size: 15px;}
}
@media screen and (max-width: 550px) {
    .header__logo {display: none;}
    .description__section_img img {opacity: 0;;}
    .products__section .section__title h1 {padding-inline: 20px;}
    .products__section_grid {grid-template-columns: repeat(1, 1fr);}
}
@media screen and (max-width: 500px) {
    .footer__container .__socials ul {gap: 0}
    .header__links {padding: 0}
    .page__container {padding-inline: 20px}
    .__languages {left: 0;}
    .__overlay h1 {font-size: 15px;}
    .__overlay h2 {font-size: 10px;}
    .overlay__product_modal li {font-size: 12px;}
    .overlay__social_modal li {font-size: 23px;}
    .__overlay .__menu button {font-size: 12px;}
    #usernameInput {font-size: 15px;}
    .overlay__social_modal .__errormsg {font-size: 12px;}
}
@media screen and (max-width: 275px) {.__overlay ul {display: none} .__overlay h2 {padding-block: 20px;}}

::-webkit-scrollbar {
  width: 0.4vw;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--primary-rest);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-rest);
}