.container {
    text-align: center;
}

.characters {
    margin-bottom: 20px;
	  display: flex;
	  flex-wrap: wrap;
    justify-content: center;
}

.character-btn {
    padding: 10px 20px;
    margin: 0 5px;
    font-size: 16px;
    cursor: pointer;
}
button.character-btn img {
    max-height: 30px;
    margin-left: 5px;
}
#race-track {
    position: relative;
    width: 800px;
    height: 800px;
	  margin: auto;
    margin-top: 20px;
    overflow: hidden;
}

#track-image {
    width: 100%;
    height: auto;
}

.character {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #ff0000;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
}

#character1 {
    background-color: #ff0000;
	  background-image: url(https://veselogames.ru/wp-content/uploads/2024/08/Крышка-в-танце.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0px;
}

#character2 {
    background-color: #00ff00;
	  background-image: url(https://veselogames.ru/wp-content/uploads/2024/08/Влюбленная-банка.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0px;
}

#character3 {
    background-color: #0000ff;
	  background-image: url(https://veselogames.ru/wp-content/uploads/2024/08/Злой-хмель.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0px;
}

#character4 {
    background-color: #ff00ff;
	  background-image: url(https://veselogames.ru/wp-content/uploads/2024/08/Бутылка-в-танце.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0px;
}

button.character-btn {
    border-radius: 10px;
    border: 2px solid #fff;
    background: #ff0000;
    color: #ffffff;
    font-weight: 600;
}
button.character-btn.cb2 {
    border: 2px solid #fff;
    background: #00ff00;
    color: #ffffff;
}
button.character-btn.cb3 {
    border: 2px solid #fff;
    background: #0000ff;
    color: #ffffff;
}
button.character-btn.cb4 {
    border: 2px solid #fff;
    background: #ff00ff;
    color: #ffffff;
}
button.character-btn.cb1.selected {
    border-color: #ff0000;
}
button.character-btn.cb2.selected {
    border-color: #00ff00;
}
button.character-btn.cb3.selected {
    border-color: #0000ff;
}
button.character-btn.cb4.selected {
    border-color: #ff00ff;
}
#result {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
	  min-height: 20px;
}
button#start-race {
    background: #4CAF50;
    color: #ffffff;
    border: 2px solid #4CAF50;
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 20px;
    font-weight: 600;
}
@media (max-width: 821px) {
 .container {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
 }
 #race-track {
    position: relative;
    width: 800px;
    height: 800px;
    margin: auto;
    margin-top: 20px;
    overflow: hidden;
    zoom: 42%;
  }
	button.character-btn.cb2 {
    margin-bottom: 15px;
  }
	.djo-blog--single-wrapper .djo-blog--single__top-content+.djo-blog--single__post-content {
    margin-top: 0px;
  }
	button.character-btn {
    min-width: 192px;
    max-height: 54px;
    margin-bottom: 10px;
  }
}