* {
    box-sizing: border-box
}

:root {
    --bg-main: rgb(219, 211, 165);
    --border-main: #4a6028;
    --btn-bg: #deb955;
    --btn-hover: #e7ab08;
    --btn-submit-bg: rgb(191, 225, 238);
    --btn-submit-hover: #4a6028;
    --btn-submit-color-hover: whitesmoke;
}



body {
  background-image: url(/IMG/europeana-YnicXj-4qLU-unsplash.jpg);
  background-size: cover;
  font-family: fantasy;
}

.containerDnD {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height:100vh;
    width: 100%;
    padding: 2rem;
    overflow-y: auto; 
    border-style:double;
}

select {
    background-color: var(--bg-main);
    border: 2px solid var(--border-main);
    border-radius: 0.4rem;
    padding: 0.4rem;
    border-style: outset;
    cursor: pointer;
    
}

.BtnSubmit {
    margin-top: 0.5rem;
    padding:0.4rem 1rem;
    border: 2px solid #f5f3f0;
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: var(--btn-submit-bg);
    gap: 5rem;
    margin-bottom: 1rem;
    border-style: outset;
    box-shadow: 0 0 10px #f6e29b, 0 0 15px #d4b454;
}

.BtnSubmit:hover {
    background-color: var(--btn-submit-hover);
    transform: scale(1.05);
    color: var(--btn-submit-color-hover);
}

.BtnSubmit:active {
    transform: scale(0.95);
}

.spell-card {
    margin-top: 1rem;
    padding: 2rem;
    background: rgb(219, 211, 165);
    border: 2px solid #8b6b3a;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4),
    inset 0 0 20px rgba(0,0,0,0.25);
    width: 90%;
    max-width: 400px;
    max-height: 50vh;
    overflow-y: auto;
    display: none;
}

.spell-btn {
    margin-top: 0.5rem;
    padding:0.4rem 1rem;
    border: 2px solid #eaa40e;
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: var(--btn-bg);
    gap: 5rem;
    margin-bottom: 1rem;
    border-style: outset;
    box-shadow: 0 0 10px #e0c269;

}
.spell-btn:hover {
    background-color: var(--btn-hover);
    transform: scale(1.05);
    color: whitesmoke;
}

.spell-btn:active {
    transform: scale(0.95);
}

#spellbook-content {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 1rem;
    transition: all 0.3s ease-in-out;
    display: none;
}

#toggle-spellbook {
    width: 100%;
    display: flex;
    text-align: center;
    margin-bottom: 0.5rem;

}


#spellbook-container {
    position: static;
    width: 42px;        
    height: 42px;
    margin-top: 1rem;
    padding: 0.2rem;
    border-radius: 50%;
    background-color: rgba(219, 211, 165, 0.9);
    overflow: hidden;   
}

#spellbook-container.open {
    width: 90%;     
    max-width: 400px;
    height: auto;
    border-radius: 8px;
    overflow: visible; 
}

#spellbook-container:not(.open) .book-btn {
    width: 30px;
    height: 30px;
    border-radius: px; 
}

#spellbook-container.open .book-btn {
    width: 100%;        
    height: auto;
    border-radius: 8px; 
}

.book-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin:0 auto;
    display: block;
    border: 2px solid #4a6028;
    background-color: var(--bg-main);
    cursor: pointer;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
    box-shadow: 0 0 90px #f6e29b, 0 0 90px #d4b454;

}

.book-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 0 75px #f6e29b, 0 0 50px #d4b454;
}

.book-btn:active {
    transform: scale(0.9);
}

.flash-save {
    background-color: #acc37b !important; 
    color: #d2b639 !important;           
    border-color: #efb70f !important;
    transition: background-color 0.5s ease, color 0.5s ease;
}


/*media queries*/
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .containerDnD {
        padding: 3rem 4rem;
    }

    .spell-card {
        max-width: 450px;
        max-height: 55vh;
    }

    #spellbook-container {
        position: fixed;
        width: 70px;
        height: 70px;
        bottom: 1rem;
        right: 1rem;
        padding: 0.4rem;
        border-radius: 8px;
    }

    .book-btn {
        width: 100%;
        height: 100%;
    }
}

  /* desktop och större (1025px+)*/

@media screen and (min-width: 1025px) {

    .containerDnD {
        padding: 5rem 6rem;
    }

    .spell-card {
        max-width: 500px;
        max-height: 60vh;
    }

    #spellbook-container {
        position: fixed;
        width: auto;
        height: auto;
        bottom: 1rem;
        right: 1rem;
        padding: 0.5rem;
        border-radius: 8px;
        background-color: rgba(219, 211, 165, 0.9);
    }

    .book-btn {
        width: 70px;
        height: 70px;
    }
}