:root{

    --clr-primary-900: #020636;
    --clr-primary-800: #042846;
    --clr-primary-700: #262D7D;
    --clr-primary-100: #ffffff;

    --clr-accent-900: #AF031C;
    --clr-accent-800: #FB2846;
    --clr-accent-700: #FD5F49;
    --clr-accent-200: #04D7B9;
    --clr-accent-100: #02FFDB;

    --fw-bold: 700;
    --fw-med: 500;
    --fw-reg: 400;
    --fw-light: 300;

    --fs-100: .75rem;
    --fs-200: .875rem;
    --fs-300: 1.125rem;
    --fs-400: 1.375rem;
    --fs-500: 1.75rem;
    --fs-600: 2rem;
    --fs-650: 2.5rem;
    --fs-700: 3rem;
    --fs-900: 5rem;

    --fs-body: var(--fs-400);
    --fs-headline: var(--fs-700);
    --fs-headlineEyebrow: var(--fs-300);
    --fs-logotype: var(--fs-900);

    --ff-header: 'Want Coffee', sans-serif;
    --ff-standard: 'Poppins', sans-serif;

    --clr-body: var(--clr-primary-800);
    --clr-bg: var(--clr-primary-100);
    --clr-btn: var(--clr-accent-800);
    --clr-btn-hover: var(--clr-accent-900);

    --transition-time: .5s;

    --background-pattern: url('imgs/BG_Pattern5_w.png');
    --background-pattern-opposite: url('imgs/BG_Pattern5.png');

    --border-top: url('imgs/Border_Top_w.png');
    --border-bot: url('imgs/Border_Bot_w.png');

    --logomark: url('imgs/Logomark.svg');
    --logomark-mini: url('imgs/Logomark_dark.svg');

    --logomark-width: 25vw;
    --logomark-height: 10vw;

    --logomark-mini-width: 200px;
    --logomark-mini-height: 80px;

    --underline: url('imgs/underline_teal.svg');

}

[data-theme="dark"] {
    --clr-body: var(--clr-primary-100);
    --clr-bg:var(--clr-primary-900);
    --clr-btn: var(--clr-accent-200);
    --clr-btn-hover: var(--clr-accent-100);

    --background-pattern: url('imgs/BG_Pattern5.png');
    --background-pattern-opposite: url('imgs/BG_Pattern5_w.png');

    --logomark: url('imgs/Logomark_dark.svg');
    --logomark-mini: url('imgs/Logomark.svg');

    --underline: url('imgs/underline_red.svg');

    --border-top: url('imgs/Border_Top.png');
    --border-bot: url('imgs/Border_Bot.png');

}



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

* {
    margin:0;
    padding:0;
    font: inherit;
}

html:focus-within {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    font-family: var(--ff-standard);
    color: var(--clr-body);
    background-color: var(--clr-bg);
    font-size: var(--fs-body);

    transition: var(--transition-time);
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    max-inline-size: 75ch;
    text-align: center;
}

p {
    line-height:175%; 
    font-weight: var(--fw-light);
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
     scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
}


section {
    display:grid;
    place-items: center;
    margin: 52px 0;
    padding: 52px 0;
}

footer{
    display:grid;
    place-items: center;
    background: var(--clr-primary-700) url('imgs/BG_Pattern5_w.png') space;
    color: var(--clr-accent-100);
}

footer:before {
    content: "";
    display: block;
    position:relative;
    background-image: var(--border-bot);
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
    top: -3px;

   
    transition: var(--transition-time);
}


footer > .main-footer {
    position: relative;
    top:-2rem;
}

.hero {
    margin-top: 0px;
}

.thanks {
    margin: 0;
    padding: 50px 0;
}

.content{
    display:grid;
    place-items:center;
    width: 1000px;
}

.flex-container{
    display:flex;
    flex-direction: row;
    max-width: 800px;
    justify-content: space-evenly;
    gap: 1em;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-spacebetween {
    justify-content: space-between;
}

.solution-item{
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-basis: 100%;
    min-width: 250px;
    flex: 2;
    gap: .5em;
}

.solution {
    position:relative;
    text-transform: uppercase;
    font-weight: var(--fw-med);
    font-size: var(--fs-300);
}

input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: var(--form-background);
    /* Not removed via appearance */
    margin: 0;
  
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 2px solid var(--clr-accent-900);
    border-radius: 50em;
    transform: translateY(0.075em);

  
    display: grid;
    place-content: center;
  }
  
  input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--clr-accent-800);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
  }
  
  input[type="checkbox"]:checked::before {
    transform: scale(1.5);
  }

.logomark {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--logomark-width);
    height:var(--logomark-height);

    background-image: var(--logomark);
    background-repeat: no-repeat;
    background-size: cover;

    z-index: 1000;

}

.logomark-mini{
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--logomark-mini-width);
    height: var(--logomark-mini-height);
    
    background-image: var(--logomark-mini);
    background-repeat: no-repeat;
    background-size: cover;
}


.opposite-bg{
    color:var(--clr-bg);
    background: var(--clr-body) var(--background-pattern) repeat;
    


    transition: var(--transition-time);
}

.opposite-bg::before {
    content: "";
    display: block;
    position:relative;
    background-image: var(--border-bot);
    background-repeat: no-repeat;
    top:-53px;
    width: 100%;
    height:50px;
    z-index:100;
    transition: var(--transition-time);

}

.opposite-bg::after{
    content: "";
    display: block;
    position:relative;
    background-image: var(--border-top);
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
    bottom: -53px;
    z-index:100;
    transition: var(--transition-time);

}


.headline-hero {
    display: flex;
    font-family: var(--ff-header);
    font-size: var(--fs-logotype);

}

.outline {
    color:var(--clr-bg);
	text-shadow: -1px 1px 0 var(--clr-body),
				  1px 1px 0 var(--clr-body),
				 1px -1px 0 var(--clr-body),
				-1px -1px 0 var(--clr-body);

}

.underline {
    position: relative;
}

.underline:after {
    content: "";
    display: block;
    width: 100%;
    height: 25px;
    scale: 1.2;
    position: absolute;
    left: 15px;
    bottom: -20px;
    z-index: -1;
    background-image: var(--underline);
    background-repeat: no-repeat;
    transform: rotate(-1deg);

}

.pointy {
    position: relative;
}

.pointy:before {
    content: "";
    display: block;
    width: 55%;
    scale: 1.2;
    height: 100px;
    position: absolute;
    left: 0;
    top: -9.8vh;
    z-index: 1000;
    background-image: url('imgs/Pointy_red.svg');
    background-repeat: no-repeat;
    background-position: right;
    transform: rotate(-1deg);
}






.pupil-w {
    width: 5vw;
}

.left-eye {
    position: relative;

}
.left-eye:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-position-x: center;
    z-index: 3;
    background-image: url('imgs/LogoPiece_Eye.png');
    background-repeat: no-repeat;
    opacity: 7%;
}


.headline-eyebrow {
    font-size: var(--fs-headlineEyebrow);
    font-weight: var(--fw-med);
    letter-spacing: .20rem;
    text-transform: uppercase;
}


.headline {
    display:grid;
    justify-content: center;
    font-family: var(--ff-header);
    font-size: var(--fs-700);
    padding: 0 1em;
    line-height: 1.2;
    letter-spacing: .1rem;
}

.headline-mid {
    font-size: var(--fs-650);
}

.headline-bg {
    color: var(--clr-bg);
    background-color: var(--clr-body);
    clip-path: polygon(0 5%, 95% 0, 100% 95%, 5% 100%);
    -webkit-clip-path: polygon(0 5%, 95% 0, 100% 95%, 5% 100%);
}

.subheader {
    color: var(--clr-accent-800);
    text-transform: uppercase;
    font-size:var(--fs-700);
}

/* Marquee Hero */

.marquee {
    --gap: 1rem;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    width: 100%;
    gap: var(--gap);
    transform: rotate(-3deg);
}

.marquee-reverse {
    margin-bottom: -3rem;
}

.headline-hero {
    flex-shrink: 0;
    display: flex;
    gap: var(--gap);
}

.marquee-reverse .headline-hero > *{
    animation-direction: reverse;
}

.headline-hero > *{
    flex: 0 0 auto;
    text-align: center;
    animation: scroll 10s linear infinite;
    
}

@keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

.headline-hero div{
    display: inline-block;
}


/* Buttons */
.btn-primary {
    display: inline-block;
    background-color: var(--clr-btn);
    color:var(--clr-bg);
    padding: 1rem 2.5rem;
    border:none;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    font-size: var(--fs-300);
    cursor: pointer;
    letter-spacing: .1rem;

}

.btn-primary:hover{
    background-color: var(--clr-btn-hover);
    transition: .5s;

}

.btn-secondary {
    background: rgba(0,0,0,0);
    color: var(--clr-btn);
    padding: 1rem 2rem;
    border:none;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    font-size: var(--fs-300);
    cursor: pointer;

 
}

.btn-secondary:hover{
    text-decoration: underline;
    color: var(--clr-btn-hover);
   
}



/* Popup */
.popup{
    position: fixed;
    top: 0px;
    display:grid;
    place-content: center;
    justify-items:center;
    z-index: 1000;
    text-align: left;
    width: 100%;
    height: 100vh;

    visibility: hidden;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

}


.popup-headline {
    background-color: var(--clr-btn);
    color: var(--clr-bg);
    width:100%;
    margin: 0 .5em;
    font-size: var(--fs-650);
    transform: rotate(-2deg);
    position: relative;
    top: 30px;

}

.popup-subheader {
    font-size:var(--fs-400);
    font-weight: var(--fw-med);
}

.popup-bg {
    background: var(--clr-bg) var(--background-pattern-opposite) repeat;
    padding: 2em;
    margin: .5em;
    width: 600px;
    border: 5px solid var(--clr-btn);
    border-radius: 10px;
    box-shadow: rgba(60, 66, 87, 0.12) 0px 0px 50px 100px, rgba(0, 0, 0, 0.12) 0px 0px 100px 200px;
}

.popup>p {text-align: left;}

.popup-btn-container {
    display:flex;
    justify-content: left;
    flex-wrap: wrap;

    width: 100%;
    gap: .25em;
    margin-top: 1em;
}

.popup-btn {
    padding: .5em 1em;
}

.form-item{
    margin: .5em 0;
}

.form-title{
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}

.form-input {
    border:none;
    border-radius: 3px;
    background-color: none;

    padding: .25em .5em;
    width: 100%;
    font-size: var(--fs-400);
    line-height: 1.25em;
    border:rgba(60, 66, 87, 0.12) 1px solid;
    box-shadow: rgba(60, 66, 87, 0.12) 0px 0px 1px 2px, rgba(0, 0, 0, 0.12) 0px 0px 1px 2px;
}

.form-input:hover {
    border:rgba(60, 66, 87, 0.12) 1px solid;
    box-shadow: var(--clr-accent-700) 0px 0px 1px 2px, var(--clr-accent-700) 0px 0px 1px 2px;
}


.form-input:focus{
    outline: none;
    border:rgba(60, 66, 87, 0.12) 1px solid;
    box-shadow: var(--clr-accent-800) 0px 0px 1px 2px, var(--clr-accent-800) 0px 0px 1px 2px;
    border-radius: 3px;
}

textarea {height: auto;}

.open-popup {
    visibility: visible;
}



/* Toggle switch */
.theme-switch-wrapper {
    position: fixed;
    top:0;
    right: .5em;
    display: flex;
    align-items: center;
    z-index: 1000;


}
.theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
    margin: 1em;
}
  
  .theme-switch input {
    display:none;
  }
  
  .slider {
    background-color: var(--clr-accent-800);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
  }
  
  .slider:before {
    background-color: var(--clr-bg);
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
  }
  
  input:checked + .slider {
    background-color: var(--clr-accent-200);
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .slider.eye {
    border-radius:12px;

  }
  .slider.eye:before {
    border-radius: 50%;
  }



.squiggle {
    animation: squiggly-anim 0.3s infinite;
}

@keyframes squiggly-anim {
    0% {
      -webkit-filter: url("#squiggly-0");
      filter: url("#squiggly-0");
    }
    25% {
      -webkit-filter: url("#squiggly-1");
      filter: url("#squiggly-1");
    }
    50% {
      -webkit-filter: url("#squiggly-2");
    }
    75% {
      -webkit-filter: url("#squiggly-3");
      filter: url("#squiggly-3");
    }
    100% {
      -webkit-filter: url("#squiggly-4");
      filter: url("#squiggly-4");
    }
}




.clr-accent-800{ color:var(--clr-accent-800); }
.clr-accent-700{ color:var(--clr-accent-700); }
.clr-primary-100{ color:var(--clr-primary-100); }

.fs-500 {font-size:var(--fs-500);}
.fs-300 {font-size:var(--fs-300);}
.fs-200 {font-size: var(--fs-200);}
.fs-100 {font-size: var(--fs-100)}

.fw-bold {font-weight: var(--fw-bold);}
.fw-med {font-weight: var(--fw-med);}
.fw-reg {font-weight: var(--fw-reg);}
.fw-light {font-weight: var(--fw-light);}

.ff-header{ font-family: var(--ff-header); }

.m-0 {margin: 0;}
.mb-1 {margin-bottom: 1rem;}
.mb-2 {margin-bottom: 2rem;}
.mb-3 {margin-bottom: 3rem;}
.mb-4 {margin-bottom: 4rem;}

.ls-3 {letter-spacing: .3rem;}



  


  @media only screen and (max-width: 1000px) {
    .content{
        width: 90vw;
    }

    .headline{
        font-size: var(--fs-600);
    }

    .logomark {
        width: calc(var(--logomark-width) + 25vw);
        height: calc(var(--logomark-height) + 10vw);
    }

    footer > * {
        top:-1rem;
    }

  }


  @media only screen and (max-width: 600px) {
    .theme-switch-wrapper {
        position: relative;
        display: flex;
        justify-content: right;
    }

    body {
        font-size: var(--fs-300);
    }

    section {
        margin: 0 0;
    }

    .flex-item {
        align-items: flex-start;
    }

    .popup-bg{
        width: 92vw;
    }

    .popup-subheader {
        font-size: var(--fs-300);
        font-weight: var(--fw-med);
    }

    .form-title{
        font-size: var(--fs-100);
    }

    .underline:after{
        scale:1;
        left: 5px;
    }
  }