@import url(https://fonts.bunny.net/css?family=limelight:400);

[data-theme="light"] {
  --back-color: #FFFFFF;
  --neutral: #DFE0DF;
  --primary-1: #E0AB4B;
  --primary-2: #C16A22;
  --primary-3: #B2611F;
  --secondary-1-60: rgba(222,217,207,.6);
  --secondary-1: #DED9CF;
  --secondary-2: #C9A994;
  --secondary-3: #AA776A;
  --secondary-4: #6D2D1B;
  --secondary-5: #411E00;
  --brand-name: var(--secondary-4);
  --label-color: var(--primary-3);
  --accent-1: #009E8C;
  --accent-2: #005B4B;
  --error: #f02a0f;

  --theme: "light";
}

[data-theme="dark"] {
  --back-color: #25201A;
  --neutral: #DFE0DF;
  --primary-1: #9b6502;
  --primary-2: #612e05;
  --primary-3: #E0AB4B;
  --secondary-1-60: rgba(65,30,0,.6);
  --secondary-1: #3A352F;
  --secondary-2: #895B09;
  --secondary-3: #66625D;
  --secondary-4: #CAC5BB;
  --secondary-5: #CAC5BB;
  --brand-name: var(--primary-3);
  --label-color: var(--secondary-4);
  --accent-1: #037963;
  --accent-2: #009E8C;
  --error: #be1a04;

  --theme: "dark";
}

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

html {
  font-family: sans-serif;
  font-size: 16px;
}

/* NORMALIZE */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15; /* For all browsers */
  -webkit-text-size-adjust: 100%; /* iOS adjusts font size */
}

button,
input {
  font-family: inherit; /* For all browsers */
  font-size: 100%; /* For all browsers */
  line-height: 1.15; /* For all browsers */
  margin: 0; /* Firefox and Safari have margin */
  overflow: visible; /* Edge hides overflow */
}

button {
  text-transform: none; /* Firefox inherits text-transform */
  -webkit-appearance: button; /* Safari otherwise prevents some styles */
}

button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* IE10 */
  padding: 0; /* IE10 adds padding */
}

/*END NORMALIZE*/

body {
  height: 100vh;

  background: var(--primary-1);
  background: -moz-linear-gradient(top, var(--primary-1) 0%, var(--primary-1) 25%, var(--primary-2) 100%);
  background: -webkit-linear-gradient(top, var(--primary-1) 0%, var(--primary-1) 25%, var(--primary-2) 100%);
  background: linear-gradient(to bottom, var(--primary-1) 0%, var(--primary-1) 25%, var(--primary-2) 100%);
}

.theme-toggle {
  position: absolute;
  z-index: 1;
  top: 1rem;
  right: 1.7vw;

  color: var(--brand-name);
}

.main-container {
  display: flex;
  justify-content: space-between;

  margin: 0 5vw 0 2vw;
  
  background-color: var(--back-color);
}

.content-container {
  display: flex;
  flex-direction: column;
  align-self: center;
  flex: auto;
  gap: 2rem;

  margin: 0 min(1rem, 1vw);
}

.welcome-container {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 1.5rem;
  
  min-width: min(800px, 100%);

  font-size: 1.5rem;
  color: var(--secondary-4);
}

.welcome-container>h3 {
  font-size: 2.5rem;
  color: var(--primary-3);
}

.form-container {
  align-self: center;

  width: min(740px, 100%);

  color: var(--secondary-4);
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;

  max-width: 740px;
}

.form-field {
  position: relative;
}

.form-warning {
  margin-top: 0.5rem;
  margin-left: 1.2rem;

  transition: opacity 0.1s ease-in;

  color: var(--error);
}

.form-hint {
  position: absolute;
  top: 3rem;
  left: 1.2rem;

  transition: opacity 0.1s ease-in;

  color: var(--secondary-4);
}

.form-field>input {
  transition: all .3s;

  outline: none;
  border: 2px solid var(--secondary-3);
  border-radius: 8px;
  -webkit-border-radius: 8px;

  width:100%; 
  height: 2.5rem;
  padding: 0.75rem 1rem;

  background-color: var(--back-color);

  font-size: 1rem;
  color: var(--secondary-5);
}

.form-field>input:focus {
  border-color: var(--accent-2);
}

.form-field>input:required:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--error);
}

.form-field>label {
  position: absolute;
  z-index: 1;
  top: 0.7rem;
  left: 0.6rem;

  transition: all 0.2s ease-in;

  padding: 0 0.2rem;

  background-color: var(--back-color);
  cursor: text;

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

.form-field>input:focus + label,
.form-field>input:not(:placeholder-shown):not(:focus) + label {
  top: -0.6rem;

  font-size: 0.9rem;
}

.form-field>input::placeholder {
  opacity: 0;

  transition: all 0.2s ease-in;

  color: var(--secondary-1);
}

.form-field>input:focus::placeholder {
  opacity: 1;

  animation-delay: 0.2s;
}


.form-field>input:focus + label {
  color: var(--accent-2);
}

.form-field>input:required:invalid:not(:placeholder-shown):not(:focus) + label {
  color: var(--error);
}

.password-eye {
  position: absolute;
  top: 0.5rem;
  right: 0.65rem;

  visibility: hidden;

  transition: opacity 0.1s ease-in;

  cursor: pointer;
}

.form-field>input:focus~.password-eye,
.form-field>input:not(:placeholder-shown):not(:focus)~.password-eye {
  visibility: visible;
}

.invisible {
  opacity: 0 !important;
}

.tos-container {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;

  margin-top: 0.8rem;
  margin-bottom: 1rem;

  grid-column: 1 / span 2;

  font-size: 1rem;
}

.signin-container {
  margin-top: 1.75rem;

  font-size: 1.125rem;
}

.button {
  border: 0;
  border-radius: 0.25rem;
  background-color: var(--accent-1);
  border-radius: 8px;

  max-width: 75%;
  padding: 1rem 2rem;

  cursor: pointer;

  font-size: 1.25rem;
  line-height: 1.2;
  font-family: -system-ui, sans-serif;
  white-space: nowrap;
  text-decoration: none;
  color: var(--neutral);
}

.button:hover {
  background-color: var(--accent-2);
}

.image-container {
  position: relative;

  width: 79.49vh;
  height: 100vh;

  background: url(./hero-image.webp) center/cover no-repeat;
}

[data-theme="dark"] .image-container {
  opacity: 0.8;
}

.brand-name-container {
  position: absolute;
  top: 8%;

  width: 100%;
  padding: 0.9em 0.4em 0.7em 0.4em;

  background-color: var(--secondary-1-60);

  font-size: clamp(24px, 5vw, 48px);
  font-family: 'Limelight';
  text-align: center;
  color: var(--brand-name);
}

.copyright {
  position: absolute;
  bottom: 0px;

  width: 100%;
  padding-top: 2px;

  background-color: var(--secondary-3);

  text-align: center;
  color: var(--secondary-5);
}

span.pseudo-link {
  cursor: pointer;

  text-decoration: underline;
  color: var(--accent-1);
}

span.pseudo-link:hover {
  color: var(--accent-2);
}

/* remove OG checkbox */
[type="checkbox"] {
    position: absolute;
    left: -9999px;
}

/* position label */
[type="checkbox"] + label {
    position: relative;

    display: inline-block;

    padding-top: 0.2rem;
    padding-left: 2rem;

    cursor: pointer;

    font-size: 1rem;
}

/* new checkbox */
[type="checkbox"] + label:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px; 

    border: 2px solid var(--secondary-2);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
    border-radius: 4px;
    width: 1.5rem; 
    height: 1.5rem;

    background: transparent;
}

/* check mark*/
[type="checkbox"] + label:after {
    content: '✔';
    position: absolute;
    top: 0px; 
    left: 0.4rem;

    transition: all 0.3;

    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--accent-2);
}

[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

[type="checkbox"]:focus + label:before {
    border: 2px solid var(--accent-2);
}

label:hover:before {
    border: 2px solid var(--accent-1)!important;
    
    background: transparent;
}