*{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            background-image: url(../img/bg1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            height: 100%;
        }
        .container{
            margin: 0 auto;
            display: flex;
            font-family: 'Times New Roman', Times, serif;
            align-items: center;
            justify-content: center;
        }
        .calendar{
            margin-top: 200px;
            position: relative;
            height: 370px;
            width: 570px;
            background-repeat: 25px;
            background-color: rgba(255, 255, 255, 0.2);
            background-repeat: 25px;
            backdrop-filter: blur(5px);
            border: 2px solid rgb(202, 153, 195);/*подобрать цвет*/
            border-radius: 15px;
            box-shadow: 0 0 80px rgb(60, 43, 65);
            overflow:hidden;
            padding: 0 15px;
        }
        .calendar__flex{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .calendar__left{
            font-family: "Dancing Script", cursive;
            font-optical-sizing: auto;
            font-style: normal;
            font-size: 54px;
            width: 230px;
            text-align: center;
            color: #733236;
        }
        .calendar__header{
            display: flex;
            justify-content: space-between;
            align-content: center;
            padding: 3px 0 25px;
            color: #733236;
            font-weight: bold;
        }
        .calendar__btns{
            display: flex;
            gap: 245px;
        }
        .calendar__btn{
            background: none;
            border: none;
            cursor: pointer;
            transition: opacity 0.1s;
        }
        .calendar__btn img{
            width: 29px;
            height: 50px;
        }
        .calendar__btn:hover{
            opacity: 0.7;
        }
        .calendar__monthYear-media{
            
            display: none;
        }
        .calendar__names-day,
        .calendar__days{
            display: grid;
            grid-template-columns: repeat(7,1fr);
            text-align: center;
            margin-bottom: 10px;
        }
        .calendar__names-day span{
            font-style: 16px;
            color: #fff;
        }
        .calendar__days span{
            row-gap: 5px;
            text-align: center;
        }
        .calendar__days span:not(.calendar__days-hidden){
            cursor: pointer;
            width: 40px;
            height: 40px;
            color: #733236;
            display: flex;
            align-items: center;
            font-size: 20px;
            border-radius: 50%;
            transition: background-color 0.1s;
            justify-content: center;
        }
        .calendar__days span.today{
            background-color: #9d7982;
            color: #fff;
            font-weight: bold;
            border-radius: 50%;
        }
        .calendar__days span:not(.calendar__days-hidden):hover{
            background-color: #9d7982;
        }
        @media screen and (max-width:600px){
            .calendar{
                max-width: 340px;
            }
            .calendar__left{
                display: none;
            }
            .calendar__monthYear-media{
                display:flex;
                font-family: 'Pacifico';
            font-optical-sizing: auto;
            font-style: normal;
            font-size: 36px;
            width: 245px;
            display: flex;
            justify-content: space-between;
            gap: 5px;
            }
            .calendar__btns{
            gap: 0px;
            }
            .calendar__header{
                padding-bottom: 17px;
            }
            .calendar__days span:not(.calendar__days-hidden){
            color: #fff;
            }
        }