:root {
  --genColor : linear-gradient(0.4turn,#00f0b0, #00ff00);
  --scrollBg : linear-gradient(#a00080, #f00090);
  --cuteColor: #ffa0fd;
}

body {
  background-image : linear-gradient(140deg, #ffffff, #ff0060);
  background-repeat: no-repeat;
  height           : 100vh;
  width            : 100vw;
  justify-content  : center;
  align-items      : center;
  display          : flex;
  margin           : 0;
}
button&:hover {
  background-color: #777;
}
.holyText {
  font-family    : 'Sacramento', cursive;
  font-size      : 3rem;
  color          : var(--cuteColor);
  padding        : 2px;
}
.confText {
  font-family    : 'Sacramento', cursive;
  font-weight    : bold;
  font-size      : 2rem;
  color          : var(--cuteColor);
}
#textContainer{ 
  width            : 400px;
  background-size  : contain;
  background-repeat: no-repeat;
  height           : inherit;
  object-fit       : contain;
  background-repeat: no-repeat;
}
#imgContainer {
  background-size  : contain;
  background-repeat: no-repeat;
  width            : 400px;
  height           : inherit;
  max-height       : 600px;
  object-fit       : contain;
  background-repeat: no-repeat;
}
.containerBg {
  background-image:url("pics/heart.jpeg");
}
.bg-yes {
  background-image:url("./pics/smilecat.jpeg");
}
.bg-no {
  background-image:url("./pics/sadCat.jpeg");
}
.shock-img{ 
  background-image   : url("./pics/shock.png");
  background-repeat  : no-repeat;
  background-size    :contain;
  background-position: center;
  height             : 300px;
  margin-top         : 3rem;
}
.rounded {
  padding          : 2px;
  border-radius    : 25px;
  border           : 6px solid transparent;  
  background-origin: border-box;
  background-clip  : padding-box, border-box;
  cursor           : pointer;
  transition       : transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  transform-origin : center;
  &:hover {
    background-color: #666;
  }
}
.rounded.yes {
  background-image: var(--genColor);
  height          : 40px;
  width           : 80%;
}
.rounded.continue {
  width: 50%;
  height: 60px;
  background-image: linear-gradient(0.3turn, #ed2478, #ed2450);
  &:hover {
    transform: scale(1.3);
    filter: brightness(1.2);
  }
}
.rounded.time {
  font-size       : 1rem;
  width           : 100%;
  width           : 100%;
  background-color: #666666;
  background-image: var(--genColor);
  border          : 1px solid #000;
  border-radius   : 8px;
  cursor          : pointer;
  &:hover { opacity: 0.7; }
}
.rounded.no {
  background-image: linear-gradient(to right,#f09000, #ff5000);
  height           : 40px;
  width           : 20%;
  transition      : 0.2s ease;
}
.yes:hover {
  transform: scale(1.3);
  & ~ .no {
    opacity: 0;
  }
}
.no:hover ~ .yes {
  transform: scale(1.3);
}
#wrapper {
  width          : 20vw;
  height         : 70vh;
  background     : #ffe0f0;
  flex-direction : column;
  display        : flex;
  text-align     : center;
  align-items    : center;
  justify-content: center;
  border-radius  : 25px;
  border: 2px solid #ffccd5;
}
#confWrapper {
  width          : 50vh;
  height         : 50vh;
  background     : #ffe0f0;
  flex-direction : column;
  display        : flex;
  text-align     : center;
  align-items    : center;
  justify-content: flex-start;
  border-radius  : 25px;
  border: 2px solid #ffccd5;
}
#wrapper img{
  width     : inherit;
  height    : auto;
  object-fit: contain;
}
.timeWrapper {
  background-color: #fff;
  width           : 100%;
  height          : 8rem;
  margin-left     : 10px;
  margin-right    : 10px;
  display         : none;
  overflow-y      : auto;
}
.timeWrapper::-webkit-scrollbar {
  width: 18px;
}
.timeWrapper::-webkit-scrollbar-button {
  display: none;
}
.timeWrapper::-webkit-scrollbar-track {
  background-image: var(--scrollBg);
  border-radius: 10px;
}
.timeWrapper::-webkit-scrollbar-thumb {
  background: #00ff66;
  border-radius: 10px;
}
.timeWrapper::-webkit-scrollbar-thumb:hover {
  background: #00cc52;
}