* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


:root {
  --main-bg-color: rgb(255, 249, 247); 
  --this-color: rgb(255, 239, 114);
  --is-color: rgba(99, 153, 255, 0.93); 
  --dot-art-color: rgba(255, 87, 87, 0.96); 
  --main-color: rgb(54, 48, 49); 
  
  /* CSS 2021 */
--pale-spring-bud: hsla(61, 21%, 84%, 1);
--sky-blue: hsla(198, 43%, 91%, 1);
--myrtle-green: hsla(179, 59%, 45%, 1);
--orange-soda: hsla(12, 72%, 94%, 1);
--taupe-gray: hsla(319, 11%, 57%, 1);
  
  
}


/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
  line-height: 1em;
  background-color: var(--main-bg-color);
  color: var(--main-color);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: 'Spartan', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
  color: #34495e;
}


.is-center {
  text-align: center;
}

.back {
  width: 100vw;
  height: 100vh;
}


.this {
  position: absolute;
  color: var(--this-color);
  top: 25vh;
  left: -12vw;
  font-size: 40vw;
  z-index: 412;
}

.is {
  position: absolute;
  color: var(--is-color);
  top: 19vh;
  right: -10vw;
  font-size: 120vw;
  transform: rotate(-42deg);
  z-index: 410;
}

.art {
  position: absolute;
  color: var(--dot-art-color);
  bottom: 20vh;
  font-size: 40vw;
  z-index: 420;
}