body, html {
    height: 100%;  
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: white;
    background-image: url('../photos/background.png'); 
    background-size: cover;
    background-position: center;
}


#game-area {
    width: 100%;
    height: 100%;  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


button {
    padding: 10px 20px;
    border: none;
    background: #3d0491;
    color: white;
    font-size: 20px;
    border: 3px solid #fff; 
    text-shadow: 2px 2px #000000;
    box-shadow: 0 4px #3d0491;
    cursor: pointer;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

button:hover {
    background: #3d0491;
}

button:active {
    box-shadow: 0 2px #3d0491;
    transform: translateY(2px);
}


#start-button, #restart-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; 
}

.message-box {
    display: none;  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; 
    background: rgba(0, 0, 0, 0.8);  
    padding: 20px;
    border: 2px solid white;
    z-index: 1000; 
}

#title-and-instructions {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF; 
    text-align: center;
    z-index: 10; 
}

#title-and-instructions h1 {
    font-size: 2em; 
    margin-bottom: 0.5em;
}

#title-and-instructions p {
    font-size: 1em; 
    margin-top: 0;
    width: 80vw; 
    max-width: 600px; 
}


#restart-button{
    display: none;
    z-index: 10001;
}

#game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#game-over p {
    color: white;
    margin-bottom: 20px;
}


nav {
    background: #34495e;
    padding: 10px 0;
    text-align: center;
}

.nav-links li {
    display: inline;
    margin-right: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

#timer {
    text-align: center;
    font-size: 24px;
    color: white;
    font-family: 'Roboto', sans-serif; 
    margin-top: 10px;
}


#game {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

#windmill, #town {
    flex: 1;
    height: 300px;
    cursor: pointer;
}

#windmill {
    background-image: url('../photos/windmill1.png');
    background-size: contain;
    background-repeat: no-repeat;
}

#town {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 800px; 
    width: 100%;    
}


.unlit { background-image: url('../photos/unlittown.png'); }
.partial1 { background-image: url('../photos/partialtown1.png'); }
.partial2 { background-image: url('../photos/partialtown2.png'); }
.partial3 { background-image: url('../photos/partialtown3.png'); }
.partial4 { background-image: url('../photos/partialtown4.png'); }
.fullylit { background-image: url('../photos/fullylittown.png'); }