*
{
    box-sizing: border-box;
    /*border: 1px solid #f00;*/
    user-select: none;
}

body
{
    margin: 0;
    padding:0;
    height: 100vh;
}

#welcome-page
{
     display: block;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(115, 99, 99, 0.49);
}

#welcome-page-content
{
    display:flex;
    flex-flow:column nowrap;
    background-color: #0000005e;
    margin: 5% auto;
    padding: 20px;
    width: 80%;
    max-width: 1040px;
    position: relative;
}

.sub
{
    margin:5px;
    border: 1px solid #888;
    border-radius: 10px;
}
#sub
{
    text-align: center;
}

.close
{
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus
{
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
#story p
{
    margin-left:5px;
    color: #8e4c05;
    font-size:24px;
    font-family: 'MedievalSharp', bold;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #0d0c22;
}
#welcome-page-content #welcome-title
{
    font-family: 'Nosifer', cursive;
    font-size: 30px;
    text-align: center;
    color: #b07504;
    text-shadow: 1px 1px 2px #000, 0 0 25px #0f0d0d, 0 0 5px #f4f404;
}
#welcome-page-content #welcome-subtitle
{
    font-family: Arial, sans-serif, bold;
    font-size:24px;
    text-align: center;
    color: #fdfdfd;
    text-shadow: 1px 1px 2px #000, 0 0 25px #fff, 0 0 5px #000;
}
#ooc p
{
    font-family: Arial, sans-serif, bold;
    font-size:18px;
    text-align: center;
    color: #fdfdfd;
}

#dead-page
{
     display: none;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(115, 99, 99, 0.49);
}
#dead-page-content
{
    display:flex;
    flex-flow:column nowrap;
    background-color: #0000005e;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    position: relative;
}
#dead-page-content #dead-title
{
    font-family: 'Nosifer', cursive;
    font-size: 75px;
    text-align: center;
    color: #990303;
    text-shadow: 1px 1px 2px #000, 0 0 25px #0f0d0d, 0 0 5px #f4f404;
}
#dead-page-content #dead-subtitle
{
    font-family: 'Nosifer', cursive;
    font-size:24px;
    text-align: center;
    color: #350303;
    text-shadow: 1px 1px 2px #000, 0 0 25px #fff, 0 0 5px #000;
}

#dead-page-content #timer
{
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    color: #fff;
    font-size:24px;
    font-family: 'MedievalSharp', bold;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c;
    margin-top:20px;
}
#casters
{
    display:flex;
    flex-flow:column nowrap;

}
.caster
{
    display:flex;
    flex-flow:row nowrap;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin:1px;
}
#caster-list-name
{
    font-size: 28px;
    color: #710303;
    text-shadow: 1px 1px 2px #000, 0 0 25px #6c0000, 0 0 5px #000;
}

#caster-list-title
{
    font-family: 'Nosifer',cursive;
    font-size: 12px;
    margin-left: 3px;
    margin-top:8px;
    text-align: center;
    color: #7875df;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c;
}
.caster-name
{
    font-family: 'Nosifer',cursive;
    text-align: center;
    color: #990101;
    text-shadow: 1px 1px 2px #000, 0 0 25px #c603cc, 0 0 5px #3e0c40;

}

#caster-page
{
    margin: 0;
    padding:0;
    height: 100vh;
    /*background-color: #150404;*/
    background-color: #130707;

    display:flex;
    flex-direction:column;
    overflow-x:hidden;
}
#caster-top
{
    justify-content: space-between;
    flex: 0 0 auto;
    margin: 0;
    padding:0;
    display:flex;
    flex-flow:row nowrap;
}
#caster-top-1
{
    flex: 1;
    display:flex;
    justify-content: space-between;
    flex-flow:row nowrap;
}
#caster-top-2
{
    flex: 1;
}
#caster-top-3
{
    flex: 1;
    display:flex;
    justify-content:flex-end;
}
.login-button, .signup-button, .logout-button
{
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-button
{
    background-color: #FF00003B;
    color: #424040;
}

.signup-button
{
    background-color: #FF00003B;
    color: #424040;
}
.logout-button
{
    background-color: #FF00003B;
    color: #424040;
}


.login-button:hover, .signup-button:hover, .logout-button:hover
{
  transform: scale(1.1);
}

.login-button:focus, .signup-button:focus, .logout-button:focus
{
  outline: none;
}

.login-button:active, .signup-button:active, .logout-button:active
{
  transform: scale(0.9);
}
.chat-container
{
  display: flex;
  align-items: center;
}

#chat-input
{
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

#action_chat
{
  padding: 10px 20px;
  background-color: #5b0707;
  color: #ffa700;
  text-shadow: 1px 1px 2px #4f0808, 0 0 25px #ffffff, 0 0 5px #ffff00;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#action_chat:hover
{
  background-color: #240303;
}
/* Modal styles */
.modal
{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(132, 43, 43, 0.54);
}

.modal-content {
  background-color: #000;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  border-radius: 10px;
  position: relative;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* Button styles */
#open-modal-btn
{
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#open-modal-btn:hover {
  background-color: #555;
}

/* Form styles */
input[type="text"],
input[type="email"],
input[type="password"],
button[type="submit"]
{
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  display: inline-block;
  border: none;
  border-radius: 3px;
  box-sizing: border-box;
  background-color:#111;
  color:#d11
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  outline: none;
  border: 1px solid #aaa;
}

button[type="submit"] {
  background-color: #510404;
  color: black;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #060606;
  color: #510404;
}
.modalresult
{
    background-color: #1a1111;
    color: #7d1111;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #c14f17;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    font-size: 16px;
    text-align: center;

}

.modalresult::before {
    content: "Welcome to Caster"; /* Content before the message */
    display: block; /* Display as block */
    margin-bottom: 10px; /* Margin below the content */
    font-size: 20px; /* Larger font size for the title */
    font-weight: bold; /* Bold text */
    color: #000;
    text-shadow: 1px 1px 2px #4f0808, 0 0 25px #ffffff, 0 0 5px #ffff00;
}
#caster-middle
{
    justify-content: space-between;
    flex: 1;
    margin: 0;
    padding:0;
    display:flex;
    flex-flow:row nowrap;
}
#caster-display
{
    width:900px;
}
#caster-village
{
    width:490px;
}
#bookcard .content
{
    border:none;
    padding:14px;
}

#wm
{
    border: none;
    color: #fff;
    text-shadow: 1px 1px 2px #040404, 0 0 25px #000, 0 0 5px #f00;
    font-family: 'MedievalSharp', bold;
    font-size: 21px;
}
#rm
{
    border: none;
    color: #db0000;
    text-shadow: 1px 1px 2px #d50000, 0 0 25px #621212, 0 0 5px #000;
    font-family: 'MedievalSharp', bold;
    font-size: 21px;
}
#bm
{
    border: none;
    color: #000;
    text-shadow: 1px 1px 2px #150505, 0 0 25px #621212, 0 0 5px #000;
    font-family: 'MedievalSharp', bold;
    font-size: 21px;
}
.whitefont
{
   color: #fff;
   text-shadow: 1px 1px 2px #040404, 0 0 25px #000, 0 0 5px #f00;
   font-family: 'MedievalSharp', bold;
   font-size: 21px;
}
.redfont
{
    color: #db0000;
    text-shadow: 1px 1px 2px #d50000, 0 0 25px #621212, 0 0 5px #000;
    font-family: 'MedievalSharp', bold;
    font-size: 21px;
}
.blackfont
{
    color: #000;
    text-shadow: 1px 1px 2px #150505, 0 0 25px #621212, 0 0 5px #000;
    font-family: 'MedievalSharp', bold;
    font-size: 21px;
}

#caster-middle-1
{
    flex: 0 1 auto;
}
#caster-middle-2
{
    flex: 1;
    display: flex;
    flex-flow:column;
    align-items:center;
}

#caster-middle-3
{
    flex: 0 1 auto;
    overflow-y: auto;
    max-height:712px;
}

#caster-bottom
{
    flex: 0 0 auto;
    display:flex;
    flex-flow:row nowrap;
}
#caster-bottom-left
{
    flex:0 0 30%;
    display:flex;
    flex-flow:column nowrap;
}
#caster-bottom-center
{
    flex:1;
}
#spellbook
{
    position:relative;
    width: 100%;
    height: 400px;
    background-image: url('../img/book.png');
    background-size: contain; /* Ensures the image covers the whole div */
    background-position: center; /* Centers the image in the div */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    display:flex;
    flex-flow:column nowrap;
}
#spellbook::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Change the last value for transparency */
}

.researchspell
{
    font-family: 'MedievalSharp', bold;
    font-size:28px;
    text-align: center;
    color: #7b0000;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c;

}

.spellLine
{
    display:flex;
    flex-flow:row nowrap;
    margin-top:10px;
}

.components-container
{
    display:flex;
    flex-flow:row nowrap;
}

.component
{
    position:relative;
    width: 44px;
    height:44px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top:-7px;
}

.component-amount
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

#caster-bottom-right
{
    flex:0 0 30%;
    display:flex;
    flex-flow:column nowrap;
    justify-content:flex-end;
    max-height:115px;
}

#caster-bottom p
{
    margin:0;
    padding:0;
    font-size:10px;
    color: #FFFFFF !important;
}
#target .card
{
    padding:0px;
}
#target .content
{
    background-color:#000;
}

#target_title
{
    margin-top:-3px;
}
#caster-globaljournal
{
    flex:1;
    overflow-y: auto;
    max-height:70px;
}
#caster-privatejournal
{
    flex:1;
    overflow-y: auto;
    max-height:70px;
}
.caster-globaljournal-entry
{
    font-family: 'MedievalSharp', bold;
    font-size:16px;
    text-align: left;
    color: #7875df;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c
}
.caster-privatejournal-entry
{
    font-family: 'MedievalSharp', bold;
    font-size:16px;
    text-align: left;
    color: #7ed54e;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c;
}
#caster-menubar
{
    justify-content: space-between;
    flex: 0 0 auto;
    margin: 0;
    padding:0;
    display:flex;
    flex-flow:row nowrap;
}
#caster-menubar-1
{
    flex: 1;
}
#caster-menubar-2
{
    flex: 1;
    display:flex;
    justify-content: space-between;
    flex-flow:row nowrap;
}
#caster-menubar-3
{
    flex: 1;
}
.menu-button
{
    max-width:100px;
    max-height:100px;
}
.menu-button img
{
    height:100%;
    width:100%;
    object-fit: cover;
}
.menu-button.disabled
{
    display: none;
}
.stat-item
{
    flex:1;
    display:flex;
    flex-flow:row nowrap;
}
.progressbar
{
    position:relative;
    width: 100%;
    max-height: 25px;
    margin:2px;
    background-color:#C79C6E ;
    border-radius: 10px;
    border: 1px solid #000000;
    overflow: hidden;
    text-align: center; /* Center the text horizontally */
    line-height: 20px; /* Center the text vertically */

}
.progressbar-inner
{
    height: 100%;
    transition: width 0.5s;
}
.progress-text
{
    position:absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    text-shadow: 1px 1px 1px #333;
}

.spell-name
{
    flex:0 0 auto;
}


.highlight
{
    color: red; /* Evil red color */
    font-weight: bold; /* Make it stand out */
    text-decoration: underline; /* Give it an ominous look */
}
#caster-energy, #caster-hp, #caster-mana
{
  height: 100%;
  border-radius: 10px;
  width: 100%;
  transition: width 0.3s;
}
/* Set the color based on the progress value */
.green
{
  background-color: #4caf50; /* Green */
}

.orange {
  background-color: #ffa500; /* Orange */
}

.red {
  background-color: #ff0000; /* Red */
}
#village
{
    display:flex;
    width:100%;
    flex-flow:column nowrap;

}
#villageSquare
{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.villageSquare
{
    flex: 1 1 30%; /* Flex-grow, flex-shrink, and base percentage width */
    max-width: 30%;
    height: 120px; /* Adjust as needed */
    margin: 5px; /* Adjust as needed */
    background-color: #2b1409;
    display: flex;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 2px;
    border-color: #e39c15;
    border-radius: 5px;
    background-position: center;
    background-repeat: no-repeat;
}
.tooltip
{
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip .tooltiptext
{
    visibility: hidden;
    width: 120px;
    background-color: #5550;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext
{
    visibility: visible;
    opacity: 1;
}
ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li
{
    padding: 5px;
    margin: 5px 0;
    background-color: #f0f0f0;
    border-radius: 3px;
    font-size: 12px; /* Adjust font size as needed */
    color: #333; /* Text color */
}

li:hover
{
    background-color: #ddd; /* Hover background color */
}
.navigation-buttons
{
    display: flex;
    justify-content: space-between;
    margin:0px;
    padding:0px;
    border-style: solid;
    border-width: 2px;
    border-color: #e39c15;
}

.nav-btn
{
    padding: 0px;
    border: none;
    border-radius: 25%;
    color: #7875df;
    background-color: #6660;
    font-size: 16px; /* Icon size */
    cursor: pointer;
    transition: background-color 0.3s;
}

.nav-btn:hover
{
    background-color: #444; /* Darker background color on hover */
}
#building-bar
{
    display:flex;
    flex-flow: row wrap;
    justify-content:left;
    border-style: solid;
    border-width: 2px;
    border-color: #e39c15;
    padding:1px;
}
.building-bar-item
{
    display:flex;
    width:75px;
    border-radius:5px;
    box-shadow: 0 4px 8px 0 rgba(255, 63, 63, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin:5px;
    justify-content:center;
    align-items:center;
}
#building-bar .building-bar-item img
{
    max-width:75%;
    border-radius:0%;
    border:none;
    box-shadow: 0 4px 8px 0 rgb(0, 0, 0), 0 6px 20px 0 rgba(189, 129, 14, 0);
}

#graves
{
    flex:1;
    overflow:auto;
    display: flex;
    flex-flow:row wrap;
    justify-content: center;
}
.grave
{
    flex:1;
    max-height:100%;
    max-width:150px;
}
.grave p
{
    font-family: 'Nosifer',cursive;
    font-size: 12px;
    margin-left: 5px;
    text-align: center;
    color: #990101;
    text-shadow: 1px 1px 2px #000, 0 0 25px #c603cc, 0 0 5px #3e0c40;
}

.grave .card
{
    margin: 2px;
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #97660b;
    border-radius: 0px;
    background-color: #000;
}

.grave .card .content img
{
    margin: 5px;
    object-fit: cover;
    max-width: 100%;
    border-style: solid;
    border-width: 1px;
    border-radius: 63%;
    border-color: #421919;
    box-shadow: 0 4px 8px 0 rgb(0, 0, 0), 0 6px 20px 0 rgb(74, 29, 74);
}

/*lettertypes*/
h1
{
    font-family: 'MedievalSharp', bold;
    font-size:24px;
    text-align: center;
    color: #8a1c1c;
    text-shadow: 1px 1px 2px #4f0808, 0 0 25px #ffffff, 0 0 5px #ffff00;
}
h2
{
    color:#823d3d;
    margin:0;
    pointer-events: none;
}
.fontvalue1
{
    font-family: 'MedievalSharp', sans-serif; /* Specify the font family */
    font-weight: bold; /* Set font weight to bold */
    font-size: 16px;
    text-align: center;
    color: #990101;
    text-shadow: 1px 1px 2px #000, 0 0 25px #c603cc, 0 0 5px #3e0c40;
    margin-left: 1px;
    line-height: 17px;
}
.title
{
    font-family: 'Nosifer', cursive;
    font-size:24px;
    text-align: center;
    color: #150404;
    text-shadow: 1px 1px 2px #000, 0 0 25px #000, 0 0 5px #f00;
}

.subtitle
{
    font-family: 'MedievalSharp', bold;
    font-size:32px;
    text-align: center;
    color: #ffa700;
    text-shadow: 1px 1px 2px #4f0808, 0 0 25px #ffffff, 0 0 5px #ffff00;
}

.description
{
    font-family: 'MedievalSharp', bold;
    font-size:16px;
    margin-left:5px;
    text-align: center;
    color: #7875df;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c;
}
.card
{
    margin: 2px;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #f7c059;
    border-radius: 5px;
    background-color: #350303;

}

.card .content
{
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #e39c15;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card .content img
{
    flex:1;
    margin:5px;
    object-fit: contain;
    max-width:45%;
    border-style: solid;
    border-width: 1px;
    border-radius:50%;
    border-color:#e39c15;
    box-shadow: 0 4px 8px 0 rgb(123, 75, 14), 0 6px 20px 0 rgb(189, 129, 14);
}

#caster-xp
{
    margin-left:2px;
    font-family: 'MedievalSharp', bold;
    font-size:24px;
    text-align: center;
    color: #ffa700;
    text-shadow: 1px 1px 2px #f00, 0 0 25px #fff, 0 0 5px #000;
}
.rotation:hover
{
    animation:rotation 2s 1;
}

#inventory
{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding:0px;
    box-shadow: 0 4px 8px 0 rgba(174, 1, 1, 0.2), 0 6px 20px 0 rgba(115, 0, 0, 0.19);
}
.inventory-item .card
{
    margin:10px;
    padding:0px;
    border:none;
    background-color: #1110;
    pointer-events:none;

}
.inventory-item .card .content
{
    margin:0px;
    padding:0px;
    border:none;
    box-shadow: 0 4px 8px 0 rgba(174, 1, 1, 0.2), 0 6px 20px 0 rgba(115, 0, 0, 0.19);
}


#inventory .actionbutton
{
    border:none;
}
#worldSquares
{
    display:flex;
    flex-flow:column wrap;
    padding:1px;
    align-items: center;

}
#worldSquares .card
{
    border:none;
}
#worldSquares .card .content
{
    pointer-events:none;
}

#worldSquares .tooltip
{
    position: relative;
    display: inline-block;
    cursor: help;
}
#worldSquares .tooltip .card
{
    background-color: #8c6c6c00;
    border:none;
}
#worldSquares .tooltip .card .content
{
    background-color: #8c6c6c00;
    border:none;
}
#worldSquares .tooltip .card .content li {
  padding: 5px;
  margin: 5px 0;
  background-color: #d9bc7a;
  border-radius: 3px;
  font-family: "MedievalSharp", cursive;
  font-size: 12px; /* Adjust font size as needed */
  color: #111; /* Text color */
}


#worldSquares .tooltip .tooltiptext
{
    visibility: hidden;
    width: 120px;
    background-color: #5550;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    top: -100%;
    left:0%;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events:none;
}
#worldSquares .tooltip:hover .tooltiptext
{
    visibility: visible;
    opacity: 1;
}
.adventure-level
{
    font-size:12px;
    font-weight:bold;
    margin-left:5px;
    text-align: center;
    color: #4e4ad9;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c;
}

.adventure-name
{
    font-family: 'Nosifer',cursive;
    font-size:12px;
    margin-left:5px;
    text-align: center;
    color: #7875df;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c;
}
.actionbutton
{
    border-style: solid;
    border-width: 2px;
    border-color: #e39c15;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    position:relative;
}
.actionbutton:hover
{
  transform: scale(1.1);
}

.actionbutton:focus
{
  outline: none;
}

.actionbutton:active
{
  transform: scale(0.9);
}
.item-title, .item-amount
{
  margin: 0;
  padding: 0;
  font-family: 'MedievalSharp', bold;
  font-size: 18px;
  text-align: center;
  color: #ffa700;
  text-shadow: 1px 1px 2px #f00, 0 0 25px #fff, 0 0 5px #000;
}

.card .content .item-img
{
    box-shadow: none;
    border:none;
    margin:5px;
    max-height:64px;
    object-fit:contain;
    pointer-events:none;
}


#caster-travel .card .content
{
    border:none;
}
#caster-travel .card .card
{
    border:none;
}

.caster-localjournal_entry
{
    font-family: 'MedievalSharp', bold;
    font-size:16px;
    text-align: left;
    color: #7875df;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c
}
.study
{
    border:none;
    border-radius:10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #5550;
    font-size:24px;
    color: #7875df;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c
}
#caster-spellbook-header
{
    width:100%;
    display:flex;
    flex-flow: row nowrap;
    align-items:center;
    justify-content: space-between;

}
#caster-spellbook-header1
{
    flex:1;
}
#caster-spellbook-header2
{
    flex:1;
    display:flex;
    flex-flow: row nowrap;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #5550;
    font-size: 24px;
    color: #7875df;
    text-shadow: 1px 1px 2px #020209, 0 0 25px #0d2086, 0 0 5px #23208c;
}

/*animations*/
@keyframes rotation
{

    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(15deg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}