@font-face {
        font-family: rainyhearts;
        src: url('https://moonpr1sm.neocities.org/fonts/rainyhearts.eot');
        src: url('https://moonpr1sm.neocities.org/fonts/rainyhearts.eot?#iefix') format('embedded-opentype'),
            url('https://moonpr1sm.neocities.org/fonts/rainyhearts.woff2') format('woff2'),
            url('https://moonpr1sm.neocities.org/fonts/rainyhearts.woff') format('woff'),
            url('https://moonpr1sm.neocities.org/fonts/rainyhearts.ttf') format('truetype');
    }
    
    @font-face { font-family: Cinzel;
    src: url("https://moonpr1sm.neocities.org/fonts/Cinzel_Decorative/CinzelDecorative-Regular.ttf")
    }
    
  body {
    background-color: #0a0a23;
    position: relative;
    font-family: rainyhearts;
    color: #ffffff;
    margin: 0 auto;
    padding: 0;
  cursor: url(' https://moonpr1sm.neocities.org/games/Dragon%20Repeller/cursor.cur'), default; 
    
}

a:hover {
 cursor: url('https://moonpr1sm.neocities.org/games/Dragon%20Repeller/cursor.cur'), pointer;
}


.container { display: flex;
 flex-direction: column;
 
 align-items: center;

 padding: 20px;
}

h1 {  font-family: Cinzel;
font-size: 3em;}


 
 a { color: #FF61DA;}

#text {
   border: 3px solid #6B2CBD;
    border-radius: 4px;
    background-color: #0a0a23;
    color: #ffffff;
    padding: 10px;
    font-family: rainyhearts;
    font-size: 1.3em;
}

#game {
    border: 3px solid #6B2CBD;
    border-radius: 4px;
    max-width: 800px;
    max-height: 800px;
    background-color: #903BFF;
    color: #ffffff;
    margin: 30px auto 0px;
    padding: 10px;
}

#controls,
#stats {
    border: 3px solid #C582FF;
    border-radius: 4px;
     background-color: #feac32;
     background-image: linear-gradient(#CEA8FF, #C582FF);
    padding: 5px;
    color: #0a0a23;
    font-family: rainyhearts;
    font-size: 1.5em;
}

#monsterStats {
    display: none;
  border: 3px solid #C582FF;
    border-radius: 4px;
     background-color: #feac32;
     background-image: linear-gradient(#CEA8FF, #C582FF);
    padding: 5px;
    color: #0a0a23;
    font-family: rainyhearts;
    font-size: 1.5em;
}

.stat {
    padding-right: 10px;
}

button {
    cursor:url(' https://moonpr1sm.neocities.org/games/Dragon%20Repeller/cursor.cur'), default; 
    color: #0a0a23;
    background-color: #feac32;
    background-image: linear-gradient(#FFB5F0, #FF85BA);
    border: 3px solid  #FF82CD;
    border-radius: 4px;
    font-family: rainyhearts;
    font-size: 1em;
}

@media (max-width: 510px) {
    h1 { font-size: 2em; } 
    #text, #stats, #monsterStats {
        font-size: 1.2em; 
    }
    button {
        font-size: 1.2em; 
        padding: 10px 20px; 
    }
    
    #game {
    max-width: 90%; 
    padding: 5%; 
}

   #text { font-size: 1.5em;}


    .container, #controls, #stats {
        flex-direction: column; 
        align-items: center;
    }
    #controls button, #stats .stat {
        margin: 5px 0; 
    }
}

body {
    font-size: calc(12px + 1.5vw); 
}