@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');


/* ------------------------------ */
/* ------------------------------ */
/* RESET CSS */
* {
   margin: 0px;
   padding: 0px;
   border: none;
   outline: none;
   color: inherit;
   font: inherit;
   text-decoration: none;
   box-sizing: border-box;
   appearance: none;
}


/* ------------------------------ */
/* ------------------------------ */
/* THEME: LIGHT: DEFAULT */
#light {
   --primary-color: #80ed99;
   --border-color: #ced4da;
   --primary-text: #343a40;
   --secondary-text: #f8f9fa;
   --accent-text: #adb5bd;
   --background-primary: #f8f9fa;
   --background-secondary: #e9ecef;
   --background-messages: #f8e4cd;
   --background-transparent: rgba(0, 0, 0, 0.05);
   --background-transparent-plus: rgba(0, 0, 0, 0.1);
}


/* ------------------------------ */
/* ------------------------------ */
/* THEME: DARK */
#dark {
   --primary-color: #80ed99;
   --border-color: #495057;
   --primary-text: #f8f9fa;
   --secondary-text: #f8f9fa;
   --accent-text: #adb5bd;
   --background-primary: #212529;
   --background-secondary: #343a40;
   --background-messages: #f8e4cd;
   --background-transparent: rgba(255, 255, 255, 0.05);
   --background-transparent-plus: rgba(255, 255, 255, 0.1);
}


/* ------------------------------ */
/* ------------------------------ */
/* ROOT */
:root {
   --entity-menu: '\21B4';
   --entity-link: '\00BB';
}


/* ------------------------------ */
/* ------------------------------ */
/* SCALE */
@media (min-width: 1300px) {

   :root {
      --scale-a: 1.0;
      --scale-b: 1.0;
   }

}

@media (max-width: 1300px) {

   :root {
      --scale-a: 0.9;
      --scale-b: 1.0;
   }

}

@media (max-width: 1200px) {

 :root {
      --scale-a: 0.8;
      --scale-b: 1.0;
   }

}

@media (max-width: 1100px) {

   :root {
      --scale-a: 0.7;
      --scale-b: 1.0;
   }

}

@media (max-width: 1000px) {

   :root {
      --scale-a: 0.7;
      --scale-b: 1.0;
   }

}

@media (max-width: 900px) {

   :root {
      --scale-a: 1.0;
      --scale-b: 0.7;
   }

}

@media (max-width: 800px) {

   :root {
      --scale-a: 0.9;
      --scale-b: 0.7;
   }

}

@media (max-width: 700px) {

   :root {
      --scale-a: 0.8;
      --scale-b: 0.7;
   }

}

@media (max-width: 600px) {

   :root {
      --scale-a: 0.7;
      --scale-b: 0.7;
   }

}

@media (max-width: 500px) {

   :root {
      --scale-a: 0.6;
      --scale-b: 0.7;
   }

}

@media (max-width: 400px) {

   :root {
      --scale-a: 0.5;
      --scale-b: 0.7;
   }

}

@media (max-width: 300px) {

   :root {
      --scale-a: 0.4;
      --scale-b: 0.7;
   }

}


/* ------------------------------ */
/* ------------------------------ */
/* HTML */
html {
   display: flex;
   flex-direction: column;
   width: 100vw;
   min-height: 100vh;
   overflow: auto;
}

body {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   width: 100vw;
   min-height: 100vh;
   padding-top: calc(66px * var(--scale-a));
   overflow: auto;
   background-color: var(--background-primary);
   color: var(--primary-text);
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: calc(20px * var(--scale-a));
   line-height: 1;
   font-weight: 400;
}


/* ------------------------------ */
/* ------------------------------ */
/* BROWSER */
::placeholder {
   color: var(--accent-text);
}

::-webkit-scrollbar {
   width: 0px;
}


/* ------------------------------ */
/* ------------------------------ */
/* GLOBAL: STYLES */
.FL {
   float: left !important;
}

.FR {
   float: right !important;
}

.HH {
   display: none !important;
}

.UU,
.TT:hover {
   cursor: pointer !important;
   text-decoration: underline !important;
}

.CC,
.BB:hover {
   cursor: pointer !important;
   color: var(--primary-color) !important;
}

.FF {
   width: 100%;
   height: 100%;
}

.span-2 {
   grid-column: span 2;
}

.span-3 {
   grid-column: span 3;
}

.span-4 {
   grid-column: span 4;
}

.MT {
   margin-top: auto;
}

.MR {
   margin-right: auto;
}

.MB {
   margin-bottom: auto;
}

.ML {
   margin-left: auto;
}


/* ------------------------------ */
/* ------------------------------ */
/* MAIN: STYLES */
.SCROLL {
   cursor: pointer;
   position: fixed;
   bottom: calc(150px * var(--scale-b));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(50px * var(--scale-b));
   height: calc(50px * var(--scale-b));
   background-color: var(--primary-color);
   border-radius: 50%;
   color: #212529;
}

#TOP {
   right: calc(25px * var(--scale-b));
   bottom: calc(100px * var(--scale-b));
}

#BOTTOM {
   right: calc(25px * var(--scale-b));
   bottom: calc(25px * var(--scale-b));
}

.Empty {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: 100%;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 200;
   text-transform: uppercase;
}

.More-Content {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
   margin-left: auto;
}

.More-Content::after {
   content: var(--entity-link);
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0px;
   right: 0px;
   width: calc(58px * var(--scale-a));
   height: calc(58px * var(--scale-a));
}

.More-Content:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

#Close {
   position: fixed;
   display: block;
   top: calc(66px * var(--scale-a));
   left: 0px;
   width: 100vw;
   height: 100vh;
   background-color: #212529;
   opacity: 0.5;
   visibility: hidden;
   z-index: 5;
   transition: all 500ms;
}


/* ------------------------------ */
/* ------------------------------ */
/* HEADER */
#Header {
   position: fixed;
   display: flex;
   flex-direction: column;
   align-items: center;
   left: 0px;
   top: 0px;
   width: 100%;
   height: calc(66px * var(--scale-b));
   background-color: var(--background-primary);
   border-bottom: calc(1px * var(--scale-b)) solid var(--border-color);
   border-top: calc(5px * var(--scale-b)) solid var(--primary-color);
   z-index: 5;
}

#Header .wrapper {
   display: grid;
   grid-template-columns: calc(60px * var(--scale-b)) calc(400px * var(--scale-b)) auto;
   width: calc(1200px * var(--scale-b));
   height: calc((60px * var(--scale-b)));
   border-left: calc(1px * var(--scale-b)) solid var(--border-color);
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
}

#Header .wrapper.admin {
   grid-template-columns: calc(60px * var(--scale-b)) calc(400px * var(--scale-b)) auto;
}

#Header .button {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(60px * var(--scale-b));
   height: calc(60px * var(--scale-b));
   padding: calc(5px * var(--scale-b));
   background-color: var(--background-primary);
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
   color: var(--primary-text);
}

#Header .website-name {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(60px * var(--scale-b));
   padding: calc(20px * var(--scale-b));
   background-color: var(--background-primary);
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-b));
   font-weight: 600;
}

#Header :is(.main-menu,.admin-menu) {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 100%;
}

#Header .member-menu {
   display: grid;
   grid-template-columns: auto auto calc(60px * var(--scale-b));
   width: 100%;
   height: calc(60px * var(--scale-b));
   overflow: visible;
}

#Header .member-menu a:last-child {
   border-right: none;
}

#Header .link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   max-width: calc(300px * var(--scale-b));
   height: 100%;
   background-color: var(--background-primary);
   border-bottom: calc(5px * var(--scale-b)) solid var(--background-primary);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-b));
   font-weight: 800;
   text-transform: uppercase;
}

#Header .profile-menu {
   cursor: pointer;
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: calc(60px * var(--scale-b));
   overflow: visible;
}

#Header .profile-menu:hover .menu {
   display: flex;
}

#Header .profile {
   display: grid;
   grid-template-columns: calc(60px * var(--scale-b)) auto;
   width: 100%;
   height: calc(60px * var(--scale-b));
   overflow: visible;
   background-color: var(--background-transparent);
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
}

#Header .profile .image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

#Header .profile .info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(5px * var(--scale-b));
   width: 100%;
   height: 100%;
   padding: calc(10px * var(--scale-b));
}

#Header .profile .info .name {
   display: block;
   width: 100%;
   height: 100%;
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-b));
   font-weight: 600;
   line-height: 1;
   text-align: left;
}

#Header .profile .info .points {
   display: block;
   width: 100%;
   height: 100%;
   color: var(--accent-text);
   font-size: calc(12.5px * var(--scale-b));
   font-weight: 400;
   line-height: 1;
   text-align: left;
}

#Header .profile .info .points .count {
   color: var(--primary-color);
}

#Header .menu {
   position: absolute;
   display: none;
   flex-direction: column;
   top: calc(60px * var(--scale-b));
   width: 100%;
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-b)) solid var(--border-color);
   z-index: 10;
}

#Header .menu .more-info {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-b));
   width: 100%;
   height: 100%;
   padding: calc(20px * var(--scale-b));
   overflow: visible;
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-b));
   font-weight: 400;
}

#Header .menu .option {
   display: grid;
   grid-template-columns: calc(60px * var(--scale-b)) auto;
   justify-content: start;
   align-items: start;
   gap: 0px;
   width: 100%;
   height: calc(60px * var(--scale-b));
   background-color: var(--background-primary);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-b));
   font-weight: 600;
   text-transform: capitalize;
}

#Header .menu .option.hl {
   display: grid;
   grid-template-columns: calc(100% - (60px * var(--scale-b))) calc(60px * var(--scale-b));
   margin: calc(20px * var(--scale-b));
   width: calc(100% - (40px * var(--scale-b)));
   height: calc(50px * var(--scale-b));
   background-color: var(--primary-color);
   border-radius: calc(50px * var(--scale-b));
   color: #212529;
   text-transform: uppercase;
}

#Header .menu .option .name {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: 100%;
   padding: 0px;
}

#Header .menu .option .icon {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

#Header .menu .option:not(.hl):is(.x,:hover) {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

#Header .menu .option.hl .name {
   padding: 0px calc(20px * var(--scale-b));
}

/* ------------------------------ */
/* HEADER: OTHER */
#Header .material-icons-outlined {
   font-size: calc(30px * var(--scale-b));
}

#Header :where(.website-name,.button,.link):is(.x,:hover) {
   cursor: pointer;
   color: var(--primary-color);
   background-color: var(--background-transparent);
}

#Header :where(.link):is(.x,:hover) {
   background-color: var(--background-primary);
   border-bottom: calc(5px * var(--scale-b)) solid var(--border-color);
}

/* ------------------------------ */
/* HEADER: ID */
#nav-button {
   display: none !important;
}


/* ------------------------------ */
/* ------------------------------ */
/* LAYOUT */
#Wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: 100%;
   overflow: visible;
}

#Wrapper-Padding {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: 100%;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
}

#Sidebar-Content {
   display: grid;
   grid-template-columns: calc(400px * var(--scale-a)) auto;
   width: calc(1200px * var(--scale-a));
   min-height: calc(100vh - (386px + 66px));
   border-left: calc(1px * var(--scale-a)) solid var(--border-color);
   border-right: calc(1px * var(--scale-a)) solid var(--border-color);
   overflow: visible;
}

#Sidebar-Admin {
   display: grid;
   grid-template-columns: calc(400px * var(--scale-a)) auto;
   width: calc(1200px * var(--scale-a));
   min-height: calc(100vh - (0px + 66px));
   border-left: calc(1px * var(--scale-a)) solid var(--border-color);
   border-right: calc(1px * var(--scale-a)) solid var(--border-color);
   overflow: visible;
}

#Grid-Split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale-a));
   width: calc(1200px * var(--scale-a));
   height: auto;
   overflow: visible;
}

#Grid {
   display: grid;
   grid-template-columns: 1fr;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale-a));
   width: calc(1200px * var(--scale-a));
   height: auto;
   overflow: visible;
}

#Page {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: 100%;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
}

#Append {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   overflow: visible;
}


/* ------------------------------ */
/* ------------------------------ */
/* BANNER */
#Banner {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   max-width: calc(1200px * var(--scale-a));
   height: auto;
   padding: calc(50px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   border: 1px solid var(--border-color);
   border-radius: calc(3px * var(--scale-a));
}

#Banner h2 {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(50px * var(--scale-a));
   font-weight: 800;
   text-align: center;
}

#Banner p {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(25px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
   text-align: center;
}

#Banner:hover h2 {
   cursor: pointer;
   color: var(--primary-color);
}


/* ------------------------------ */
/* ------------------------------ */
/* SIDEBAR */
#Sidebar {
   display: flex;
   flex-direction: column;
   gap: 0px;
   width: 100%;
   min-height: 100%;
   padding: 0px;
   overflow: visible;
   background-color: var(--background-primary);
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
}

#Sidebar .section {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0px;
   width: 100%;
   height: auto;
   padding: 0px;
   overflow: visible;
   border-bottom: calc(1px * var(--scale-b)) solid var(--border-color);
}

#Sidebar .section .link {
   position: relative;
   display: grid;
   grid-template-columns: calc(60px * var(--scale-b)) auto;
   gap: 0px;
   width: 100%;
   height: auto;
   padding: 0px;
   overflow: visible;
   background-color: var(--background-primary);
   color: var(--primary-text);
}

#Sidebar .section .link .icon {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(60px * var(--scale-b));
   height: calc(60px * var(--scale-b));
   overflow: visible;
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
}

#Sidebar .section .link .icon .material-icons-outlined {
   font-size: calc(30px * var(--scale-b));
}

#Sidebar .section .link .text {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(59px * var(--scale-b));
   padding: calc(15px * var(--scale-b)) calc(20px * var(--scale-b));
   overflow: visible;
   font-size: calc(20px * var(--scale-b));
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
}

#Sidebar .section .link.x,
#Sidebar .section .link:hover {
   cursor: pointer;
   color: var(--primary-color);
   background-color: var(--background-transparent);
}


/* ------------------------------ */
/* ------------------------------ */
/* HERO */
#Hero {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0px;
   width: 100%;
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   border-bottom: calc(1px * var(--scale-a)) solid var(--border-color);
}

#Hero .wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
   gap: calc(20px * var(--scale-a));
   width: calc(1200px * var(--scale-a));
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border-left: calc(1px * var(--scale-a)) solid var(--border-color);
   border-right: calc(1px * var(--scale-a)) solid var(--border-color);
}

#Hero .about-website {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: 100%;
   overflow: visible;
   background-color: var(--background-transparent);
}

#Hero .about-website h1 {
   display: flex;
   width: auto;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(40px * var(--scale-a));
   font-weight: 800;
}

#Hero .about-website p {
   display: flex;
   width: auto;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
}


/* ------------------------------ */
/* ------------------------------ */
/* PROFILE */
.Profile {
   display: grid;
   grid-template-columns: calc(200px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Profile .image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
}

.Profile .info {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: 100%;
   overflow: visible;
}

.Profile .name {
   display: block;
   width: 100%;
   height: calc(20px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
}

.Profile .row {
   display: block;
   width: 100%;
   height: calc(15px * var(--scale-a));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
}


/* ------------------------------ */
/* ------------------------------ */
/* RESULTS */
.Results {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: calc(70px * var(--scale-a));
   padding-bottom: calc(20px * var(--scale-a));
   overflow: visible;
   border-bottom: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 600;
}

.Results .count {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   width: 100%;
   height: calc(50px * var(--scale-a));
}

.Results .search {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

.Results .field-submit {
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0px;
   right: 0px;
   width: calc(50px * var(--scale-a));
   height: calc(50px * var(--scale-a));
   background-color: transparent;
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Results .material-icons-outlined {
   font-size: calc(20px * var(--scale-a));
}

.Results .field-submit:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   border-color: var(--primary-color);
   color: var(--primary-color);
}

.Results .search-field {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
}


/* ------------------------------ */
/* ------------------------------ */
/* REVIEW */
#Review {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0px;
   width: 100%;
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   border-bottom: calc(1px * var(--scale-a)) solid var(--border-color);
}

#Review .wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: calc(20px * var(--scale-a));
   width: calc(1200px * var(--scale-a));
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border-left: calc(1px * var(--scale-a)) solid var(--border-color);
   border-right: calc(1px * var(--scale-a)) solid var(--border-color);
}

#Review .question {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(0px * var(--scale-a));
   overflow: visible;
}

#Review .by {
   display: grid;
   grid-template-columns: 80px auto;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: 80px;
   overflow: visible;
}

#Review .by .image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   aspect-ratio: 1 / 1;
}

#Review .by .info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: 100%;
   padding: calc(10px * var(--scale-a));
}

#Review .by .info .name {
   display: block;
   width: 100%;
   height: 2calc(5px * var(--scale-a));
   color: var(--primary-text);
   font-size: 2calc(5px * var(--scale-a));
   font-weight: 600;
   line-height: 1;
   text-align: left;
}

#Review .by .info .score {
   display: block;
   width: 100%;
   height: calc(15px * var(--scale-a));
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   line-height: 1;
   text-align: left;
}

#Review .by .info .score .count {
   color: var(--primary-color);
}

#Review .content {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
}

#Review .options {
   display: grid;
   grid-template-columns: auto 100px;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(50px * var(--scale-a));
}

#Review .view {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   overflow: visible;
   background-color: var(--primary-color);
   border: calc(1px * var(--scale-a)) solid var(--primary-color);
   color: #212529;
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
   margin-left: auto;
}

#Review .view::after {
   content: var(--entity-link);
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0px;
   right: 0px;
   width: calc(48px * var(--scale-a));
   height: calc(48px * var(--scale-a));
}

#Review .link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
   margin-left: auto;
}

#Review .link:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

#Review-Form,
#Timer {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}


/* ------------------------------ */
/* ------------------------------ */
/* URLS */
.Urls {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Urls .by {
   display: grid;
   grid-template-columns: 80px auto;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: 80px;
   overflow: visible;
}

.Urls .by .by-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   aspect-ratio: 1 / 1;
}

.Urls .by .by-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: 100%;
   padding: calc(10px * var(--scale-a));
}

.Urls .by .by-info .by-name {
   display: block;
   width: 100%;
   height: 2calc(5px * var(--scale-a));
   color: var(--primary-text);
   font-size: 2calc(5px * var(--scale-a));
   font-weight: 600;
   line-height: 1;
   text-align: left;
}

.Urls .by .by-info .by-score {
   display: block;
   width: 100%;
   height: calc(15px * var(--scale-a));
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   line-height: 1;
   text-align: left;
}

.Urls .by .by-info .by-score .score-count {
   color: var(--primary-color);
}

.Urls .name {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: calc(70px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(30px * var(--scale-a));
   font-weight: 800;
}

.Urls .content {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
}

.Urls .stats {
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   text-transform: capitalize;
}

.Urls .options {
   display: grid;
   grid-template-columns: calc(50px * var(--scale-a)) calc(50px * var(--scale-a)) calc(50px * var(--scale-a)) calc(50px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(50px * var(--scale-a));
}

.Urls .examine {
   display: grid;
   grid-template-columns: 50px auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(50px * var(--scale-a));
}

.Urls .link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
   margin-left: auto;
}

.Urls .link:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.Urls .view {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   overflow: visible;
   background-color: var(--primary-color);
   border: calc(1px * var(--scale-a)) solid var(--primary-color);
   color: #212529;
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
   margin-left: auto;
}

.Urls .view::after {
   content: var(--entity-link);
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0px;
   right: 0px;
   width: calc(48px * var(--scale-a));
   height: calc(48px * var(--scale-a));
}

.Urls .moderate {
   display: grid;
   grid-template-columns: auto calc(50px * var(--scale-a)) calc(50px * var(--scale-a));
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(50px * var(--scale-a));
}

/* ------------------------------ */
/* URLS: ICONS */
.Urls .material-icons-outlined {
   font-size: calc(20px * var(--scale-b));
}


/* ------------------------------ */
/* ------------------------------ */
/* REVIEWS */
.Reviews {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Reviews .by {
   display: grid;
   grid-template-columns: 80px auto;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: 80px;
   overflow: visible;
}

.Reviews .by .by-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   aspect-ratio: 1 / 1;
}

.Reviews .by .by-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: 100%;
   padding: calc(10px * var(--scale-a));
}

.Reviews .by .by-info .by-name {
   display: block;
   width: 100%;
   height: 2calc(5px * var(--scale-a));
   color: var(--primary-text);
   font-size: 2calc(5px * var(--scale-a));
   font-weight: 600;
   line-height: 1;
   text-align: left;
}

.Reviews .by .by-info .by-score {
   display: block;
   width: 100%;
   height: calc(15px * var(--scale-a));
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   line-height: 1;
   text-align: left;
}

.Reviews .by .by-info .by-score .score-count {
   color: var(--primary-color);
}

/* .Reviews .by {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   border-bottom: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 600;
} */

.Reviews .date {
   display: flex;
   flex-direction: row;
   width: auto;
   height: calc(15px * var(--scale-a));
   overflow: visible;
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 200;
   margin-left: auto;
}

.Reviews .name {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: calc(70px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(30px * var(--scale-a));
   font-weight: 800;
}

.Reviews .content {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
}

.Reviews .stats {
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   text-transform: capitalize;
}

.Reviews .options {
   display: grid;
   grid-template-columns: calc(50px * var(--scale-a)) calc(50px * var(--scale-a)) calc(50px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(50px * var(--scale-a));
}

.Reviews .moderate {
   display: grid;
   grid-template-columns: auto calc(50px * var(--scale-a)) calc(50px * var(--scale-a));
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(50px * var(--scale-a));
}

.Reviews .link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
   margin-left: auto;
}

.Reviews .link:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.Reviews .view {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   overflow: visible;
   background-color: var(--primary-color);
   border: calc(1px * var(--scale-a)) solid var(--primary-color);
   color: #212529;
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
   margin-left: auto;
}

.Reviews .view::after {
   content: var(--entity-link);
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0px;
   right: 0px;
   width: calc(48px * var(--scale-a));
   height: calc(48px * var(--scale-a));
}

/* ------------------------------ */
/* REVIEWS: ICONS */
.Reviews .material-icons-outlined {
   font-size: calc(20px * var(--scale-b));
}


/* ------------------------------ */
/* ------------------------------ */
/* CARDS */
.Cards {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: calc(1200px * var(--scale-a));
   height: auto;
   padding: 0px;
   overflow: visible;
   background-color: transparent;
   margin: auto;
}

.Cards header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(50px * var(--scale-a));
   overflow: visible;
}

.Cards > header h2 {
   display: block;
   width: 100%;
   height: auto;
   padding: 0px;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(50px * var(--scale-a));
   font-weight: 800;
   text-align: center;
}

.Cards > header p {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
   padding: 0px;
   color: var(--primary-text);
   font-size: calc(30px * var(--scale-a));
   font-weight: 400;
   text-align: center;
}

.Cards .items {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: 0px;
   overflow: visible;
   background-color: transparent;
}

.Cards .item {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   border: 0px solid var(--border-color);
}

.Cards .item .image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   aspect-ratio: 1 / 1;
}

.Cards .item h3 {
   display: block;
   width: 100%;
   min-height: calc(30px * var(--scale-a));
   overflow: visible;
   color: var(--primary-color);
   font-size: calc(30px * var(--scale-a));
   font-weight: 600;
   text-align: center;
}

.Cards .item p {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
   text-align: center;
}

/* ------------------------------ */
/* CARDS: OTHER */
.Cards .items .material-icons-outlined {
   font-size: calc(200px * var(--scale-a));
}


/* ------------------------------ */
/* ------------------------------ */
/* ACCORDIONS */
.Accordions {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 0px;
   width: 100%;
   height: auto;
   padding: 0px;
   overflow: visible;
   background-color: transparent;
}

.Accordions header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(50px * var(--scale-a));
   overflow: visible;
}

.Accordions > header h2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   height: auto;
   padding: 0px;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(50px * var(--scale-a));
   font-weight: 800;
}

.Accordions > header p {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   padding: 0px;
   color: var(--primary-text);
   font-size: calc(30px * var(--scale-a));
   font-weight: 400;
}

.Accordions .accordion {
   cursor: pointer;
   display: flex;
   flex-direction: column;
   gap: 0px;
   width: calc(1200px * var(--scale-a));
   height: auto;
   padding: 0px;
   overflow: visible;
   background-color: transparent;
}

.Accordions .question {
   display: grid;
   grid-template-columns: calc(50px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(90px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent-plus);
}

.Accordions .accordion :is(.icon-plus,.icon-minus) {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   aspect-ratio: 1 / 1;
}

.Accordions .accordion .icon-minus {
   display: none;
}

.Accordions .accordion h4 {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(30px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
   text-transform: capitalize;
}

.Accordions .accordion p {
   display: none;
   width: 100%;
   height: auto;
   padding: calc(30px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
}

/* ------------------------------ */
/* ACCORDIONS: ICONS */
.Accordions .material-icons-outlined {
   font-size: calc(50px * var(--scale-a));
}

/* ------------------------------ */
/* ACCORDIONS: HOVER */
.Accordions .accordion:hover p {
   display: block;
}

.Accordions .accordion:hover .icon-plus {
   display: none;
}

.Accordions .accordion:hover .icon-minus {
   display: flex;
}


/* ------------------------------ */
/* ------------------------------ */
/* STATS */
.Stats {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   overflow: visible;
}

.Stats .item {
   display: grid;
   grid-template-rows: 1fr 1fr;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(100px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(0px * var(--scale-a));
}

.Stats .top {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: 100%;
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
}

.Stats .bottom {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: 100%;
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   text-transform: uppercase;
}


/* ------------------------------ */
/* ------------------------------ */
/* HOME STATS */
.Home-Stats {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: calc(1200px * var(--scale-a));
   height: auto;
   overflow: visible;
}

.Home-Stats .item {
   display: grid;
   grid-template-rows: 1fr 1fr;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(200px * var(--scale-a));
   padding: calc(40px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Home-Stats .top {
   display: flex;
   flex-direction: row;
   justify-content: end;
   align-items: center;
   width: 100%;
   height: 100%;
   color: var(--primary-color);
   font-size: calc(40px * var(--scale-a));
   font-weight: 800;
}

.Home-Stats .bottom {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: 100%;
   font-size: calc(30px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
}


/* ------------------------------ */
/* ------------------------------ */
/* REVIEW STATS */
.Review-Stats {
   display: grid;
   grid-template-columns: repeat(2,1fr);
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   overflow: visible;
}

.Review-Stats .item {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Review-Stats .item-1 {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: auto;
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
}

.Review-Stats .item-2 {
   display: flex;
   flex-direction: row;
   justify-content: end;
   align-items: center;
   width: 100%;
   height: auto;
   color: var(--primary-color);
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
}


/* ------------------------------ */
/* ------------------------------ */
/* TABLE */
.Table {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   overflow: visible;
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Table :where(.header,.block) {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   border-bottom: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   text-transform: uppercase;
}

.Table .header {
   font-weight: 800;
}

.Table .block:last-child {
   border-bottom: none;
}

.Table .grid {
   display: grid;
   width: 100%;
   height: calc(15px * var(--scale-a));
   gap: calc(20px * var(--scale-a));
}

.Table .flex {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: calc(15px * var(--scale-a));
   gap: calc(20px * var(--scale-a));
}

.Table .grid-split {
   grid-template-columns: 1fr 1fr;
}

.Table .column-auto {
   grid-template-columns: calc(200px * var(--scale-a)) auto;
}

.Table .column-1 {
   grid-template-columns: 2fr 1fr;
}

.Table .id-column-1 {
   grid-template-columns: 1fr 2fr 1fr;
}

.Table .column-2 {
   grid-template-columns: 2fr repeat(2,1fr);
}

.Table .id-column-2 {
   grid-template-columns: 1fr 2fr repeat(2,1fr);
}

.Table .column-3 {
   grid-template-columns: 2fr repeat(3,1fr);
}

.Table .id-column-3 {
   grid-template-columns: 1fr 2fr repeat(3,1fr);
}

.Table .column-4 {
   grid-template-columns: 2fr repeat(4,1fr);
}

.Table .id-columns-4 {
   grid-template-columns: 1fr 2fr repeat(4,1fr);
}

.Table .column {
   display: block;
   width: 100%;
   height: 100%;
   overflow: visible;
   float: left;
}

.Table .column span {
   float: right;
}


/* ------------------------------ */
/* ------------------------------ */
/* FORM */
.Form {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: calc(700px * var(--scale-a));
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

#Sidebar-Admin .Form,
#Sidebar-Content .Form {
   max-width: 100%;
}

.Form .header {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(150px * var(--scale-a));
   padding: calc(50px * var(--scale-a));
   background-color: var(--background-primary);
   border-bottom: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Form .header .header-name {
   display: flex;
   flex-direction: row;
   width: auto;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(30px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
   text-transform: uppercase;
}

.Form .header .header-form {
   display: flex;
   flex-direction: row;
   width: auto;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
   margin-left: auto;
}

.Form .body {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
}

.Form .field {
   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(50px * var(--scale-a));
}

.Form .field-name {
   position: relative;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   top: calc(15px * var(--scale-a));
   width: 100%;
   height: 100%;
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
   text-transform: capitalize;
}

.Form .field-input {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

.Form .field-input .field-icon {
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0px;
   left: 0px;
   width: calc(50px * var(--scale-a));
   height: calc(50px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Form .field-input .field-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   text-indent: calc(50px * var(--scale-a));
}

.Form .field-input .field-link {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
}

.Form .field-input .field-link::after {
   content: '\2197';
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   top: -1px;
   right: -1px;
   width: calc(48px * var(--scale-a));
   height: calc(48px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Form .field-input .field-file {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   text-indent: calc(50px * var(--scale-a));
}

.Form .field-input .field-textarea {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(200px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   resize: none;
}

.Form .field-input .field-options {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: 0px;
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
}

.Form .field-input .field-option + label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(48px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   border-right: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Form .field-input .field-option + label:last-child {
   border-right: none;
}

.Form .field-checkboxes {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
}

.Form .field-checkbox + label {
   cursor: pointer;
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale-a));
   overflow: visible;
   border-radius: 0px;
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
   text-transform: capitalize;
   text-indent: calc(15px * var(--scale-a));
}

.Form .field-checkbox + label span.ML {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(50px * var(--scale-a));
   height: calc(50px * var(--scale-a));
   text-indent: 0px;
}

.Form .errors {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   padding: calc(20px * var(--scale-a));
   background-color: var(--background-messages);
   border-radius: 0px;
   color: #212529;
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
   text-align: center;
}

.Form .field-submit {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   text-transform: uppercase;
}

/* ------------------------------ */
/* FORM: ICONS */
.Form .material-icons-outlined {
   font-size: calc(20px * var(--scale-a));
}

/* ------------------------------ */
/* FORM: HOVER */
.Form .field-submit:not(:disabled):hover {
   cursor: pointer;
   background-color: var(--primary-color);
   border-color: var(--primary-color);
   color: #212529;
}

.Form .field-checkbox + label:hover {
   background-color: var(--background-transparent);
}

.Form .field-input .field-option:is(:checked, :hover) + label {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.Form .field-input .field-link:hover {
   cursor: pointer;
   color: var(--primary-color);
}

.Form .field-input .field-link:hover::after {
   border-color: var(--primary-color);
}

/* ------------------------------ */
/* FORM: EMPTY */
.Form .field-checkbox:empty + label span.ML {
   color: var(--border-color);
}

/* ------------------------------ */
/* FORM: CHECKED */
.Form .field-checkbox:checked + label span.ML {
   color: var(--primary-color);
}

/* ------------------------------ */
/* FORM: DISABLED */
.Form .field-input .field-text:disabled {
   background-color: var(--background-transparent-plus);
}


/* ------------------------------ */
/* ------------------------------ */
/* FOOTER */
#Footer {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   top: 0px;
   width: 100%;
   min-height: 100px;
   overflow: visible;
   background-color: var(--background-transparent);
   border-top: 20px solid var(--border-color);
   border-bottom: calc(5px * var(--scale-a)) solid var(--border-color);
   margin-top: auto;
}

#Footer .wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: calc(50px * var(--scale-a));
   width: calc(1200px * var(--scale-a));
   height: auto;
   padding: calc(50px * var(--scale-a)) 0px;
   overflow: visible;
}

#Footer .section {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   overflow: visible;
}

#Footer .header,
#Footer .website-name {
   display: block;
   width: 100%;
   height: calc(30px * var(--scale-a));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(30px * var(--scale-a));
   font-weight: 800;
   text-align: left;
   text-transform: uppercase;
}

#Footer .header {
   margin-bottom: calc(20px * var(--scale-a));
}

#Footer .social {
   display: flex;
   flex-direction: row;
   gap: calc(10px * var(--scale-a));
   font-size: calc(40px * var(--scale-a));
}

#Footer .website-description {
   display: block;
   width: 100%;
   min-height: calc(22.5px * var(--scale-a));
   overflow: visible;
   color: var(--accent-text);
   font-size: calc(22.5px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
   text-align: left;
}

#Footer .bottom {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: calc(1200px * var(--scale-a));
   height: auto;
   padding: 20px 0px;
   overflow: visible;
   border-top: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 200;
}

#Footer .legal {
   display: flex;
   flex-direction: row;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: 100%;
}

#Footer .developer {
   display: flex;
   flex-direction: row;
   justify-content: end;
   align-items: center;
   width: 100%;
   height: 100%;
}

#Footer .developer a {
   display: inline-block;
   margin-left: calc(5px * var(--scale-a));
}


/* ------------------------------ */
/* ------------------------------ */
/* ARTICLES */
article {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(30px * var(--scale-a));
   overflow: visible;
}

article h1 {
   display: block;
   width: 100%;
   min-height: calc(50px * var(--scale-a));
   overflow: auto;
   font-size: calc(50px * var(--scale-a));
   font-weight: 800;
   margin-bottom: calc(50px * var(--scale-a));
   text-align: center;
   line-height: 1.5;
}

article h2 {
   display: block;
   width: 100%;
   min-height: calc(30px * var(--scale-a));
   overflow: auto;
   font-size: calc(30px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
   text-align: left;
   text-transform: capitalize;
   margin-bottom: 0px;
}

article h3 {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   overflow: auto;
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
   text-align: left;
   text-transform: capitalize;
   margin-bottom: 0px;
}

article p {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   overflow: auto;
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
   text-align: left;
   margin-bottom: 0px;
}

article ul, article ol { 
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   list-style: disc outside none;
   margin: calc(20px * var(--scale-a)) 0px;
   padding: 0px 0px 0px calc(60px * var(--scale-a));
}

article ol { 
   list-style-type: decimal;
}

article li { 
   display: list-item;
   font-size: calc(20px * var(--scale-a));
   line-height: 1.5;
}


/* ------------------------------ */
/* ------------------------------ */
/* MOBILE */
@media screen and (max-width: 900px) {
   
   body {
      padding-top: calc((66px * var(--scale-b) + (61px * var(--scale-b))));
   }

   #Header .wrapper.with-nav #nav-button {
      display: flex !important;
   }

   #Header .wrapper.without-nav #nav-button {
      display: none !important;
   }

   #Header .wrapper {
      grid-template-rows: auto auto;
      width: 100%;
      border-left: none;
      border-right: none;
   }

   #Header .wrapper.with-nav {
      grid-template-columns: calc(60px * var(--scale-b)) calc(60px * var(--scale-b)) 100%;
   }

   #Header .wrapper.without-nav {
      grid-template-columns: calc(60px * var(--scale-b)) 100%;
   }

   #Header .main-menu,
   #Header .member-menu {
      position: fixed;
      top: calc(66px * var(--scale-b));
      height: calc(61px * var(--scale-b));
      background-color: var(--background-primary);
      border-bottom: calc(1px * var(--scale-b)) solid var(--border-color);
   }

   #Header .member-menu {
      grid-template-columns: auto auto calc(60px * var(--scale-b));
   }

   #Sidebar-Content {
      display: flex;
      flex-direction: column;
      width: 100%;
      border-left: none;
      border-right: none;
   }

   #Sidebar {
      position: fixed;
      left: -100%;
      top: calc(66px * var(--scale-b));
      width: 80vw;
      max-width: 400px;
      height: calc(100vh - (60px * var(--scale-b)));
      z-index: 10;
      transition: left 500ms;
   }

   #Sidebar.x {
      left: 0px;
   }

   #Grid-Split,
   #Review .wrapper,
   #Footer .wrapper,
   #Footer .bottom,
   #Hero .wrapper {
      width: 100%;
   }

   #Grid-Split,
   #Review .wrapper,
   #Hero .wrapper {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
   }

   #Footer .wrapper {
      display: flex;
      flex-direction: column;
      padding: var(50px * var(--scale-a));
   }

   .Accordions .accordion,
   .Cards,
   .Home-Stats,
   .Form {
      max-width: 100%;
   }

   .Cards .items .material-icons-outlined {
      font-size: calc(150px * var(--scale-a));
   }

   #Footer .section {
      justify-content: center;
      align-items: center;
   }

   #Footer .header,
   #Footer .website-name,
   #Footer .website-description {
      text-align: center;
   }

   #Footer .bottom {
      padding: calc(20px * var(--scale-a));
   }

   #Footer .developer {
      width: 200px;
   }

}