/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@font-face {font-family: 'Bellota'; font-weight: 300; src: url("/assets/Bellota/Bellota-Light-7a4ed63e.ttf");}
@font-face {font-family: 'Bellota'; font-weight: 300; font-style: italic; src: url("/assets/Bellota/Bellota-LightItalic-54d62a90.ttf");}
@font-face {font-family: 'Bellota'; font-weight: 400; src: url("/assets/Bellota/Bellota-Regular-845deacc.ttf");}
@font-face {font-family: 'Bellota'; font-weight: 400; font-style: italic; src: url("/assets/Bellota/Bellota-Italic-ad4f9031.ttf");}
@font-face {font-family: 'Bellota'; font-weight: 700; src: url("/assets/Bellota/Bellota-Bold-d5c105f2.ttf");}
@font-face {font-family: 'Bellota'; font-weight: 700; font-style: italic; src: url("/assets/Bellota/Bellota-BoldItalic-595466e3.ttf");}

@font-face {font-family: 'Outfit'; src: url("/assets/Outfit/Outfit-VariableFont_wght-b61eadbf.ttf") format(opentype);}


:root {
  /* Primary & Secondary Colors */
  --p1: #8AB9C7;
  --p2: #FFBFB4;
  --s1: #F2E690;
  --s2: #EFD388;
  
  /* Dark Colors */
  --d0: #000000;
  --d1: #2B2B2B;
  --d2: #3A3A3A;
  --d3: #494949;

  /* Neutral */
  --n1: #888888;

  /* Light Colors */
  --l0: #ffffff;
  --l1: #F5F5F5;
  --l2: #E6E6E6;
  --l3: #D7D7D7;

  /* Curve Amounts */
  --c1: 0.25rem;
  --c2: 0.50rem;
  --c3: 5rem;

  /* font-family: url("./app/fonts/Bellota"); */
  --outfit: 'Outfit', sans-serif;
  --bellota: 'Bellota';

  font-family: var(--outfit);
}

*, html {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

html {
  min-height: 100%;
} 

body {
  display: flex; flex-direction: column;
  height: 100vh;
}


nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 3rem;
    padding: 1rem 3rem;
    background-color: var(--l0);
    z-index: 99;
    box-shadow: 0 .1rem .2rem color-mix(in srgb, var(--d1) 10%, transparent);
}

#nav__left, #nav__right {
  display: flex;
  align-items: center;
  gap: 3rem;  
}

#nav__logo {
  height: 3rem;
}

nav a {
    font-family: var(--outfit);
    text-decoration: none; color: var(--d1);
    position: relative;    
    padding: .25rem 0;
    transition: .25s ease;
}
nav a:hover {color: var(--p1);}


nav a::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: .1rem; width: 0;
  transition: .25s ease;
  background-color: var(--p1);
}
nav a:hover::before {width: 100%;}

#nav__sign-out {
  height: 2rem;
  border: none;
  background-color: transparent;
  transition: .25s ease;
  cursor: pointer;
}

#nav__sign-out img {max-height: 100%;}


#nav__sign-out:hover{
  /* background-color: var(--s1); */
  color: var(--l0);
  filter: invert(.3);
}

#nav__toggle {
  align-items: center; justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: 100%;
  width: 2rem; height: 2rem;
  font-family: var(--outfit); line-height: 0rem;
  font-size: 3rem; font-weight: 300;
  position: relative;
  outline: 0px solid var(--s1); outline-offset:-1rem;
  transition: .5s ease;
  cursor: pointer;
  display: none;
  z-index: 90;
}

#nav__toggle img {
  height: 100%;
  position: absolute;
  transition: .3s ease;
}

#nav__window {
}

.open #nav__toggle {transform: rotate(360deg); outline-width: 120vh;}

#nav__toggle #nav__toggle_ham {opacity: 1;}
.open #nav__toggle #nav__toggle_ham {opacity: 0;}
#nav__toggle #nav__toggle_x {opacity: 0;}
.open #nav__toggle #nav__toggle_x {opacity: 1;}

#nav__window_container {
  position: absolute;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  display: none; transform: translateX(100vw);
  left: 0; right: 0; top: 4rem;
  height: calc(100vh - 8rem);
  z-index: 99;
  gap: 2rem;
}

#nav__window_container a {
  font-size: 1.5rem;
}

.open #nav__window_container {
  display: flex; transform: translateX(0);
}

/* General */

.sidebar {
    position: relative;
    top: 0; left: 0;
    width: 25rem;
    height: 100%;
    background-color: var(--l0);

    display: flex; flex-direction: column;
    justify-content: flex-end;

    font-family: var(--outfit);
    box-shadow: .1rem 0 .2rem color-mix(in srgb, var(--d1) 10%, transparent);
}

.sidenav {
  z-index: 80;
  position: relative;
  justify-content: flex-start;
  width: 20rem;
  padding: 0; gap: 0;
}

.sidenav * {
  padding: 1rem;
}

.sidenav a {
  width: 100%;
  /* height: 2rem; */
  /* background-color: red; */
}

.sidenav a:hover {color: var(--p1);}

.sidenav a::before {
  height: 100%;
  z-index: -1;
  background-color: var(--l1);
}

main {
  display: flex; flex-direction: row;
  height: 100%;
  flex-grow: 1;
}

/* - - - General Components - - - */

.flex-row {display: flex; flex-direction: row;}
.flex-col {display: flex; flex-direction: column;}

.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}
.align-center {align-items: center;}

.justify-center {justify-content: center;}
.justify-space-between {justify-content: space-between;}

.flex-grow {flex-grow: 1;}

.w100 {width: 100%;}
.w100vw {width: 100vw;}
.h100 {height: 100%;} 
.h100vh {height: 100vh;}

h1 {font-size: 4.5rem; font-weight: 900;}
h2 {font-size: 3.5rem; font-weight: 800;}
h3 {font-size: 3rem; font-weight: 700;}
h4 {font-size: 2.5rem; font-weight: 700;}
h5 {font-size: 1.75rem; font-weight: 500;}
h6 {font-size: 1.25rem; font-weight: 500;}


h1, h2, h3, h4, h5, h6 {margin-bottom: 0.5rem;}

@media (max-width: 100ch) {
  h1 {font-size: 3.5rem; font-weight: 900;}
  h2 {font-size: 3rem; font-weight: 800;}
  h3 {font-size: 2.5rem; font-weight: 700;}
  h4 {font-size: 2rem; font-weight: 700;}
  h5 {font-size: 1.5rem; font-weight: 500;}
  h6 {font-size: 1rem; font-weight: 500;}
}

.t200 {font-weight: 200;}
.t300 {font-weight: 300;}


a {
  transition: .25s ease;
  /* align-self: flex-end; */
  color: var(--d2);
}

a:hover {
  color: var(--p1);
}

form {
  display: flex; flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.form-container {
  width: 60%; min-width: 480px; max-width: 45rem;
  align-items: center; justify-content: center;
  gap: 3rem;
  background-color: var(--l0);
  padding: 2rem 4rem;
  font-family: 'Outfit';
  flex: 1;
}

label {
  color: var(--d1);
}

/* - - - Special Components - - - */

.special-button {
  background: linear-gradient(45deg, var(--p1), var(--s1)); background-color: var(--p1);
  border-radius: var(--c2); border: none;
  outline: .15rem solid var(--d1); outline-offset: -.15rem;
  box-shadow: -.3rem .3rem 0 var(--d1);
  color: var(--d1);
  cursor: pointer;
  font-family: var(--outfit); font-size: 1.5rem; font-weight: 800;
  transition: .25s all ease;
  padding: 1rem 2rem;
  text-decoration: none;
  width: fit-content;
}


.special-button:hover, .special-button:focus {
  box-shadow: -.15rem .15rem 0 var(--d1);
  transform: translate(-.15rem, .15rem);
  color: var(--d1);
}

.special-button:active {
  box-shadow: 0 0 0 var(--d1);
  transform: translate(-.3rem, .3rem);
}

form .special-button {
  align-self: flex-end;
}

nav .special-button {
  padding: 1rem;
  font-size: 1rem;
}

nav .special-button::before {display: none;}

.transparent {
  background-color: transparent;
  background: transparent;
}

.back-button {
  position: absolute;
  top: 1rem; left: 1rem;
  /* background-color: var(--l1); */
  width: 2.5rem; height: 2.5rem;
  border-radius: 100%; 
  display: flex; align-items: center; justify-content: center;
  font-family: var(--outfit); font-weight: 600; font-size: 1.25rem;
  /* text-decoration: none;
  color: var(--d1);
  overflow: hidden; 
  z-index: 70;
  outline: 1px solid var(--d1); */
  padding: 0;
}

/* .back-button:hover {
  color: var(--l1);
  outline-offset: -.2rem;
  outline-color: var(--l0);
} */

/* .back-button::before {
  content: '';
  position: absolute;
  height: 0%; width: 0%;
  background: linear-gradient(45deg, var(--p1), var(--s1)); background-color: var(--p1);;
  transition: .25s ease;
  border-radius: 100%;
  z-index: -1;
}

.back-button:hover::before {
  width: 100%; height: 100%;
} */


@media (max-width: 100ch) {

  #nav__left, #nav__right {display: none;}
  #nav__toggle {display: flex}

  .form-container {
    min-width: 0; max-width: unset;
    min-height: 100vh;
    width: 100%;
    padding: 4rem 2rem;
  }
  form {
    gap: 1rem;
  }
}