.mono {
     font-family: "DM Mono", monospace;
     letter-spacing: 0.325ch;
 }

 .sans {
     font-family: "DM Sans", sans-serif;
 }

 .serif {
     font-family: "Fraunces", serif;
 }

 * {
     box-sizing: border-box;
 }

 .sidebar {
     display: none;
 }

 body {
     margin: 0;
     background-color: hsl(342, 100%, 98%);
 }

 nav {
     justify-content: space-between;
     display: flex;
     margin-top: 2px;
     align-items: center;
 }

 .logo {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }


 .title {
     line-height: 10px;
 }


 .btn-outline {
     height: 33px;
     width: 33px;
     display: flex;
     justify-content: center;
     align-items: center;
     padding-top: 2px;
     background-color: hsl(342, 100%, 98%);
     border: 1px solid hsl(36, 22%, 86%);
     border-radius: 4px;
     margin-top: 10px;

 }

 .orange {
     color: hsl(15, 69%, 37%);
 }

 .confirmation {
     padding-left: 20px;
 }

 .booking-confirmation {
     color: rgb(108, 107, 107);
     font-size: xx-small;
     line-height: 22px;
 }


 .venu {
     display: flex;
     margin-top: -30px;
 }

 .lucia {
     color: hsl(15, 69%, 37%);
     padding-left: 7px;
 }

 .button-list {
     padding-left: 15px;
 }

 .btn {
     border-radius: 20px;
     border: 1px solid hsl(37, 6%, 75%);
     padding: 5px 10px;
     cursor: pointer;
 }

 .button-1 {
     background-color: #FFFFFF00;
 }

 .button-2 {
     background-color: hsl(33, 15%, 15%);
     color: white;
 }

 .cards {
     padding-top: 40px;
     /* padding: 19px; */

 }


 .welcome-card {
     background: linear-gradient(hsl(22, 72%, 56%), hsl(15, 74%, 41%));
     width: 100%;
     padding: 19px;
     border-radius: 18px;
     overflow: hidden;
     color: hsl(0, 0%, 100%);
     box-sizing: border-box;
     box-shadow: 0px 10px 20px hsl(22, 100%, 75%);
     transform: rotate(2deg);
     display: flex;
     flex-direction: column;
 }

 .welcome-card .card-name {
     font-weight: 120;
     letter-spacing: 0px;
     margin-top: -2px;
 }

 .welcome-card .notice {
     font-size: smaller;
     padding-top: 13px;
 }

 .welcome-card .image {
     display: flex;
     justify-content: space-between;
 }

 .welcome-card .note {
     margin-top: 20px;
     color: hsl(42, 83%, 58%);
     font-weight: 300;
     padding: 2px;
 }

 .welcome-card .name {
     color: hsl(35, 60%, 96%);
     line-height: 2px;
 }

 .welcome-card .room {
     margin-top: auto;
     padding-bottom: 0px;
     font-weight: 100;
     color: hsl(0, 0%, 100%, 50%)
 }


 .welcome-card .place {
     font-size: medium;
     font-weight: 400;
 }

 .welcome-card .dotted-line {
     border: 1px dashed hsl(18, 62%, 47%);
     border-width: 1px;
 }

 .receipt-card {
     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(40, 60%, 98%);
     border-radius: 20px;
     width: 100%;
     margin-top: 16px;
     box-shadow: 3px 4px 4px hsl(30, 1%, 71%);
     padding-left: 9px;
     transform: rotate(-2deg);

 }

 .receipt {
     display: flex;
     justify-content: space-between;
     letter-spacing: 0px;
 }

 .stay {
     padding: 19px;
     line-height: 7px;
     font-weight: 300;
 }

 .location {
     padding: 12px;
     line-height: 17px;
     font-size: x-small;
     color: hsl(30, 1%, 71%);

 }

 .line {
     border: 1px dashed hsl(30, 1%, 71%);
     margin-top: 3px;
     margin-top: -22px;
 }

 .check-time {
     display: flex;
     justify-content: space-between;
     padding: 10px;

 }

 .check {
     margin-top: -4px;
     letter-spacing: 0px;
     font-weight: 400;
 }

 .date {
     margin-top: -7px;
     font-weight: 700;
 }

 .day {
     margin-top: -15px;
     color: hsl(0, 0%, 19%);
     display: flex;
     letter-spacing: 0px;
 }

 .check-out {
     margin-top: -6px;
 }

 .check-3 {
     margin-top: 2px;
     display: flex;
     letter-spacing: 0px;
     font-weight: 400;
 }

 .time-2 {
     display: flex;
     color: hsl(0, 0%, 19%);

 }

 .month {
     line-height: 10px;
 }

 .dash {
     border: 1px dashed hsl(36, 22%, 86%);
     margin-top: -15px;
 }

 .bill {
     display: flex;
     justify-content: space-between;
     font-size: small;
     line-height: 25px;
     margin-top: -5px;
 }



 .paid-bill {
     margin-top: 3px;
     display: flex;
     justify-content: space-between;
     line-height: 30px;
 }

 .amount {
     margin-top: -7px;
     font-family: sans-serif;
     color: hsl(0, 0%, 19%);
     padding-left: 10px;
 }

 .cash {
     margin-top: -22px;
     line-height: 16px;
     padding-right: 10px;
 }



 .icon {
     display: flex;
 }

 .digit-1 {
     padding-top: 18px;
     padding-left: 110px;
     color: hsl(15, 74%, 41%);
     font-size: large;
 }

 .check-from {
     display: flex;
     font-size: large;
     padding: 8px;
 }

 .time {
     margin-top: -25px;
     color: hsl(0, 0%, 19%);
     padding-left: 10px;
     font-size: small;
     letter-spacing: 0px;
     font-weight: 100;
 }

 .details {
     color: hsl(0, 0%, 40%);
     line-height: 16px;
     font-size: small;
     padding-left: 10px;
     padding-right: 2px;
 }


 .soleil {
     padding-left: 10px;
     font-weight: 400;
 }

 .password-1 {
     color: hsl(0, 0%, 19%);
     margin-top: -15px;
     padding-left: 10px;
     letter-spacing: 0px;
     font-weight: 50px;
     font-size: smaller;
 }

 .net {
     display: flex;
     justify-content: space-between;
 }

 .network {
     border: 1px solid hsl(0, 10%, 94%);
     background-color: hsl(0, 10%, 94%);
     display: flex;
     justify-content: space-between;
     border-radius: 6px;
     padding: 2px;
     letter-spacing: 0px;
     font-weight: 300;
     color: rgb(59, 59, 59);
     margin-top: -10px;
     letter-spacing: 0px;
 }

 .box {
     padding-bottom: 6px;
 }


 .wise {
     margin-top: -1px;
 }

 .barcode {
     margin-top: -22px;
 }

 .guest {
     display: flex;
     justify-content: space-between;
     font-size: small;
 }

 .password {
     display: flex;
     justify-content: space-between;
     background-color: hsl(0, 4%, 95%);
     border: 1px solid hsl(0, 10%, 94%);
     margin-top: 5px;
     border-radius: 6px;
     padding: 2px;
     font-weight: 300;
     color: rgb(59, 59, 59);

 }





 .button-4 {
     font-size: smaller;
     border-radius: 10px;
     border: hsl(0, 1%, 74%) 1px solid;
     background-color: hsl(0, 10%, 94%);
 }

 .service {
     margin-top: -10px;
     padding-left: 10px;
 }

 .place-2 {
     font-size: small;
     color: hsl(0, 0%, 40%);
     padding-left: 10px;
 }

 .detail {
     padding-left: 7px;
     line-height: 16px;
     color: hsl(0, 0%, 40%);
     font-size: small;
 }

 .check-3 {
     color: hsl(0, 0%, 19%);
     display: flex;
 }

 .tax {
     letter-spacing: 0px;
 }

 .blogs {
     padding: 19px;
 }

 .asset {
     margin-left: 6px;
     background-color: rgb(112, 110, 110);
     padding: 2px;
     height: 34px;
     width: 35px;
     display: flex;
     justify-content: center;
     border-radius: 8px;
     margin-top: 10px;

 }

 .blog {
     background-color: hsl(0, 0%, 100%);
     width: 100%;
     margin-top: 23px;
     border: 1px solid hsl(0, 1%, 74%);
     box-shadow: 0px 10px 20px hsl(0, 1%, 74%);
     border-radius: 10px;

 }

 .icon {
     display: flex;
     justify-content: space-between;
 }

 .flex {
     display: flex;
     margin-top: 5px;
     gap: 10px;
 }

 .text-pink {
     color: hsl(340, 48%, 52%);
     letter-spacing: 0px;
 }

 .text-red {
     color: hsl(15, 69%, 37%);
     letter-spacing: 0px;
 }

 .text-blue {
     color: hsl(230, 49%, 56%);
     letter-spacing: 0px;
 }

 .bg-pink {
     background-color: hsl(340, 48%, 52%);
 }

 .bg-red {
     background-color: hsl(15, 69%, 37%);
 }

 .bg-blue {
     background-color: hsl(230, 49%, 56%);
 }

 .text {
     padding-top: 12px;
     padding-right: 8px;

 }

 .bar {
     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(36, 22%, 86%);
     padding: 8px;
     letter-spacing: 0px;
 }

 .bar-2 {
     padding: 12px;
     letter-spacing: 0px;
 }

 .box-3 {
     background-color: hsl(44, 84%, 75%);
     display: flex;
     justify-content: space-between;
     padding: 18px;
     line-height: 16px;
     border-radius: 15px;
     box-shadow: 0px 4px 4px hsl(44, 84%, 75%);
     margin-bottom: 18px;
     position: relative;
     overflow: hidden;
 }

 .icon-sun {
     position: absolute;
     right: -15px;
     top: -25px;
 }

 .dashed {
     border: 1px dashed hsl(36, 22%, 86%);
     margin-top: 30px;
 }

 .bottom {
     letter-spacing: 0px;
     color: hsl(0, 0%, 53%);
     font-size: small;
 }

 .year {
     line-height: 35px;
 }

 @media screen and (min-width: 768px) {
     header {
         height: 100vh;
         display: flex;
         flex-direction: column;
     }

     .sidebar {
         height: 100%;
         display: flex;
         flex-direction: column;
         width: 100%;
     }

     nav {
         display: none;
     }

     .booking {
         display: flex;
         justify-content: space-between;
     }

     .button-list {
         margin-top: 19px;
     }

     .btn {
         padding: 8px 12px;
     }

     .text {
         display: flex;
         justify-content: space-between;
     }

     .cards {
         width: 740px;
         display: flex;
         height: 500px;
         margin: 0 auto;
         flex-direction: row-reverse;
     }

     .receipt-card {
         margin-top: -4px;
         transform: rotate(-4deg);
     }

     .welcome-card {
         transform: rotate(5deg);
         z-index: 2;
     }

     .blogs {
         display: flex;
         gap: 20px;
         height: 280px;
     }

     body {
         display: flex;
     }


     nav {
         display: flex;
         justify-content: space-between;
     }

     .container {
         width: 100%;
         height: 100vh;
         overflow: auto;
     }

     .network {
         margin-top: 25px;
     }

     .box-3 {
         width: 290px;
         margin-top: auto;
     }

     .text {
         font-size: large;
     }

 }