/* MyCellPhone = 410-412px (let's say 410px) */
:root{
  --bg-color: black;
  --tx-color: rgb(128, 0, 128);
  --thumbColor: purple;
  --color-9: rgba(128, 0, 128, .9);
  --color-8: rgba(128, 0, 128, .8);
  --color-7: rgba(128, 0, 128, .7);
  --color-6: rgba(128, 0, 128, .6);
  --color-5: rgba(128, 0, 128, .5);
  --color-4: rgba(128, 0, 128, .4);
  --color-3: rgba(128, 0, 128, .3);
  --color-2: rgba(128, 0, 128, .2);
  --color-1: rgba(128, 0, 128, .1);
}
*{
  box-sizing: border-box;
}
input:focus, textarea:focus, select:focus{
  outline: 1px solid rgba(255, 255, 255, .5);
}
.cossin{
  position: absolute; 
  /* top:0; */
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0;
  border: 0;
}
body{
  background: var(--bg-color);
  color: var(--tx-color);
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  min-height: calc(100% - 16px);
  /* transition: background-color .5s ease-in-out, color .5s ease-in-out; */
}
.mainContainer{
  /* height: calc(100vh - 16px);
  width: calc(100vw - 16px); */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
/* h1 font-size: 36 - 38*/
h1, .h1like{
  font-family: 'Indie Flower', cursive;
  font-size: calc(35.06px + 0.38vw);
}
h1:first-letter, .h1like:first-letter {
font-size: calc(45.06px + 0.38vw);
}
/* h2 font-size: 26 - 28*/
h2, .h2like{
  font-family: 'Rubik Dirt', cursive;
  font-size: calc(25.53px + 0.19vw);
  line-height:1.2em;
  margin: 1.6em 0 .9em;
  font-weight: 400;
}
/* h3 font-size: 20 - 22*/
h3, .h3like{
  font-family: 'Nunito', sans-serif;
  font-size: calc(19.53px + 0.19vw);
  font-weight: 800;
  line-height:1.4em;
  margin: 1.6em 0 .9em;
}
/* p font-size: 16 - 18*/
p, .plike{
  font-family: 'Nunito', sans-serif;
  font-size: calc(15.53px + 0.19vw);
  font-weight: 600;
  line-height:1.2em;
  margin: .6em 0 1em;
}
a{
  color:rgba(255,255,0,.5);
}
a:hover{
  cursor: pointer;
  color:rgba(255,255,0,.8);
}
/*label font-size: 16 - 20*/
label, .label{
  font-family: 'Nunito', sans-serif;
  font-size: calc(15.06px + 0.38vw);
  font-weight: 700;
}
*{font-family: 'Nunito', sans-serif;
}
.home{text-align: center;}
.bottomButtons{
  position: fixed;
  bottom: 2px;
  right: 2px;
  display: flex;
  flex-direction: row-reverse;
}
.bottomButton{
  border-width: 1px 3px 4px 1px;
  border-style: solid;
  border-color: inherit;
  border-radius: 5px;
  padding: 3px;
  background: var(--bg-color);
  color: var(--tx-color);
  line-height:1;
  text-align: center;
  font-size: calc(15.06px + 0.38vw);
  opacity: .65;
}
.bottomButton:hover{
  background-color: var(--color-2);
}
.backHome, .backTop{
  display: none;
}
.backHome{
  margin-left: 4px;
}
.chevronTop{
  display: inline-block;
  transform: rotate(270deg);
}
#site-header{
  height: fit-content; 
  width: 100%;
}
footer#site-footer{
  width: 100%;
  margin: 0;
  /*position: absolute;
  bottom: 0;
  left: 0;
  right: 0;*/
}
footer#site-footer > hr{
  margin: 50px -8px 0;
  border-color: var(--tx-color);
}
footer#site-footer > div{
  background:var(--color-2);
  padding: 10px;
  margin: 0 -8px -8px;
  text-align: center;
}
footer#site-footer > div > h5{
  margin: 0;
}
@media (max-width: 495px) {
  footer#site-footer > div{
    padding: 10px 10px 38px;
  }
}
.wrapper *{
  margin:0;
}
.wrapper{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.wrapper h6{
  line-height: 1em;
  padding: 0 5px 5px;
}


#color-picker {
  appearance: none;
  background: linear-gradient(to right, red, orange, yellow, green, teal, cyan, blue, purple, violet, pink, #f2f3f4);
  border-radius: 50px;
  border: 1.5px solid black;
  opacity: .8;
  margin-bottom: 5px;
}

#color-picker::-moz-range-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 20px;
  border: 4px solid #F2F3F4;
  outline: solid 1px black;
  outline-offset: -4px;
  background-color: var(--thumbColor);
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}

#color-picker::-webkit-slider-thumb {
  appearance: none; 
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 20px;
  border: 4px solid #F2F3F4;
  outline: solid 1px black;
  outline-offset: -4px;
  background-color: var(--thumbColor);
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
#switchSliderWhole{
  display: flex;
  width: 100%;
  margin: auto;
  padding: 5px;
  height: fit-content;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
}
#switchModeSlider{
  width:45px;
  height: 22px;
  padding: 0.5px;
  border-radius: 50px; 
  border:1.5px solid; 
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
#switchModeBall{ 
  height: 18px; 
  width: 18px; 
  margin: 0 1px 0 .5px;
  border-radius: 50%; 
  background: var(--tx-color); 
  z-index: 10;
  position: absolute; 
  right: 0;
}
#switchModeBallUnder{
  height: 18px; 
  width: 18px; 
  margin: 0 1px 0 .5px;
  border-radius: 50%; 
  background:var(--bg-color); 
  z-index: 1;
  position: absolute; 
  right: 0;
}
.ballDark{
  left: 0;
}
#switchModeDark{
  opacity: .7;
  margin: 0 4px 0 0;
  font-size: 21px;
  line-height: .95;
  transform: rotate(180deg);
}
#switchModeLight{
  opacity: .7;
  margin: 0 0 1px;
  font-size: 19px;
  line-height: 1;
}
.yesCasaFoot{
  display: block;
}
.displayNone{
  display: none!important;
}