/*— Fonts —*/
@import url('https://fonts.googleapis.com/css2?family=Alice&family=Montserrat:wght@500&family=Roboto:wght@700&display=swap');
/*— Variables —*/
:root{
  --unit: 8px;
  --hue00: #454e56;
  --hue01: #606060;
  --hue02: #d67c79;
  --hue03: #ff9484;  
  --hue04: #ffceb4;
  --hue05: #f4ece1;
}
/*— Global Styles —*/
.test{ border: 1px dashed red; }
*{
  margin: 0; padding: 0; box-sizing: border-box;
  align-items: center; align-content: center; justify-content: center;
  transition: 0.4s; scroll-behavior: smooth;
  line-height: 1; text-align: center;
  color: var(--hue00);
  font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
/*— Scrollbar —*/
.nobar::-webkit-scrollbar       { width:  0; height: 0; }
::-webkit-scrollbar             { width:  12px; height: 12px; }/* width */
::-webkit-scrollbar-track       { padding: 8px; background: var(--hue04)} /* Track */
::-webkit-scrollbar-thumb       { background: var(--hue03); } /* Handle */
::-webkit-scrollbar-thumb:hover { background: #FFF; }/* Handle on hover */
/*— Texts —*/
h1{ font-size: 200%; font-family: "Alice", serif; font-weight: 400; } 
h2{ font-size: 160%; } h3{ font-size: 140%; }
h4{ font-size: 120%; } h5{ font-size:  80%; }
h6{ font-size:  60%; } p { font-size: 90%; line-height: calc(var(--unit) * 3); }
.fontTT{ margin: calc(var(--unit) * 1) 0 calc(var(--unit) * 2); font-family: "Roboto", sans-serif; font-variation-settings:"wdth" 100; }
.fontLT{ margin: calc(var(--unit) * 1) 0 calc(var(--unit) * 2); font-family: "Alice", serif; font-variation-settings:"wdth" 400; }
/*— HTML tags —*/
html,body{ width: 100%; height: 100%;}
body{ padding:0 calc(var(--unit) * 2); align-content: flex-start; background-color: var(--hue04); }
main { width: 100%; min-width: 300px; max-width: 800px; margin: auto; background-color: var(--hue05); position: relative; }
nav,
header,
footer,
article,
section{ width: 100%; }
aside{ width: 100%; padding: calc(var(--unit) * 2); }

header{ margin-top: calc(var(--unit) * 2); }

nav{ position: sticky; top: 0; background-color: var(--hue04); z-index: 2; box-shadow: 10px 0 var(--hue04),-10px 0 var(--hue04); }
nav section{ display: flex; justify-content: center; }
nav section aside { width: fit-content;}
nav section aside h4{ text-align: right; color: var(--hue02); }

footer{padding: 0 calc(var(--unit) * 1); background-color: var(--hue03); }

button{ margin: calc(var(--unit) * 3) calc(var(--unit) * 3) 0; padding: calc(var(--unit) * 2) calc(var(--unit) * 3); border: none; border-radius: calc(var(--unit) * 3); opacity: 0.8; background-color: var(--hue03); cursor: pointer;}
button h4{ color: #FFF; }
button:hover{ opacity: 1; scale: 1.05; box-shadow: 0 var(--unit) calc(var(--unit) * 3) calc(var(--unit) * -2) var(--hue01); }

svg path,svg polygon{ fill:var(--hue02); }
/*— Elements classes —*/
.DESview{ display: none; }
.rrss{ width:30px; margin: calc(var(--unit) * 1) calc(var(--unit) * 1); }
.wL2R,.wR2L{ display: flex; flex-wrap: wrap; }
.wL2R{ flex-direction: row; }
.wR2L{ flex-direction: row-reverse; }
/*— Custom considerations —*/
section:nth-child(1){ z-index: 1; }
header section:nth-child(2){ margin-top: calc(var(--unit) * -16); }
/*— columns —*/
.cols-40-60 > *,.cols-60-40 > *,
.cols-50-50 > *{ width: 100%; }

/*— Media queries —*/
@media (min-width: 801px) {
  main { max-width: 1000px; } .DESview{ display: flex; } .MOBview{ display: none; }
  .cols-50-50 > *{ max-width: 50%; }
  .cols-60-40 > *:nth-child(1){ max-width: 60% }
  .cols-60-40 > *:nth-child(2){ max-width: 40%; }
  .cols-40-60 > *:nth-child(1){ max-width: 40%; }
  .cols-40-60 > *:nth-child(2){ max-width: 60%; }
  nav section{ justify-content: flex-end; }
  header section:nth-of-type(1){ padding-left: calc(var(--unit) * 6); }
  footer{padding: 0 calc(var(--unit) * 2); }
  article{ padding: 0 calc(var(--unit) * 5);}
}