body {
    font-family: 'Courier New', Courier, monospace;
    text-align: center;

}

h1{
    font-size: 45px;
    font-family: 'Courier New', Courier, monospace;
}

hr {
    width: 500px;
}

#errors {
    color: coral;
    font-size: 20px;
}
   

#board {
    width: 450px;
    height: 450px;

    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    border: 4px solid black;
}

.tile {
    width: 48px; 
    height: 48px;
    border: 1px solid rgb(129, 191, 208);

    /* Text */
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

#digits {
    width: 450px;
    height: 50px;

    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.number {
    width: 44px; 
    height: 44px;
    border: 1px solid black;
    margin: 2px;

    /* Text */
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.number-selected {
    background-color: gray;
}

.tile-start {
    background-color: rgb(210, 227, 233);
}

.horizontal-line {
    border-bottom: 1px solid black;
}

.vertical-line {
    border-right: 1px solid black;
}


#reset-button{
     position: absolute;
    top: 45px;
    right: 450px;
    padding: 8px 14px;
    font-weight: bold;
    cursor: pointer;
    background-color: white;
    border: none;
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    background: transparent;
}

#easy{
     
    padding: 8px 14px;
    font-weight: bold;
    cursor: pointer;
    width: 100px;
    height: 35px;
    font-family: 'Courier New', Courier, monospace;
    background: transparent;
    



}

#med{
     
    padding: 8px 14px;
    font-weight: bold;
    cursor: pointer;
    width: 100px;
    height: 35px;
    font-family: 'Courier New', Courier, monospace;
    background: transparent;
    

}

#hard{
     
    padding: 8px 14px;
    font-weight: bold;
    cursor: pointer;
    width: 100px;
    height: 35px;
    font-family: 'Courier New', Courier, monospace;
    background: transparent;
    


}

#info{
    position: absolute;
    top: 65px;
    left: 450px;
    border: none;
    background-color: white;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    background: transparent;



}



.difficulty {
    background-color: rgb(132, 126, 126); /* or any color that stands out */
    border: 2px solid rgb(207, 99, 99);  /* optional highlight */
}



#next {
    position:absolute;
    top: 75px;
    right: 457px;
    padding: 8px 14px;
    font-weight: bold;
    cursor: pointer;
    background-color: white;
    border: none;
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    background: transparent;
}

.start{

    background-image: url('VanGogh.png'); /* path to your image */
    background-size: cover;      /* makes it cover the entire area */
    background-position: center; /* centers the image */
    background-repeat: no-repeat;/* prevents tiling */
    font-family: Arial, sans-serif; /* optional styling */
    
}

#timer{
    font-size: 20px;
}
    
#home img{
    height: 35px;
    width: 35px;

    position: absolute;
    top: 110px;
    left: 500px;
}

#home{
    border: none;
    background: none;
    cursor: pointer;
}