html {
  min-height:100%;
}
body {
  
  font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
  text-shadow: 1px 1px 2px var(--light-mode-color-mix);
  margin:0px;

}

a {

  color: var(--light-mode-analogous-2);
  text-decoration-thickness: 1px !important;
  text-underline-offset: .1em;

}

a.active {

  color: var(--light-mode-analogous-1);

}

h1, h2, h3, h4, h5, h6 {
    font-size:1.5rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.1px;
    line-height: 1.125;
    margin-bottom: .25em;

}

h1 {

  font-size:3.5rem;
  font-family: "Segoe Print";
  
}

h2 {

  font-size:2rem;
  font-family: "Segoe UI";
  margin-left: .25em;

}

input,
button,
select {

  font-weight:700;
  padding:.5rem;
  padding-left:1rem;
  padding-right:1rem;
  border:2px rgba(0,0,0,.25) ridge;
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-small);
  font-size:1.25rem;

}

label {
  font-weight:700;
}

button {

  background-color: var(--light-mode-analogous-1);
  color:var(--light-mode-white);

}

p {
  margin-block-start: .5em;
  margin-block-end: .5em;
}

/**
Custom CSS
*/

.bg-gradient-one {

  
  /* transform: skew(15deg, 15deg); */
  z-index: -1;
  position:fixed;
  left:0px;
  right:0px;
/*   top:-100px;
  width:100%;
 */  height:300px;
  background: radial-gradient(at bottom left, var(--light-mode-base), var(--light-mode-analogous-1), var(--light-mode-analogous-2));

}

.bg-gradient-one svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10vw;
}

.home header {

  /* color:var(--light-mode-white);
  mix-blend-mode: overlay; */

}

.panel {

  min-width: 300px;

}

.panel > div {

  background:var(--light-mode-white);
  padding:.25em;
  border:var(--light-mode-analogous-1);
  border-radius: var(--border-radius-medium);
  overflow:auto;

}

.width-default {

  width:100%;
  max-width: var(--width-default);
}

.width-wide {

  width:100%;  
  max-width:var(--width-wide);

}

.width-full {

  width:100%;  

}

.padding-default {

  padding: var(--padding-default);

}

.padding-medium {

  padding: var(--padding-medium);

}

.padding-full {

  padding:var(--padding-full);

}

.launch-subscribe {

  max-width: var(--width-default);
  padding:1em;
  background:var(--light-mode-analogous-2);
  border:2px var(--light-mode-analogous-1) dashed;
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-medium);
  color:var(--light-mode-analogous-1);

}

.launch-subscribe form {
  gap:1em;
}

.success-text {

  font-weight:700;
  color:var(--light-mode-white);

}

.fail-text {

  font-weight:700;
  color:var(--light-mode-complementary);

}

.font-size-big {
  font-size: var(--font-size-big);
}


/**
End Custom CSS
*/

/**
Flex classes
**/

.flex-column {

  display:flex;
  flex-direction: column;
  gap:var(--gap-default);

}

.flex-row {

  display:flex;
  gap:var(--gap-default);
  flex-wrap: wrap;

}

.flex-grow-one {

  flex-grow: 1;

}

.justify-content-start {
  
  justify-content: flex-start;

}

.justify-content-center {
  
  justify-content: center;

}

.align-items-center {

  align-items: center;

}

/**
End flex classes
**/

/**
CSS Variables
*/
:root {

  --light-mode-base: #1ECBE1;
  --light-mode-complementary: #E1341E;
  --light-mode-monochromatic-1: #4BD5E7;
  --light-mode-analogous-1: #1E6AE1;
  --light-mode-analogous-2: #1EE196;
  --light-mode-triadic-1: #E11ECB;
  --light-mode-triadic-2: #CBE11E;
  --light-mode-tetradic-1: #961EE1;
  --light-mode-tetradic-2: #6AE11E;
  --light-mode-color-mix: color-mix(in srgb, currentColor 20%, transparent);
  --light-mode-white: #f8f8f8;

  --width-default: 645px;
  --width-wide:1340px;
  --width-full:100%;

  --padding-default:.5em;
  --padding-medium:1em;
  --padding-full:2em;

  --gap-default:1em;

  --border-radius-small: 5px 5px;
  --border-radius-medium: 10px 10px;
  --border-radius-large: 20px 20px;

  --box-shadow-small : 2px 2px 10px rgba(0,0,0,.25);
  --box-shadow-medium : 2px 2px 20px rgba(0,0,0,.5);

  --font-size-small: .75rem;
  --font-size-normal: 1rem;
  --font-size-big: 1.5rem;

}