@font-face{        /* Has to be in the same folder as css code to work  */ 

    src: url(font1.ttf);
    font-family:CustomFont1;
}

@font-face{        /* Has to be in the same folder as css code to work  */ 

    src: url(font2.ttf);
    font-family:CustomFont2;
}



body
{
background-color:darkgrey;
}





div{
    border: 1px black solid;
    box-sizing: border-box;
    position:absolute;    
}


h1 {
    font-family:CustomFont1;
    /* Optional: Add more styling */
    padding-top: 10px;
    color: black;
    text-align: center;
    margin:0;
}

h3{
    margin:0;
    text-align:center;
}

#interface {                                                     
    margin:auto;
    width: 686px;
    height:600px;
    
    position:relative;
    background-color:wheat;
    border-radius: 10px;
}


#text{
    width:385px;
    height: 370px;
    top:50px;
    left:190px;
    color:white;
    padding:10px;
    background-color: rgba(0,0,0,.8);
    overflow-y: auto;
}

#foe{
    width:110px;
    height:100px;
    padding:25px;
    top:50px;
    left:575px;
    background-color:rgba(0,0,0,.8);
    color:white;
}

#foe-image{
    width:60px;
    height:65px;
    border-radius: 3px ;
}

#foe-info{
    width:110px;
    height:270px;
    top:150px;
    left:575px;
    background-color: rgba(0,0,0,.8);
    color: white;
    padding: 10px;
}

#hero{
    width:190px;
    height:100px;
    padding:25px;
    top:50px;
    background-color:rgba(0,0,0,.8);
    color:white;
}

#hero-image{
    width:60px;
    height:65px;
    border-radius: 3px ;
    outline: none; /* Removes any outline that might look like a cursor */
    display: block; /* Ensures it’s not treated as inline */
}


#closed-image{
    bottom:200px;
    border-radius: 3px ;

}


#stats{
    width:190px;
    height: 270px;
    top:150px;
    background-color: rgba(0,0,0,.8);
    color: white;
    border: bottom right radius 10px;
    padding:10px;

}

#music{

    top:610px ;
    left:180px;

}

.button-div
{
    width:80px;
    height:55px;
    border-radius:25px;
    margin:10px;
    text-align:center;
    color:white;
    line-height:55px;
    cursor: grab;

}

.button-div2
{
    width:120px;
    height:70px;
    border-radius:25px;
    margin:10px;
    text-align:center;
    color:white;
    line-height:55px;
    cursor: grab;

}


#fight{
    top:420px;
    background-color:darkred;
}

#herb{
    top: 495px;
    background-color: darkgreen;
}
#defend {
    top:420px;
    left:100px;
    background-color:gray;   
}
#run{
    top:495px;
    left:100px;
    font-size: 0.9em;
    background-color:darkgoldenrod;

}

#focus {
    top:420px;
    left:200px;
    background-color:rgb(0, 60, 255);   
}

#deathGrip{
    top:495px;
    left:200px;
    font-size:  0.9em;
    background-color:black;

}


#buyHerb {
    top:420px;
    left:350px;
    background-color:brown;   
}


#buyArmour {
    top:420px;
    left:480px;
    background-color:brown;   
}

#buySword {
    top:500px;
    left:350px;
    background-color:brown;   
}


#buyDagger {
    top:500px;
    left:480px;
    background-color:brown;   
}

#ok{
    width:280px;
    height:150px;
    top:420px;
    margin:10px;
    line-height:130px;
    font-size:1.2em;
    text-align:center;
    background-color:brown;
    color:white;
    border-radius:25px;
}


#gameOver{
    font-family:CustomFont2;
    width:280px;
    height:150px;
    top:50px;
    left:220px;
    margin:10px;
    line-height:30px;
    font-size:1.2em;
    text-align:center;
    background-color:brown;
    color:white;
    border-radius:25px;
}


#ripOverLay {
    font-family:CustomFont1;
    width: 280px;
    height: 150px;
    top: 420px;
    margin: 10px;
    font-size: 1.2em;
    text-align: center;
    background-color: black;
    color: white;
    border-radius: 25px;
    padding-top: 20px;
}

#closed {
    width: 280px;
    height: 150px;
    top: 420px;
    left: 350px;
    margin: 10px;
    font-size: 1.2em;
    text-align: center;
    background-color: black;
    color: white;
    border-radius: 25px;
    padding-top: 20px;
}


#gameOver:hover
{
    background-color:red;
}



#fight:hover
{
    background-color:red;
}

#herb:hover
{
    background-color:green;
}

#defend:hover
{
    background-color:rgb(163, 163, 163);
}

#defend:hover::after {
    content: "The next attack damage will be reduced."; /* Custom message */
    position: absolute;
    top: -150%;
    left: 590%;
    transform: translateY(-50%);
    color: red;
    border-radius: 3px;
    white-space: wrap;
    font-size: 12px;
    width: 100px; /* Set a fixed width to control the message box size */
    line-height: 1.2;
    z-index: 10;
}


#run:hover
{
    background-color:darkorange;
}


#run:hover::after {
    content: "Provides a chance of escaping fight."; /* Custom message */
    position: absolute;
    top: -300%;
    left: 600%;
    transform: translateY(-50%);
    color: red;
    border-radius: 3px;
    white-space: wrap;
    font-size: 12px;
    width: 100px; /* Set a fixed width to control the message box size */
    line-height: 1.2;
    z-index: 10;
}

#ok:hover
{
    background-color:red;
}

#focus:hover
{
    background-color:darkcyan;
}


#focus:hover::after {
    content: "Miss a turn to ignore enemies defense on next attack"; /* Custom message */
    position: absolute;
    top: -150%;
    left: 470%;
    transform: translateY(-50%);
    color: red;
    border-radius: 3px;
    white-space: wrap;
    font-size: 12px;
    width: 100px; /* Set a fixed width to control the message box size */
    line-height: 1.2;
    z-index: 10;
}

#deathGrip:hover
{
    background-color:darkslategray;
}

#deathGrip:hover::after {
    content: "Use 5 Rage points for strong attack"; /* Custom message */
    position: absolute;
    top: -300%;
    left: 470%;
    transform: translateY(-50%);
    color: red;
    border-radius: 3px;
    white-space: wrap;
    font-size: 12px;
    width: 100px; /* Set a fixed width to control the message box size */
    line-height: 1.2;
    z-index: 10;
}


#buyHerb:hover {

    background-color:red;   
}


#buyArmour:hover  {
    top:420px;
    left:480px;
    background-color:red;   
}

#buySword:hover  {
    top:500px;
    left:350px;
    background-color:red;   
}


#buyDagger:hover  {
    top:500px;
    left:480px;
    background-color:red;   
}

@media(max-width:500px){
    
    #stats{
        font-size: 10px;
    }
}