body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   background-color: #F6C0FF;
   font-family: 'Lato', sans-serif;
}

.trigger-block {
   max-width: 560px;
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.hey-mate {
   font-weight: 600;
   font-size: 50px;
}

.wanna-see-magic {
   font-weight: 400;
   font-size: 38px;
}

.image {
   display: block;
   width: 130px;
   margin: 0 auto;
}

.button {
   font-weight: 400;
   font-size: 33px;
   cursor: pointer;
   border-radius: 4px;
   background: #FCFCFC;
   transition: all 0.2s ease;
}

.button:hover {
   transition: all 0.4s ease;
   box-shadow: 0px 7px 13px rgba(0, 0, 0, 0.18);
}

.modal-window {
   width: 560px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #fff;
   border-radius: 20px;
   height: 400px;
   opacity: 0;
   visibility: hidden;
   transition: all 0.4s ease;
   box-shadow: 0px 4px 14px 4px rgba(0, 0, 0, 0.18);
}

.modal-window.active {
   opacity: 1;
   visibility: visible;
   transition: all 0.4s ease;
}

.question {
   font-weight: 400;
   font-size: 38px;
   text-align: center;
}

.are-you-gay {
   display: none;
}

.i-knew-it {
   display: none;
   font-size: 43px;
}

.are-you-gay.active {
   display: block;
}

.i-knew-it.active {
   display: block;
}

.choice {
   position: relative;
   margin: 0 auto;
   width: 300px;
   height: 50px;
   width: 380px;
}

#yes-btn {
   position: absolute;
   left: 0px;
}

#no-btn {
   position: absolute;
   right: 0px;
}

@media screen and (max-width: 615px) {
   .trigger-block {
      max-width: 300px;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   .modal-window {
      width: 300px;
   }

   .choice {
      position: relative;
      margin: 0 auto;
      width: 190px;
      height: 50px;
   }
}