html{
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    background-image: url("img/Julkalender_Majblomman X Stromberg_2025_Mobil_Final_v2.png");
    background-position: center bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
@media (min-width: 768px) {
    html {
        background-image: url("img/Julkalender_Majblomman X Stromberg_2025_Desktop_Final.png");
    }
}
body {
    background-color:unset;
    padding-bottom: 50px;
}
#startContent {
    padding-top:50px;
    
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #startContent {
        background-position: bottom left;
        padding-top:0px;
    }
}

.calendar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

.door {
  width: 50px;
  height: 50px;
  perspective: 1000px;
  cursor: pointer;
  border-radius: 4px;
}

.front, .back {
  width: 50px;
  height: 50px;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  border: 1px dashed #ccc;
  /*background-color: #f2f2f2;*/
  color: #f2f2f2;
  border-radius: 4px;
}
.back {
    border: 2px solid #ccc;
}

@media (min-width: 768px) {
    .door {
        width:100px;
        height:100px;
    }
    .front, .back {
        width:100px;
        height:100px;
    }
}

.front {
  transform: rotateY(0deg);
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
  background-color: #ffe;
}

.fade-scale {
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
}

.fade-scale.show {
  opacity: 1;
  transform: scale(1);
}

.form-floating>label {
    color: rgba(var(--bs-body-color-rgb), .65);
}
#dvTopBar .bg-light {
    background: #9b2a2a !important;
    border-bottom: 3px solid #419a6a !important;
}
#dvTopBar .bg-light, #dvTopBar .bg-light a, #dvTopBar .bg-light i {
    color:#FFF!important;
}

.btn-jul {
  background-color: #B22222; /* Firebrick */
  color: #fff;
  border: none;
}

.btn-jul:hover {
  background-color: #8B0000!important; /* Dark Red */
  color: #fff!important;
}



.christmas-modal {
    background: #FFF;
    /*background-image:url("img/Julkalender_Majblomman X Stromberg_2025_Pop-up.png");*/
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
}

.christmas-modal .modal-header {
  
}

.christmas-modal .modal-footer {
  
}

.christmas-modal img {

}
.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-icon);
}
blockquote {
    margin-top: 40px;
    margin-bottom: 50px!important;
}

/* Klass för passerade datum */
.passed {
  cursor: default;
  opacity: 0.6;
  /*transform: scale(0.95);*/
}

.passed .front {
  background-color: #243931;
  color: #999;
  border: 1px dashed #bbb;
}

.passed .back {
  background-color: #fafafa;
  border: 2px dashed #bbb;
}


.splash {
    background: linear-gradient(135deg, #9b2a2a 0%, #d74b44 100%);
    color: white;
    text-align: center;
    padding: 30px 20px;
    border-radius: 4px;
}
.splash h1 {
    font-size: 4rem;
    font-weight: 700;
}
.splash .amount {
    font-size: 3rem;
    font-weight: 600;
    margin-top: 20px;
}