@font-face {
    font-family: 'Unown';
    src: url('Unown.ttf') format('truetype');
   
}

@font-face {
     font-family: 'Hangmon';
    src: url('Save Lemon.ttf') format('truetype');
}

@font-face {
    font-family: 'CardName';
   src: url('CenterFont4.ttf') format('truetype');
}

body {
    
    font-family: 'Arial', sans-serif;
    background-color: #26271e;
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */ 
    margin: 0;
    
    
}

.game-container {
    /* background-image: url('eye-png3.png'); */
    width: 100%;
    background-position: center;
    background-repeat: repeat;
    text-align: center;
    /* padding: 20px; */
    /* background-color: rgb(0, 0, 0); */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#word-display {

    /* display:flex; */
    display: flex;
    justify-content: center;
    gap: 10px; 
    flex-wrap:wrap;
    /* max-width:100%; */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    /* text-align: right; */
}

#word-display .letter {
    color:#468847;
    display: inline-block;
    width: 10px; /*cambiar a 10*/
    /* min-width: 30px; */
    height: 50px;
    /* max-height: 50px; */

    /* text-align: center; */
    font-family: 'CardName', sans-serif; 
    /* line-height: 10px; */

    font-size: 40px; 
    
    /*font-size: 90px; for unown letters*/
    padding: 20px;
    /* padding-right: 35px; */
    /* padding-top: 0px;
    padding-bottom: 0px; */
    /* padding-left: 20px; */
   /* padding-right: 40px; for unown letters, hace cuadrado*/
    border-style:none;
    background-image: url('cardback2.png');
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    /* vertical-align: middle; */
    
}

.space {
    display: inline-block;
    width: 13px; 
    height: 50px; 
    vertical-align: middle; 
}

#text-bg{
    font-family: 'Hangmon', sans-serif; 
    font-size: 30px;
    background-color: rgba(143, 143, 142, 0.486);
    box-shadow: black;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.589);
    padding: 10px;
    /* width: fit-content; */
    display: inline-block;
    
}

#text-bg2{
    font-family: 'Times New Roman', Times, sans-serif; 
    font-size: 20px;
    background-color: rgba(143, 143, 142, 0.486);
    box-shadow: black;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.589);
    padding: 7px;
    /* width: fit-content; */
    display: inline-block;
}

.text-container{
    align-items: center;
}

#incorrect-guesses {
    margin-top: 60px;
    color: black;
    font-family: 'Arial', sans-serif; 
    font-size: 20px;
}

#wrong-letters {
    margin-top: 20px;
    color: rgb(17, 2, 83);
    font-family:'Courier New', Courier, monospace;
    font-size: 60px;
    border-style: dashed;
    /* padding: 30px; */
    height: 70px;
    max-height: 70px;
    background-color: rgba(143, 143, 142, 0.486);
}

.notification-container {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #555;
    color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.final-message {
    display: none;
    font-size: 24px;
    font-family: 'Hangmon', Arial, sans-serif;
    color: #522121;
}



input[type="text"] {
    padding: 10px;
    font-size: 18px;
    /* margin-top: 40px;
    margin-bottom: 20px; */
    margin: 40px auto 20px auto;
    background-color: #ffffff6b;
    border-radius: 20px;
    border-color: #26271e;
    border-width: 3px;
    z-index: 10;
    display: flex;
   
}

.figure-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.cross {
    stroke: rgb(0, 0, 0);
    stroke-width: 4px;
}

.image-container {
    /* position: relative;  */
    width: 200px; 
    height: 300px; 
    /* overflow: hidden;  */
    margin: 0 auto; 
    z-index: 1; /* overlappy prioritty*/
    display: inline-block;
    
}

.image-container img {
    position: relative; /*deja overlapear*/
    top: 0; 
    left: 0; 
    width: 100%; 
    height: auto; 
    z-index: 1;
    user-select: none;
    pointer-events: none;
    display: none; 
    
}
.image-container img:nth-child(2) {
    margin-top: -100%; 
    top: -60px;
    
}

.image-container img:nth-child(3) {
    margin-top: -100%; 
    top: -130px;
}

.image-container img:nth-child(4) {
    margin-top: -100%; 
    top: -192px;
}
.image-container img:nth-child(5) {
    margin-top: -100%; 
    top: -250px;
}
.image-container img:nth-child(6) {
    margin-top: -100%; 
    top: -312px;
}



@media (max-width: 600px) {
    .image-container {
        max-width: 200px; 
    }
    .game-container {
        overflow-y: scroll;
        max-height: calc(100vh - 50px); /* probar el keyboard en mobile */
      }
}



#card-container0 {
    max-width: 200px;
    height: auto;
    display: inline-block;
    position: relative; 
    top: -40px; 
}

#card-container0 img {
    max-width: 100%;
    /* height: auto; */
}

#card-container {
    max-width: 200px;
    display: inline-block;
    position: relative; /* ver que esto no rompa nada en mobile */
    top: -40px; /* relative deja usar top */
    padding-bottom: -90px; /*puedo poner aca info I guess*/
}

#card-container img {
    max-width: 100%;
    /* height: 100px; */
}

#mst-list{
    /* font-weight: bold; */
    font-family:'Times New Roman', Times, serif;
    margin-top: 20px;
    border-style: dashed;
    border-width: 2px;
    border-color: #000; /* Black border */
    padding: 10px;
    /* width: 300px;  */
    background-color: rgba(143, 143, 142, 0.808);; /* Light gray background */
}

/* Style for checked checkboxes */
input[type="checkbox"]:checked {
    /* Change the tick color */
    accent-color: #adaf4c; /* Green color */
}

/* Style for disabled checkboxes */
input[type="checkbox"]:disabled {
    /* Change the disabled tick color */
    accent-color: #808080; /* Gray color */
}

#disclaimer {
    font-family:'Courier New', Courier, monospace;
    font-size: 14px;
    color: #468847;
    /* width: 400px; */
}

a:visited {
    color: #ffc0cb;
    background-color: transparent;
    text-decoration: none;
  }

  a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
  }

  a:hover {
    color: #b4868e;
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:active {
    color: #fda6b5;
    background-color: transparent;
    text-decoration: underline;
  }