/* This file contains the main styles for the web application, including layout, colors, and typography to achieve the mystical and ethereal design. */

* {
    box-sizing: border-box;
}
@media screen and (min-width: 480px) and (max-width: 768px) {
    body {
        padding: 5%;
        font-size: 1.2rem;
    }
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 1.3rem;
    }
    h3 {
        font-size: 1rem;
    }
    .button-zone button {
        font-size: 1.2rem;
    }
}

body {
    background-color: #1a1a2e; /* Dark background for a mystical feel */
    color: #eaeaea; /* Light text color for contrast */
    font-family: 'Garamond', serif; /* Elegant font for a mystical touch */
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1, h2, h3 {
    color: #f5f5f5; /* Soft white for headings */
    margin-bottom: 30px;
    margin-top: 10vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    min-height: 100vh;
}


.card {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.card img {
    width: 100%;
    height: 100%;
}

#card-image {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


/* Button zone */
.button-zone{
    position: relative;
    color-scheme: dark;
    min-height: 100px;
    margin-top: 30px;
  }

  .draw-button, .reset {
    padding: 10px 20px;
    font-size: 20px;
    border: 2px solid black;
    border-radius: 10px;
    background-color: white;
    color: black;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.draw-button:hover, .reset:hover {
    background-color: rgba(255, 255, 255, 0.563);
}

.draw-button:active, .reset:active {
    transform: scale(1.25);
}

  .button-zone button{
    padding: 10px 20px;
    font-size: 20px;
    border: 2px solid black;
    border-radius: 10px;
    background-color: white;
    color: black;
    cursor: pointer;
    transition: transform 0.3s ease; /* Add transition for smooth scaling */
  }

  .button-zone button:hover{
    background-color: rgba(255, 255, 255, 0.563);
  }
  
  .button-zone button:active{
    transform: scale(1.25);
  }
/* 
  .reset {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in;
  } */
  /* .reset.visible {
    display: inline-block;
    opacity: 1;
} */