/* Tailwind and Bootstrap use px for media queries, with foundation using em
for this library we will stick with pixels */

/* ---General rules - scales images, videos to size of container--- */
img, embed, object, video, picture {
    max-width: 100%;
  }
  
  /* ---Change the way the box model works, tells the browser to account for any border and padding in the values you specify for an element's width and height.--- */
  
  html {
    box-sizing: border-box;
  }
  
  *, *::before, *::after {
    box-sizing: inherit;
  }
  
  /* ---Mini CSS reset--- */
  
  body, p, h1, h2, h3, h4, h5 {
     margin: 0px;
     padding: 0px;
  }
 
  body, html {
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
 }
  
  /* ---Utility Classes--- */
  
  .hidden {
     display: none;
  }
  
  #logo-quiz {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    padding-top: 10px;
  }
  
 
 main {
   margin-top: 200px;
  }

 
 
  .container {
  background-image: url('../images/background.svg');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh; 
  }
  
 
 .mobile-drop1 {
   background-color: white;
   border-radius: 20px;
   width: 100px;
   height: 100px;
   border: 3px solid #CCFFFF;
   margin-bottom: -100px;
 }
 
 .mobile-drop2 {
   background-color: white;
   border-radius: 20px;
   width: 100px;
   height: 100px;
   border: 3px solid #CCFFFF;
 }
 
 .mobile-drop3 {
   background-color: white;
   border-radius: 20px;
   width: 100px;
   height: 100px;
   border: 3px solid #CCFFFF;
   margin-top:-100px;
 }
 
 .bottle-background {
   background-color: white;
   border-radius: 20px;
   width: 100px;
   height: 200px;
   border: 3px solid #CCFFFF;
   margin-top: -150px;
 }
 
 .bottle-background img {
   width: 100px;
   height: 130px;
   margin-top: 30px;
 }
 
 .fa-plus, .fa-equals {
   display: none;
 }
 
 .m-tools {
   display: flex;
   justify-content: center;
   margin-top: 20px;
   background-color: white;
   border-radius: 20px;
   width: 100px;
   height:100px;
   border: 3px solid #CCFFFF;
   padding: 5px;
   cursor: grab;
 }
 
 
 
 .btn {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   outline: none;
   border: 4px #CCFFFF solid;
   background: linear-gradient(145deg, #90c4ff, #CCFFFF);
   box-shadow: inset 2px 2px 0px #729efd, inset -2px -2px 0px #0244bf;
   color: rgb(206, 237, 255);
   margin-top: 20px;
 }
 
 .btn i {
 font-size: 1.9em;  
 }
 
 
 
 .button-clicked {
   background: linear-gradient(-185deg, #90c4ff, #CCFFFF);
   box-shadow: inset -2px -2px 0px #729efd,
   inset 2px 2px 0px #0244bf;
 }
 
 .icon-clicked {
   color: #fff;
   text-shadow: 0px 0px 15px #008ECE;
 }
 
 
 
 .hide {
   display: none;
 }
 
 .show {
   display: block;
 }
  
 .reset-btn {
   width: 90px;
   height: 90px;
   border-radius: 20px;
   outline: none;
   border: 4px #CCFFFF solid;
   background: linear-gradient(145deg, #90c4ff, #CCFFFF);
   box-shadow: inset 2px 2px 0px #729efd, inset -2px -2px 0px #0244bf;
   color: rgb(206, 237, 255);
   font-size: 20px;
   margin-top: 20px;
 }
 
 .fa-wine-glass {
   font-size: 100px;
   -webkit-text-fill-color: transparent;
   background-image: -webkit-linear-gradient(transparent 100px #CCFFFF 100px);
   -webkit-text-stroke: 4px #0244bf;
   background-size: 200px 200px;
   background-position: 0 -200px;
   margin-left: 100px;
   margin-top: 20px;
 }
 
 
 
  
  
  /* ---Mobile Library Grid Styles--- */
  
  .full-width-grid-con {
     /* set this container as a grid, with 3 columns
     the other grid will sit in the middle column, this allows for overlapping content */
     display: grid;
     grid-template-columns: 1fr minmax(0, 1200px) 1fr;  
  }
  
   .grid-con {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     grid-column-gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
     padding-left: 15px;
     padding-right: 15px;
  }
  
  
  .col-span-1 {grid-column: span 1 / span 1;}
  .col-span-2 {grid-column: span 2 / span 2;}
  .col-span-3 {grid-column: span 3 / span 3;}
  .col-span-4 {grid-column: span 4 / span 4;}
  .col-span-full {grid-column: 1 / -1;}
  
  .col-start-1   {grid-column-start: 1;}
  .col-start-2   {grid-column-start: 2;}
  .col-start-3   {grid-column-start: 3;}
  .col-start-4   {grid-column-start: 4;}
  
  .col-end-1  {grid-column-end: 1;}
  .col-end-2  {grid-column-end: 2;}
  .col-end-3  {grid-column-end: 3;}
  .col-end-4  {grid-column-end: 4;}
  .col-end-5  {grid-column-end: 5;}
 
  
  
  
  
  
  /* ---Tablet Library Grid Styles--- */
  @media screen and (min-width: 768px) {
  
     .grid-con {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-column-gap: 20px;
        padding-left: 15px;
        padding-right: 15px;
        width: 768px;
     }
  
     .m-col-span-1  {grid-column: span 1 / span 1;}
     .m-col-span-2  {grid-column: span 2 / span 2;}
     .m-col-span-3  {grid-column: span 3 / span 3;}
     .m-col-span-4  {grid-column: span 4 / span 4;}
     .m-col-span-5  {grid-column: span 5 / span 5;}
     .m-col-span-6  {grid-column: span 6 / span 6;}
     .m-col-span-7  {grid-column: span 7 / span 7;}
     .m-col-span-8  {grid-column: span 8 / span 8;}
     .m-col-span-9  {grid-column: span 9 / span 9;}
     .m-col-span-10 {grid-column: span 10 / span 10;}
     .m-col-span-11 {grid-column: span 11 / span 11;}
     .m-col-span-12 {grid-column: span 12 / span 12;}
     .m-col-span-full {grid-column: 1 / -1;}
  
     .m-col-start-1 {grid-column-start: 1;}
     .m-col-start-2 {grid-column-start: 2;}
     .m-col-start-3 {grid-column-start: 3;}
     .m-col-start-4 {grid-column-start: 4;}
     .m-col-start-5 {grid-column-start: 5;}
     .m-col-start-6 {grid-column-start: 6;}
     .m-col-start-7 {grid-column-start: 7;}
     .m-col-start-8 {grid-column-start: 8;}
     .m-col-start-9 {grid-column-start: 9;}
     .m-col-start-10   {grid-column-start: 10;}
     .m-col-start-11   {grid-column-start: 11;}
     .m-col-start-12   {grid-column-start: 12;}
     .m-col-start-13   {grid-column-start: 13;}
  
     .m-col-end-1   {grid-column-end: 1;}
     .m-col-end-2   {grid-column-end: 2;}
     .m-col-end-3   {grid-column-end: 3;}
     .m-col-end-4   {grid-column-end: 4;}
     .m-col-end-5   {grid-column-end: 5;}
     .m-col-end-6   {grid-column-end: 6;}
     .m-col-end-7   {grid-column-end: 7;}
     .m-col-end-8   {grid-column-end: 8;}
     .m-col-end-9   {grid-column-end: 9;}
     .m-col-end-10  {grid-column-end: 10;}
     .m-col-end-11  {grid-column-end: 11;}
     .m-col-end-12  {grid-column-end: 12;}
     .m-col-end-13  {grid-column-end: 13;}
 
     body, html {
      margin-top: 0px;
     }
   
   .drop-zone {
      background-color: white;
      border-radius: 20px;
      width: 100px;
      height: 100px;
      border: 3px solid #CCFFFF;
   }
   
   .bottle-background {
      background-color: white;
      border-radius: 20px;
      width: 130px;
      height: 250px;
      border: 3px solid #CCFFFF;
      margin-top: -80px;
   }
   
   .bottle-background img {
      width: 130px;
      height: 170px;
      margin-top: 30px;
   }
   
   .fa-plus, .fa-equals {
      display: block;
      color: #94b2b9;
      font-size: 30px;
      margin-top: 30px;
   }
   
   .m-tools {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      background-color: white;
      border-radius: 20px;
      width: 100px;
      height: 100px;
      border: 3px solid #CCFFFF;
      padding: 5px;
      cursor: grab;
   }
   
   
   
   .btn {
      width: 5em;
      height: 5em;
      border-radius: 50%;
      outline: none;
      border: 4px #CCFFFF solid;
      background: linear-gradient(145deg, #90c4ff, #CCFFFF);
      box-shadow: inset 2px 2px 0px #729efd, inset -2px -2px 0px #0244bf;
      color: rgb(206, 237, 255);
      margin-top: 20px;
   }
   
   .btn i {
    font-size: 1.9em;  
   }
     
 
   .reset-btn {
      width: 250px;
      height: 70px;
      border-radius: 20px;
      outline: none;
      border: 4px #CCFFFF solid;
      background: linear-gradient(145deg, #90c4ff, #CCFFFF);
      box-shadow: inset 2px 2px 0px #729efd, inset -2px -2px 0px #0244bf;
      color: rgb(206, 237, 255);
      font-size: 20px;
      margin-top: 20px;
   }
 
  
 
   .fa-wine-glass {
      font-size: 100px;
      -webkit-text-fill-color: transparent;
      background-image: -webkit-linear-gradient(transparent 100px #CCFFFF 100px);
      -webkit-text-stroke: 4px #0244bf;
      background-size: 200px 200px;
      background-position: 0 -200px;
      margin-left: 30px;
   }
 
   .mobile-drop3 {
      margin-top: 0px;
   }

   #logo-quiz {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 50%;
    padding-top: 35px;
  }
 
   
  }
  
  /* ---Desktop Library Grid Styles--- */
  
  @media screen and (min-width: 1200px) {
  
     .grid-con {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-column-gap: 30px;
        padding-left: 15px;
        padding-right: 15px;
        width: 1920px;
        margin: 10px;
     }
  
     .l-col-span-1  {grid-column: span 1 / span 1;}
     .l-col-span-2  {grid-column: span 2 / span 2;}
     .l-col-span-3  {grid-column: span 3 / span 3;}
     .l-col-span-4  {grid-column: span 4 / span 4;}
     .l-col-span-5  {grid-column: span 5 / span 5;}
     .l-col-span-6  {grid-column: span 6 / span 6;}
     .l-col-span-7  {grid-column: span 7 / span 7;}
     .l-col-span-8  {grid-column: span 8 / span 8;}
     .l-col-span-9  {grid-column: span 9 / span 9;}
     .l-col-span-10 {grid-column: span 10 / span 10;}
     .l-col-span-11 {grid-column: span 11 / span 11;}
     .l-col-span-12 {grid-column: span 12 / span 12;}
     .l-col-span-full {grid-column: 1 / -1;}
  
     .l-col-start-1 {grid-column-start: 1;}
     .l-col-start-2 {grid-column-start: 2;}
     .l-col-start-3 {grid-column-start: 3;}
     .l-col-start-4 {grid-column-start: 4;}
     .l-col-start-5 {grid-column-start: 5;}
     .l-col-start-6 {grid-column-start: 6;}
     .l-col-start-7 {grid-column-start: 7;}
     .l-col-start-8 {grid-column-start: 8;}
     .l-col-start-9 {grid-column-start: 9;}
     .l-col-start-10   {grid-column-start: 10;}
     .l-col-start-11   {grid-column-start: 11;}
     .l-col-start-12   {grid-column-start: 12;}
     .l-col-start-13   {grid-column-start: 13;}
  
     .l-col-end-1   {grid-column-end: 1;}
     .l-col-end-2   {grid-column-end: 2;}
     .l-col-end-3   {grid-column-end: 3;}
     .l-col-end-4   {grid-column-end: 4;}
     .l-col-end-5   {grid-column-end: 5;}
     .l-col-end-6   {grid-column-end: 6;}
     .l-col-end-7   {grid-column-end: 7;}
     .l-col-end-8   {grid-column-end: 8;}
     .l-col-end-9   {grid-column-end: 9;}
     .l-col-end-10  {grid-column-end: 10;}
     .l-col-end-11  {grid-column-end: 11;}
     .l-col-end-12  {grid-column-end: 12;}
     .l-col-end-13  {grid-column-end: 13;}
 
     body, html {
      margin-top: 20px;
     }
 
     main {
      margin-top: 200px;
     }

    
 
   .drop-zone {
      background-color: white;
      border-radius: 20px;
      width: 150px;
      height: 150px;
      border: 3px solid #CCFFFF;
   }
   
   .bottle-background {
      background-color: white;
      border-radius: 20px;
      width: 200px;
      height: 300px;
      border: 3px solid #CCFFFF;
      margin-top: -70px;
   }
   
   .bottle-background img {
      width: 290px;
      height: 260px;
   }
   
   .fa-plus, .fa-equals {
      display: block;
      color: #94b2b9;
      font-size: 50px;
      margin-top: 40px;
   }
   
   .m-tools {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      background-color: white;
      border-radius: 20px;
      width: 150px;
      height: 150px;
      border: 3px solid #CCFFFF;
      padding: 5px;
      cursor: grab;
   }
   
   
   
   .btn {
      width: 6.5em;
      height: 6.5em;
      border-radius: 50%;
      outline: none;
      border: 4px #CCFFFF solid;
      background: linear-gradient(145deg, #90c4ff, #CCFFFF);
      box-shadow: inset 2px 2px 0px #729efd, inset -2px -2px 0px #0244bf;
      color: rgb(206, 237, 255);
   }
   
   .btn i {
    font-size: 2.9em;  
   }
     
 
   .reset-btn {
      width: 400px;
      height: 80px;
      border-radius: 20px;
      outline: none;
      border: 4px #CCFFFF solid;
      background: linear-gradient(145deg, #90c4ff, #CCFFFF);
      box-shadow: inset 2px 2px 0px #729efd, inset -2px -2px 0px #0244bf;
      color: rgb(206, 237, 255);
      font-size: 40px;
   }
 
   .fa-wine-glass {
      font-size: 200px;
      -webkit-text-fill-color: transparent;
      background-image: -webkit-linear-gradient(transparent 100px #CCFFFF 100px);
      -webkit-text-stroke: 4px #0244bf;
      background-size: 230px 230px;
      background-position: 0 -230px;
      margin-top: -130px;
   }
 
   .mobile-drop3 {
      margin-top: 0px;
   }
  }
     
 
    
 /*Chatbot*/

.chatbot-toggler {
   position: fixed;
   right: 40px;
   bottom: 35px;
   height: 50px;
   width: 50px;
   color: #fff;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   outline: none;
   cursor: pointer;
   background: #98BFEB;
   border-radius: 50%;
   transition: all 0.6s ease;
 }
 
 .show-chatbot .chatbot-toggler {
   transform: rotate(90deg);
 }
 .chatbot-toggler span {
   position: absolute;
 }
 
 .show-chatbot .chatbot-toggler span:first-child,
 .chatbot-toggler span:last-child {
   opacity: 0;
 }
 
 .show-chatbot .chatbot-toggler span:last-child {
   opacity: 1;
 }
 
 .chatbot {
   width: 420px;
   position: fixed;
   right: 40px;
   transform: scale(0.5);
   opacity: 0;
   pointer-events: none;
   bottom: 100px;
   background: #fff;
   overflow: hidden;
   transform-origin: bottom right;
   border-radius: 15px;
   box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
   0 32px 64px -48px rgba(0,0,0,0.5);
   transition: all 0.1s ease;;
 }
 
 .show-chatbot .chatbot {
   transform: scale(1);
   opacity: 1;
   pointer-events: auto;
 }
 
 .chatbot .chatbot-zima {
   background-color: #98BFEB;
   padding: 16px 0;
   text-align: center;
   color: #fff;
   position: relative;
 }
 
 .chatbot .chatbot-zima h2 {
   color: #fff;
   font-size: 1.4rem;
 }
 
 .chatbot .chatbot-zima span {
   position: absolute;
   right: 20px;
   top: 50%;
   color: #fff;
   cursor: pointer;
   display: none;
   transform: translateY(-50%);
 }
 
 .chatbot .chatbox {
   height: 510px;
   overflow-y: auto;
   padding: 30px 20px 100px;
 }
 
 .chatbox .chat {
   display: flex;
 }
 
 .chatbox .incoming span {
   height: 32px;
   width: 32px;
   color: #fff;
   align-self: flex-end;
   background-color: #98BFEB;
   text-align: center;
   line-height: 32px;
   margin: 0 10px 7px 0;
   border-radius: 4px;
 }
 
 .chatbox .outgoing {
   justify-content: flex-end;
   margin: 20px 0px;
 }
 
 .chatbox .chat p {
   color: #fff;
   max-width: 75%;
   white-space: pre-wrap;
   font-size: 0.95rem;
   background: #98BFEB;
   padding: 12px 16px;
   border-radius: 10px 10px 0px 10px;
 }
 
 .chatbox .chat p.error {
   color: #721c24;
   background: #f8d7da;
 }
 
 .chatbox .incoming p {
   color: #000;
   background: #f2f2f2;
   border-radius: 10px 10px 10px 0px;
 }
 
 .chatbot .chat-input {
   position: absolute;
   bottom: 0;
   width: 100%;
   display: flex;
   gap: 5px;
   background-color: #fff;
   padding: 5px 20px;
   border-top: 1px solid #ccc;
 }
 
 .chat-input textarea {
   height: 55px;
   width: 100%;
   border: none;
   outline: none;
   font-size: 0.95rem;
   resize: none;
   padding: 16px 15px 16px 0;
   max-height: 180px;
 }
 
 .chat-input span {
   font-size: 1.35rem;
   cursor: pointer;
   background-color: #98BFEB;
   align-self: flex-end;
   height: 55px;
   line-height: 55px;
   visibility: hidden;
 }
 
 .chat-input textarea:valid ~ span {
   visibility: visible;
 }
 
 @media(max-width: 490px) {
   .chatbot {
       right: 0;
       bottom: 0;
       width: 100%;
       height: 100%;
       border-radius: 0;
   }
 
   .chatbot .chatbox {
       height: 90%;
   }
 
   .chatbot .chatbot-zima span {
       display: block;
   }
 }