@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Jost:wght@700&family=Prompt:ital,wght@1,700&display=swap');
    

body {
    font-family: 'Comfortaa', sans-serif!important;
}

@media (min-width: 992px){
    .ps-lg-5 {
        padding-left: 15rem!important;
    }
}
@media (min-width: 992px){
    .pe-lg-5 {
        padding-right: 15rem!important;
    }
}

.header h1{
    font-family: 'Prompt', sans-serif;
    font-weight: 1700;
    font-size: 3rem;
    font-style: italic;
    display: inline;
    color: #DD9AC2;
    text-shadow: 0.09em 0.09em 0 #82667F;
    -webkit-text-stroke: 0.02em #270722;
}

.review {
    padding-bottom: 2rem;
}

.card {
    font-family: 'Comfortaa', sans-serif;
    box-shadow: 0.5em 0.5em 0 #C2C6A7;
    border: solid 0.1em #270722;
}

input[type=checkbox]{
    box-shadow: 0.2em 0.2em 0 #C2C6A7;
    border: solid 0.1em #270722;
}

input[type=checkbox]:checked {
    background-color: #f5f5f5!important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")!important;
    box-shadow: 0.2em 0.2em 0 #C2C6A7;
    border: solid 0.1em #270722;
}

input[type=checkbox]:focus {
    background-color: #f5f5f5!important;
    box-shadow: 0.2em 0.2em 0 #C2C6A7;
    border: solid 0.1em #270722;
}

.user .card {
    box-shadow: 0.5em 0.5em 0 #C2C6A7;
    border: solid 0.1em #270722;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.modal-open .container-fluid,  .modal-open  .container {
}

.review .card {
    box-shadow: 0.5em 0.5em 0 #C2C6A7;
    border: solid 0.1em #270722;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.review {
    font-family: 'Comfortaa', sans-serif;
}
.review h2, .modal-title{
    font-family: 'Jost', sans-serif;
}

a {
    display: inline-block;
    transition: transform .35s ease;
    text-decoration: none;
}
a:hover{
    text-decoration: none;
    transform: translateY(-2px);
}

.tag {
    display: inline-block;
    font-size: small;
    border-radius: 11.5em;
    padding: 0.3846153846em 0.6153846154em;
    transition: transform .35s ease;
    color: white;
    text-decoration: none;
}
.tag:hover{
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.jednorazova {
    background-color: #C39BD3;
}

.liquid {
    color: #fff;
    background-color: #4062BB;
}

.liquid:hover {
    color: #fff;
}

.cartridge {
    background-color: #F45B69;
}

.rate {
    display: inline-block;
    border: 0;
}

.rate > input {
    display: none;
}

.rate > label {
    float: right;
}

.rate > label:before {
    display: inline-block;
    font-size: 2rem;
    padding: .3rem .2rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome;
    content: "\f005 ";
}

.rate .half:before {
    content: "\f089 ";
    position: absolute;
    padding-right: 0;
}

.btn-custom, .btn-custom:hover {
    font-family: 'Comfortaa', sans-serif!important;
    box-shadow: 0.3em 0.3em 0 #C2C6A7!important;
    border: solid 0.1em #270722!important;
}

.btn-custom {
    transition: transform .35s ease;
}

.btn-custom:hover {
    transform: translateY(-2px);
}

.modal {
    box-shadow: 0.5em 0.5em 0 #C2C6A7!important;
    border: solid 0.1em #270722!important;
}

:not(.input-group) > .form-control, .form-select {
    background-color: #f5f5f5!important;
    box-shadow: 0.3em 0.3em 0 #C2C6A7;
    border: solid 0.1em #270722!important;
}

.input-group > .form-control, .input-group > .input-group-text {
    font-family: 'Comfortaa', sans-serif!important;
    border-radius: 0.375rem;
    background-color: #f5f5f5!important;
    box-shadow: 0.3em 0.3em 0 #C2C6A7;
    border: solid 0.1em #270722!important;
}
.input-group > .form-control {
    font-family: 'Comfortaa', sans-serif!important;
    z-index: 99;
}

input, textarea, .form-select, option, select {
    font-family: 'Comfortaa', sans-serif!important
}

.input-group > .input-group-text {
    font-family: 'Comfortaa', sans-serif!important;
    z-index: 100;
}

.form-label {
    font-family: 'Jost', sans-serif;
}

@media (max-width: 767.98px) { 
    .review .image {
        padding-bottom: 2rem;
    }
 }


.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: orange; }

.rate input:checked + .rate label:hover, .rate input:checked ~ .rate label:hover, .rate input:checked ~ .rate label:hover ~ label, .rate label:hover ~ input:checked ~ label { color: #ffd51c; }