/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}

/******************************************
/* LAYOUT
/*******************************************/

body{
background-color: #6c2a7f;
background-image: url("data:image/svg+xml,%3Csvg width='80' height='88' viewBox='0 0 80 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 21.91V26h-2c-9.94 0-18 8.06-18 18 0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73 3.212-6.99 9.983-12.008 18-12.73V62h2c9.94 0 18-8.06 18-18 0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73-3.212 6.99-9.983 12.008-18 12.73zM54 58v4.696c-5.574 1.316-10.455 4.428-14 8.69-3.545-4.262-8.426-7.374-14-8.69V58h-5.993C12.27 58 6 51.734 6 44c0-7.732 6.275-14 14.007-14H26v-4.696c5.574-1.316 10.455-4.428 14-8.69 3.545 4.262 8.426 7.374 14 8.69V30h5.993C67.73 30 74 36.266 74 44c0 7.732-6.275 14-14.007 14H54zM42 88c0-9.94 8.06-18 18-18h2v-4.09c8.016-.722 14.787-5.738 18-12.73v7.434c-3.545 4.262-8.426 7.374-14 8.69V74h-5.993C52.275 74 46 80.268 46 88h-4zm-4 0c0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73v7.434c3.545 4.262 8.426 7.374 14 8.69V74h5.993C27.73 74 34 80.266 34 88h4zm4-88c0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73v-7.434c-3.545-4.262-8.426-7.374-14-8.69V14h-5.993C52.27 14 46 7.734 46 0h-4zM0 34.82c3.213-6.992 9.984-12.008 18-12.73V18h2c9.94 0 18-8.06 18-18h-4c0 7.732-6.275 14-14.007 14H14v4.696c-5.574 1.316-10.455 4.428-14 8.69v7.433z' fill='%23d59d3d' fill-opacity='0.56' fill-rule='evenodd'/%3E%3C/svg%3E");
  display: flex;
  justify-content: center;
}

main{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  margin: 30px 0 50px 0;
  background-color: #ffdcdc;
  border-radius: 30px;
}

img{
  display: block;
}

.cocktailMethod {
    display: flex;
    border-radius: 40px;
    flex-direction: column;
    align-items: center;
    max-width: 80%;
    padding: 0 20px;
}

#instructionSection {
  margin-top: 30px;
}

.search-name-container, .search-ing-container{
  display: flex;
}

.surprise-container {
  margin-bottom: 30px;
}

/******************************************
/* TYPOGRAPHY
/*******************************************/

body{
  font-size: 62.5%;
}

main{
  font-family:'Times New Roman';
  font-size: 1.5rem;
}

h1{
  font-size: 5rem;
  font-family: "Sirivennela", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #933e3e;
  margin: 20px;
}

h2 {
    font-family: "Sirivennela", sans-serif;
    color: #5e0a6a;
    margin-bottom: 0;
    text-align: center;
}

h3 {
    margin-top: 10px;
    font-family: 'Century';
    font-size: 1.5rem;
    color: #681274;
}

.h2Holder {
    display: flex;
    justify-content: flex-start;
}

.search-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.master-buttons-container{
  display: flex;
  justify-content: space-evenly;
}

.instructions {
    text-align: center;
    margin-bottom: 40px;
}

.cocktailMethod{
  font-size: 2rem;
}

.ingredients, .instructions {
    font-size: 1.5rem;
    font-size: 1.5rem;
    background-color: #ffe6e6;
    padding: 40px;
    border-radius: 10px;
}

.ingredients{
  padding: 20px 40px 20px 50px;
}

.typeIt{
  font-size: 1rem;
}

/******************************************
/* IMAGES
/*******************************************/

.shaker {
  width: 140px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.tiki-container {
    width: 75%; 
    position: relative;
}

.drink-window {
    display: flex;
    position: absolute;
    top: 25%;
    left: 21%;
    width: 56%;
    height: 50%;
    overflow: hidden;
    z-index: 1;
    justify-content: center;
}

.tiki-shutter {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 2px, transparent 2px, transparent 18px), 
  linear-gradient(to bottom, #b8a74c 0%, #a75b1c 40%, #452e1c 100%);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,0.35);
  transform: translateY(0); /* CLOSED */
  transition: transform 3.0s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.drink-window.open .tiki-shutter {
  transform: translateY(-100%);
}

.drink {
    width: 66%;
    object-fit: contain;
    z-index: 1;
}

.tiki-frame {
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 3;
}

.ingredient-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.ingredient-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/******************************************
/* ANIMATIONS
/*******************************************/

.shake {
  animation: shakeAnim 0.5s infinite;
}

/* Keyframes for shaking movement */
@keyframes shakeAnim {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(-15deg); }
  75%  { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

/******************************************
/* BUTTONS
/*******************************************/

h1 {
  cursor: pointer;
}


/******************************************
/* ADDITIONAL STYLES
/*******************************************/

button {
  padding: 5px 10px;
}

.typeIt {
  width: 300px;
  padding: 10px;
}

.alphabet-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.alphabet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  padding: 0 20px;
}

.alphabet button {
    color: #933e3e;
    font-family: "Tahoma";
    border: 1px solid #ccc;
    font-size: 1.0rem;
}

.alphabet button:hover {
  background: #b196b4;
}

.letter-results-dropdown {
  padding: 6px;
  font-size: 1rem;
}

#shake-btn, #ingredient-btn, #surprise-btn {
  background-color: #933e3d;
  color: white;
  border-radius: 10px;
  margin-left: 10px;
}

.hidden {
  display: none;
}