#response-container {background: #cccdef;}

.meaning {font-weight: bold;font-size:24px;line-height:36px}

.card-holder:hover {cursor:pointer;}
.loaded {background:#add8e6; padding:20px;}
#shuffle-btn:hover, .submit-btn:hover {cursor:pointer}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    text-align: center;
}

.overlay h2, .overlay p {
    color: white !important;
    margin: 10px;
}

button {
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 4px;
  background-color: #6768a4;
  color: #fff;
  text-shadow: 1px 1px 1px #333;
  transition: all 0.2s ease-in-out;
  border:none;
}

button:hover {
  background-color: #9798dc;
  box-shadow: 2px 2px 5px #444;
  transform: translateY(-1px);
cursor:pointer;
}
#card-holder:hover {cursor: pointer;}
    
.huge-button {
font-size: 1.6em;
line-height: 1.5em;
height:4em;
}
#card-holder img {border-radius: 8px;width:100%;}
.card-holder img {border-radius: 8px;width:100%;}
    
   .firework {
  position: absolute;
  display: none;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff0;
  animation: explode 700ms ease-out;
    background: rgba(4, 14, 49, 0.5); /* Red */
}

#new-tarot-reading-btn {
    font-size: 1.6em; /* Stor text */
    line-height: 1em;
    height: 60px;
    background-color: #6768a4; /* Samma färg som response-container */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    text-shadow: 1px 1px 1px #333;
}

#new-tarot-reading-btn:hover {
    background-color: #9798dc; /* Ljusare nyans vid hover */
    box-shadow: 2px 2px 5px #444;
    transform: translateY(-1px);
    cursor: pointer;
}


@media print {
	.new-page {  page-break-before: always;}
    .hide-on-result,#mega-menu-wrap-first,.footer,.hidePrint,.img_ad,.adsbygoogle,.mys-wrapper,#banner,.grippyhost,[aria-label="Advertisement"],#content,#introtext,svg {
        display: none !important;
		
    }
	
	* {
        background: none !important; /* Tar bort bakgrundsfärg */
    }
	
}

@keyframes explode {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(10);
  }
}

@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0; 
    }
}

.shimmer {
    animation: shimmer 1.5s infinite linear;
    background: linear-gradient(to right, 
                                rgba(143, 148, 251, 0.6) 4%, 
                                rgba(106, 108, 224, 0.8) 25%, 
                                rgba(143, 148, 251, 0.6) 36%);
    background-size: 500px 100%;
}