:root {
  --color: transparent;
  --light: none;
  --dark: none;
  --shadow: none;
  --txt_shadow: none;
  font-family: sans-serif;
}


body {  
  border: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}

h1{
  text-transform: uppercase;
}

#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--light);
  background: #fff;
  overflow: hidden;
  color: var(--dark);
}

.txt {
  position: absolute;
  left: 50%;
  top: 25vh;
  transform: translate(-50%, -0%);
  font-weight: bold;
  font-size: 40vmin;
  text-shadow: 0 0 3vmin var(--txt_shadow);
  color: var(--color);
  text-transform: uppercase;
  white-space: nowrap;
  height: 50vh;
  line-height: 50vh;
  transition: 0.5s all cubic-bezier(.87, -.41, .19, 1.44);
}

.txt::selection {
  background: var(--color);
}


.menu {
  position: fixed;
  bottom: -50vh;
  left: 0;

  width: 100vw;
  height: 50vh;
  /*width: 90vw;
    height: 25vh;*/
  text-align: center;
  line-height: 5vmin;
  font-weight: bold;
  font-size: 3vmin;

  color: var(--dark);
  transition: 0.5s all cubic-bezier(.87, -.41, .19, 1.44);
  background: var(--color);
  display: flex;
}


#nav1,
#nav2 {
  height: 5vh;
  width: 50%;
  line-height: 5vh;
  text-align: center;
  cursor: pointer;
}

#nav2 {
  box-shadow: inset .5vh -.5vh 1vh 0vh var(--shadow);
}


#menu1,
#menu2 {
  display: none;
}

#colerSelBoxes {
  position: absolute;
  top: 10vh;
  left: 5vw;
  width: 40vw;
  height: calc(30vh - 5vmin);
  background: var(--dark);
}

#copy_btn,
#share_btn {
  position: absolute;
  right: 7vmin;
  top: 10vmin;
  top: calc(5vh + 3vmin);
  width: 7vmin;
  height: 7vmin;
  border-radius: 5vmin;
  margin: 0;
  padding: 0;
  border: none;
}

#share_btn {
  /*top: calc(50vh - 42vmin);;*/
  top: 25vmin;
  top: calc(5vh + 17vmin);
}

#copy,
#share {
  position: absolute;
  top: 0;
  left: 0;
  width: 7vmin;
  height: 7vmin;
  border-radius: 5vmin;
  box-shadow: 0 0 1vmin 0vmin var(--txt_shadow);
  line-height: 5vmin;
  font-weight: bold;
  font-size: 3vmin;
  color: var(--dark);
  cursor: pointer;
  background: var(--light);
}

#serif,
#sansserif,
#select,
#no_select {
  text-align: center;
  line-height: 4vmin;
  font-weight: bold;
  font-size: 2vmin;
  font-family: inherit;
  text-transform: uppercase;
  width: 25vw;
  margin-left: 2vw;
  margin-right: 2vw;
  box-shadow: 0 0 1vmin 0vmin var(--txt_shadow);
  cursor: pointer;
  /* background: #339;*/
  color: var(--dark);
}

#sansserif,
#select {
  border: 1px solid var(--dark);
}

#text_field,
#color_field,
#font_field {
  position: absolute;
  top: calc(5vh + 3vmin);
  left: 7vmin;
  width: 75vw;
  width: calc(100vw - 28vmin);
  height: 6vh;
  padding: 0;
  margin: 0;
  border: none;
  /*background: #39a;*/
}

#color_field {
  top: calc(12vh + 3vmin);
  height: 12vh;
}

#text_field {
  top: calc(25vh + 3vmin);
  height: 12vh;
}

label {
  position: absolute;
  top: 5vmin;
  text-align: center;
  white-space: nowrap;
  font-size: 2vmin;
  transform: translate(-50%, 50%);
}

#text_inp,
#color_inp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  height: 80%;
  text-align: center;
  line-height: 12vh;
  font-weight: bold;
  font-size: 6vh;
  font-family: inherit;
  text-transform: uppercase;
  background: none;
  border: 0;
  color: var(--dark);
  border: none;
  /*border-bottom: 1px solid var(--dark);*/
}


/* About Text */
#about_txt {
  position: absolute;
  left: 5vw;
  top: 5vh;
  height: 40vh;
  height: calc(45vh - 7vmin);
  width: 75vw;
  width: calc(95vw - 21vmin);
  text-align: left;
  /*background: #39a;*/
}

#about_title {
  position: absolute;
  top: 5vh;
}

#about_p {
  position: absolute;
  top: 15vh;
  overflow-y: auto;
  height: calc(30vh - 7vmin);
  width: 75vw;
  width: calc(95vw - 21vmin);

  /* background: var(--light); */
}

#opcls {
  position: fixed;
  right: 7vmin;
  bottom: 7vmin;
  /*top: calc(100vh - 14vmin);*/
  width: 7vmin;
  height: 7vmin;
  border-radius: 5vmin;
  box-shadow: 0 0 1vmin 0vmin var(--txt_shadow);
  line-height: 5vmin;
  font-weight: bold;
  font-size: 3vmin;
  color: var(--dark);
  cursor: pointer;
  background: var(--light);
  font-family: inherit;
}


/*//////////////////////////////////////////////
States
//////////////////////////////////////////////*/
.btn:hover,
#opcls:hover {
  box-shadow: 0 0 5vmin 0vmin var(--txt_shadow);
}





/*//////////////////////////////////////////////
Prevent tha deafults
//////////////////////////////////////////////*/
/*prevent defaults*/
button,
p {
  display: inline-block;
  border: none;
  margin: 0;
  text-decoration: none;
  padding: 0;
  background: none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input {
  padding: 0;
}

input:focus {
  outline: none;
}

button:focus {
  outline: none;
  color: var(--dark);
}

textarea:focus {
  outline: none;
}

select:focus {
  color: var(--color);
}

a,
a:link,
a:visited {
  color: var(--color);
  text-decoration: none;
}



/*desktop shizzle*/
@media only screen and (min-width: 1000px) {

  #serif,
  #sansserif,
  #select,
  #no_select {
    width: 12.5vw;

  }

}