@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

html {
    font-family: 'Varela Round', sans-serif;
}

#myHeader {
    padding-top: 10vh;
    height: 20vh;
    color: white;
    font-size: 120px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-content: center;
}

body {
    height: 100vh;
    background-color:rgb(138, 174, 226);
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

#initialDisplay {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    overflow:hidden;
}

.prompt {
    font-size: 50px;
    border-style: none;
    border-radius: 10px;
    background-color: rgb(130, 130, 218);
    padding: 10px;
    color: white;
}

.buttons {
    display: inline;
    height: 6vh;
}

.card {
    height: 60vh;
    width: 80vw;
    border-style: none;
    background-color: white;
    border-radius: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.txt {
    text-align: center;
    font-size: 4vw;   
}

.next {
    margin-top: 2vh;
    padding: 2vh;
    border-style: none;
    color: white;
    background-color:rgb(130, 130, 218);
    border-radius: 1vh;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hidden {
    padding: 0vh;
    box-sizing: border-box;
    max-height: 0vh;
    overflow: hidden;
}

.card:hover {
    cursor: pointer;
}

.next:hover {
    background-color:rgb(115, 115, 209);
    cursor: pointer;
}

#upload {
    cursor: pointer;
}

.transition {
    animation: pop 0.3s linear 1;
}

@keyframes pop{
    50%  {transform: scale(1.2);}
}

#convert {
    padding: 3vh;
    color: white;
    background-color:rgb(130, 130, 218);
    border-style: none;
    border-radius: 1vh;
    font-size: 25px;
}

#convert:hover {
    cursor: pointer;
}

.rainbow {
    height: 100%;
    width: 100%;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  
  -webkit-animation: rainbow 18s ease infinite;
  -z-animation: rainbow 18s ease infinite;
  -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;}
  
  @-webkit-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
  }
  @-moz-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
  }
  @-o-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
  }
  @keyframes rainbow { 
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
  }

.pill > img {
    height: 50vh;
    transform: rotate(45deg);
}
  
.pill {
    color: white;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
}