svg {
    width: 100%;
    height: 100%;
    visibility: hidden;
    
   }
   
   #emoji{
    text-anchor:middle;
    padding:0;
    margin:0;
    user-select:none;
   }

   
.mybutton {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    display:inline-block;
    font-size: 5.7vw;
    /* margin: 0 0 15vw 0; */
}

button {
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  display:inline-block;
  font-size: 5.7vw;
  /* margin: 0 0 15vw 0; */
}

#box{
    border-radius: 25px;
    background: #ede99e;
    border-width: 5px;
    border-color: black;
    border-style: solid;
    border-radius: 2% 1% 3% 4% / 5% 6% 5% 4%;
    margin: 1vw 0 8vw 0;
}

.category{
    text-align: center;
    font-size: 4.5vh;
    font-family: 'Fredoka One';
    margin: 5vw 4vw 0 4vw;
    color: white;
    font-weight: normal;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
body {
    background-color: #2098e9 !important;
    text-align: center !important;
  }

h2{
    font-size: 5vh;
    font-family: 'Fredoka One';
    color: white;
    font-weight: normal;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

h3{
    font-size: 3vh;
    font-family: 'Fredoka One';
    color: black;
    margin-bottom: 6vw;
    font-weight: normal;
}

.loading_title{
    font-size: 7vh;
    font-family: 'Fredoka One';
    color: black;
    font-weight: normal;
}

h4{
    font-size: 5vw;
    font-family: 'Fredoka One';
    color: black;
    
    font-weight: normal;
    
}


.fa-twitter {
    background: #2098e9;
    color: black;
    font-size: 4vh;
  }
  
  .fa-github {
    background: #2098e9;
    color: black;
    font-size: 4vh;
  }

a { 
    color: inherit;
    text-decoration: none;
} 


h1 {
    margin-block-end: 0.067em;
    font-size: 13vw;
    /* font-size: 144pt; */
    font-family: 'Luckiest Guy';
    color: #ede99e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow:   0px -0.5vw 0 #212121,  
                   0px -0.5vw 0 #212121,
                   0px  0.5vw 0 #212121,
                   0px  0.5vw 0 #212121,
                  -0.5vw  0px 0 #212121,  
                  0.5vw  0px 0 #212121,
                  -0.5vw  0px 0 #212121,
                  0.5vw  0px 0 #212121,
                  -0.5vw -0.5vw 0 #212121,  
                  0.5vw -0.5vw 0 #212121,
                  -0.5vw  0.5vw 0 #212121,
                  0.5vw  0.5vw 0 #212121,
                  -0.5vw  2vw 0 #212121,
                   0px  2vw 0 #212121,
                   0.5vw  2vw 0 #212121,
                   0 2vw 1px rgba(0,0,0,.1),
                   0 0 0.5vw rgba(0,0,0,.1),
                   0 0.5vw 3px rgba(0,0,0,.3),
                   0 2vw 6px rgba(0,0,0,.2),
                   0 2vw 2vw rgba(0,0,0,.25),
                   0 3vw 3vw rgba(0,0,0,.2),
                   0 4vw 4vw rgba(0,0,0,.15);
  }

#page {
    display: none;
}

#loading {
    display: block;
}

.rating {
    display: flex;
    width: 100%;
    justify-content: center;
    overflow: hidden;
    flex-direction: row-reverse;
    height: 150px;
    position: relative;
  }
  
  .rating-0 {
    filter: grayscale(100%);
  }
  
  .rating > input {
    display: none;
  }
  
  .rating > label {
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-top: auto;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 76%;
    transition: .3s;
  }
  
  .rating > input:checked ~ label,
  .rating > input:checked ~ label ~ label {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  }
  
  
  .rating > input:not(:checked) ~ label:hover,
  .rating > input:not(:checked) ~ label:hover ~ label {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  }
  
  .emoji-wrapper {
    width: 100%;
    text-align: center;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .emoji-wrapper:before,
  .emoji-wrapper:after{
    content: "";
    height: 15px;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
  }
  
  .emoji-wrapper:before {
    top: 0;
  }
  
  .emoji-wrapper:after{
    bottom: 0;
  }
  
  .emoji {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .3s;
  }
  
  .emoji > svg {
    margin: 15px 0; 
    width: 70px;
    height: 70px;
    flex-shrink: 0;
  }
  
  #rating-1:checked ~ .emoji-wrapper > .emoji { transform: translateY(-100px); }
  #rating-2:checked ~ .emoji-wrapper > .emoji { transform: translateY(-200px); }
  #rating-3:checked ~ .emoji-wrapper > .emoji { transform: translateY(-300px); }
  #rating-4:checked ~ .emoji-wrapper > .emoji { transform: translateY(-400px); }
  #rating-5:checked ~ .emoji-wrapper > .emoji { transform: translateY(-500px); }
  
  .feedback {
    max-width: 360px;
    background-color: #2098e9;
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
  }

  .feedback_box{
    box-sizing: border-box;display: flex;
    flex-wrap: wrap;
    height: 30vh;
    align-items: center;
    justify-content: center;
    padding: 0 20px; margin-bottom: 7vh;
  }

  #myBtn {
    display: none;
    position: fixed;
    bottom: 3vw;
    right: 0.5vw;
    z-index: 99;
    font-size: 5vh;
    border: none;
    outline: none;
    background-color: 2098e9;
    color: white;
    cursor: pointer;
  }
  #myBtn:hover span {display:none}
  #myBtn:hover:after {content:"🙄"}

.foot { display: inline-block; line-height: 70px; vertical-align: bottom }

.img { display: inline-block;  }

.siteFooterBar {
  background: #99CFDF;
  border-radius: 25px;
    border-width: 5px;
    border-color: black;
    border-style: solid;
    margin: 0 2vw 2vw 2vw;
}