:root{
    /* 
        --background: #000000; */
        --background:#060910;
    
        --gold: #8c6607;
      
        --headings: #cbcbcb;
      
      
        --neonblue: #008e87;
        --neonpink: #b30d55;
        --neonyellow: #a19c3d;
      }
    
    body{
        background-color:var(--background);
        height: 1000px;
    }


    h1{
        color: #ccc;
        font-weight: 600 !important; 
        font-family: "Poppins";
        font-size: 4rem  !important; 
        text-align: center;
        margin-top: 10vh;
    }

#scenario-selection {
    text-align: center;
    margin-top: 100px;
    font-size: 1.7rem;
    margin-bottom: 20px;
    color: #cdcbcb;
    
}
#landing-page{
    height: 80vh;
    background-image: url(../assets/game_image.jpeg);
    background-size: 1600px;
}

#scenario-select {
    font-family: "Poppins";
    margin-right: 10px;
    margin-right: 15px;
    margin-left: 20px;
    font-size: 1rem;
    border-radius: 40px;
    padding: 10px;
    color: #333;
    background-color: #dde7e5;
}
#scenario-description{
    color: white;
    font-size: 1.2rem;
}
#start-simulation-btn{
    border-radius: 15px;
    background-color: #0056b3;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 300;
}
#analyze-btn{
    border-radius: 15px ;
    background-color: #0056b3;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    margin-top: 3rem;
    color: white;
    font-weight: 300;
    -webkit-border-radius: 15px ;
    -moz-border-radius: 15px ;
    -ms-border-radius: 15px ;
    -o-border-radius: 15px ;
}

#simulation-container {
    padding-top: 0px;
    padding: 40px;
    display: none;
    >h3{
        color: #cdcbcb;
        padding: 20px;
        font-size: 1.5rem;
    }
    
}

#laws-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.law-item {
    flex: 1 1 18%; /* Adjust percentage based on the number of blocks per row */
    box-sizing: border-box;
    padding: 0.8rem 1rem !important; 
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    transition: background-color 0.3s;
}

.law-item.correct {
    background-color: lightgreen;
}

.law-item.incorrect {
    background-color: lightcoral;
}

.law-description {
    margin-top: 5px;
    color: #555;
}

#counterparts-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.counterpart-item {
    flex: 1 1 100%;
    box-sizing: border-box;
    padding: 1px 10px ;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;

}

.counterpart-item input {
    margin-right: 10px;
}

button {
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}

button:hover {
    background-color: #0056b3;
}

#result-message.correct {
    color: green;
}

#result-message.info {
    color: blue;
}

body {
    font-family: Arial, sans-serif;
}
#scenario-selection {
    margin-bottom: 20px;
}
#simulation-container {
    margin-top: 20px;
}
.law-item {
    background-color: #f4f4f4;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.law-description {
    margin-top: 5px;
    font-size: 0.9em;
    color: #666;
}
.option-item {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    cursor: pointer;
    border: rgb(167, 167, 167) 3px solid;
    border-radius: .5rem;
    margin-block:1rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;
}
.option-item.selected {
    background-color: #d0e0ff;
}
.correct {
    background-color: #d4edda;
    color: #155724;
}
.incorrect {
    background-color: #f8d7da;
    color: #721c24;
}
#result-message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
}
.info {
    background-color: #fef3cd;
    color: #856404;
}

#scenario-title{
    font-family: "Poppins";
    color: #b30d55;
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-block: 20px;
    padding-top: 20px;
    text-decoration: underline;

}