:root{
    --primary-color:#ca469d;
    --grey-color: rgb(237, 241, 253);
    --white-color:#fefefe;
    --black-color:#000;
    --button-color-green:#5bca46;
    --border-brown:#ca7346;
}
body{
    min-height: 100vh;
    background-image: url(../img/background.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
}
#formulare{
    background-color: var(--white-color);
    border-radius: 5px;
    border: 1.6px var(--black-color) solid;
}
.progress-bar{
    background-color: var(--primary-color);
}
.question-container{
    width: 50%;
}
.question-text{
    margin: 25px 0;
    font-weight: bold;
}
.checkbox-btn{
    display: block;
    padding: 11px;
    margin: 8px 0;
    border: 0.5px solid var(--white-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    transition: 0.3s;
    
}
.checkbox-btn:hover{
    border-color: var(--primary-color);
}
.checkbox-btn:has(input:checked){
    background-color: var(--primary-color);
    color: var(--white-color);
}
.welcome-msg{
    background-color: var(--grey-color);
    padding: 5px;
    border-radius: 5px;
    border-left: var(--border-brown) inset;
}
.welcome-msg p {
    margin-left: 2px;
    margin-top: 4px;
}
.btn-container{
    height: 50px;
}
.color-circle {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%; /* makes it round */
  cursor: pointer;
  margin: 5px;
  border: 2px solid transparent;
  transition: transform 0.2s, border 0.2s;
}
.color-outline-radio{
    border: 1px solid var(--black-color)
}
.color-outline-radio:hover{
    background-color: var(--primary-color);
    color: var(--white-color);
}
/* Highlight when selected */
.color-radio:checked + .color-circle {
  border: 3px solid var(--button-color-green);
}
.form-check-input:checked + label {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}
.cancel-button{
    color:red;
}
.primary-color-b{
    color: var(--primary-color);
}
.return-btn{
    background-color: var(--primary-color);
    color: #fefefe;
}
.return-btn:hover,
.return-btn:focus,
.return-btn:active{
    background-color: var(--primary-color);
    color: #fefefe;
    outline: none;
}
#done-logo{
    color: var(--button-color-green);
}
a{
    text-decoration: none;
    color: var(--black-color);
}
.w-75-custom{
    width: 75%;
}
@media (max-width: 426px) {
  .w-75-custom {
    width:90%;
  }
}
#logo{
    width: 90px;
    height: 90px;
}