body{
    background-color: black;
    text-align:center;
}

.container{
    max-width: 1300px;
    margin: 0 auto;
    background-color: black;
    padding-left: 5%;
    padding-right: 5%;
}
        

        
#title_heading{

    background-color: black;
    color: ghostwhite;
}

.heading{
    background-color: black;
    color: ghostwhite;
}



hr{
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(250, 250, 150, 0), rgba(250, 250, 250, 0.75), rgba(250, 250, 250, 0));
}

h3, h2, h4{
    color: white;
}

#time_left_tag{
    font-size: 32px;
}

p{
    font-size: 20px;
    color: white;
}

.black_p{
    color: black;
    font-size: 18px;
}

.gradient_p{
    
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 20, 0, 0.99), rgba(0, 0, 0, 0.25));
}

.main_section_grid{
    display: grid;
    grid-template-columns: 100%;
}



.five_columns_grid{
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}

.seven_columns_grid{
    display: grid;
    grid-template-columns: 14% 14% 14% 16% 14% 14% 14%;
}

.two_columns_grid{
    display: grid;
    grid-template-columns: 50% 50%;
}

.three_columns_grid{
    display: grid;
    grid-template-columns: 33% 33% 33%;
}

#list_possible_buttons{
    display: grid;
    grid-template-columns: 15% 70% 15%;
}

#info_tip{
    font-size: 20px;
    background-color: darkred;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.99), rgba(0, 0, 0, 0.6));
    color: white;
}

#initial_buttons_row{
    display: grid;
    grid-template-columns: 40% 20% 40%;
}

#clash_buttons_row{
    display: grid;
    grid-template-columns: 40% 20% 40%;
}

.three_columns_grid > div {
    text-align: center;
}

#table_heading{
    display: grid;
    grid-template-columns: 33% 33% 33%;
}


.eight_columns_grid{
    display: grid;
    grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
}

.eight_columns_grid > div {
    text-align: center;
    background-color: ghostwhite; /* For browsers that do not support gradients */
    border-radius: 15%;      /* Round shape  */
    background-image: radial-gradient(rgba(250, 250, 250, 0.5), rgba(47, 79, 79, 0.75), rgba(47, 79, 79, 1));
}

.eight_columns_grid > div:hover {
    
    background-color: ghostwhite; /* For browsers that do not support gradients */
    border-radius: 25%;      /* Round shape  */
    background-image: radial-gradient(rgba(250, 250, 250, 0.9), rgba(47, 79, 79, 0.5), rgba(47, 79, 79, 1));
}

#div_empty_radio{
    text-align: center;
    
}

#empty_div{
    background-color: darkslategray;
    background-image: none;
}

#empty_div:hover{
    background-color: black;
}


#canvas-div{

    width: auto;
    height: auto;
    padding: 5px;
    text-align: center;
    background-color: none;
}

.top_row{
    text-align: left;
    background-color: black;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 120, 0, 0.75), rgba(0, 0, 0, 0.1));
}

.column_title{
    text-align: center;
    background-color: none;
    color: ghostwhite;
}

.bottom_row{
    text-align: center;
    background-color: darkgreen;
    background-image: url(circuit_board_1.jpg);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

.my_button{
    width: 60px;
    height: 60px;
    font-size: 16px;
    padding: 1px;
    border-radius: 12px;
    border: 2px solid #000000;
    background-color: white;
    background-size: 100% 100%; 
    color: black;
}

.my_button:hover{
    
    border: 2px solid red;
}

#update_score_button{
    width: 20px;
    height: 20px;
    visibility: hidden;
}

#update_score_button:disabled{
    visibility: hidden;
    width: 10px;
    height: 5px;
}

#update_score_button:enabled{
    visibility: visible;
    width: 200px;
    height: 30px;
}

.image_in_button{
    width: 55px;
    height: 55px;
}

#go_button{
    width: 100px;
    height: 60px;
    font-size: 16px;
    padding: 5px;
    border-radius: 12px;
    border: 2px solid #000000;
    background-color: white;
    background-size: 100% 100%; 
    color: black;
}

#go_button:hover{
    background-color: black;
    color: white;
    border: 2px solid green;
}

#go_button:disabled{
    background-color: red;
}


#move_ahead_button{
    background-image: url('img_go_ahead.png');
}

#increase_x_button{
    background-image: url('img_increase_x.png');
}

#increase_x_button:disabled{
    visibility: hidden;
}

#turn_left_button{
    background-image: url('img_turn_left.png');
}

#turn_right_button{
    background-image: url('img_turn_right.png');
}

#turn_180_button{
    background-image: url('img_turn_around.png');
}

#b1_initial{
    background-image: url('img_init_x.png');
}


.about_div{
    background-color: ghostwhite;
    text-align: justify;
    padding: 20px;
}

.img_div_center{
    text-align: center;
    padding: 5px;
}

#tecnical_details_two_columns{
    display: grid;
    grid-template-columns: 80% 20%;
}

#privacy_notice_div{
    background-color: ghostwhite;
    text-align: justify;
    vertical-align: middle;
    padding: 10px;
    display: grid;
    grid-template-columns: 10% 90%;
}

#decipher_info{
    padding-left: 10px;
    padding-right: 10px;
    border-style: solid;
    border: 2px solid #4CAF50;
}

#encrypt_info{
    padding-left: 10px;
    padding-right: 10px;
    border-style: solid;
    border: 2px solid #4CAF50;
}

#multiple_encryption_div{
    padding: 10px;
}


#contact_div{
    text-align: center;
    font-size: 18px;
    
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1));
}

.responsive_image{    
    max-width: 100%;
    height: auto;
}