body {
    background-color: rgb(27, 26, 26);
    margin: 0;
}

/* MENU */
.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 0;
}

.menuImage {
    height: 35px;
    width: 35px;
    background-color: rgb(207, 207, 207);
    padding: 7px;
    border-radius: 50%;
    margin: 10px;
    transition: background-color .5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 2;
}

.basketAnimation {
    animation: scaling .6s ease;
}

.removeAnimation {
    animation: none !important
}

@keyframes scaling
{
  0%{
    box-shadow: 0 2px 10px rgba(221, 221, 97, 0.616);
  }
  50%{
    box-shadow: 0 2px 20px rgb(221, 221, 97);
  }

  100%{
    box-shadow: 0 2px 10px rgba(221, 221, 97, 0.616);
  }
}

.menuImage img {
    height: 35px;
    width: 35px;
    padding: 7px;
    cursor: pointer;
}

.trolleyCount {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: fixed;
    z-index: 1;
    top: 10px;
    right: 15px;
    background-color: rgb(207, 141, 79);
    display: none;
    align-items: center;
    justify-content: center;
}

.menuHeader h4 {
    font-family: 'Dancing Script', cursive;
    color: #fff;
    font-size: 25px;
    margin: 0;
    text-shadow: 0 0 10px rgb(3, 3, 3);
}

.menuHeader {
    margin-left: 10px;
    margin-top: 10px ;
}

.trolleyMenuBlock {
    position: relative;
}

.closeTrolley {
    display: none !important;
}

.trolleyMenu {
    position: absolute;
    width: 400px;
    height: 300px;
    background-color: rgba(209, 208, 208, 0.233);
    backdrop-filter: blur(10px);
    right: 25px;
    top: 25px;
    border-radius: 20px;
}

.empty {
    display: flex;
    justify-content: center;
    align-items: center;
}

.empty h3 {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 30px;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
    text-align: center;
}

.eatingName {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
    text-align: center;
    margin: 5px 0;
    display: none;
}

.notEmptyTrolley {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    display: none;
    flex-direction: column;
    align-items: center;
}

.foodName {
    width: 220px;
}

.cost {
    width: 43px;
    margin-top: 5px;
}

.typeOfFoodItemBlock {
    display: flex;
    justify-content: center;
}

.typeOfFoodItem {
    display: flex;
    justify-content: space-between;
    width: 300px;
    flex-direction: column;
}

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

.typeOfFoodItem p {
    margin: 0;
    color: #fff;
    font-family: 'Nunito', sans-serif;
}



/* MAIN HEADER BLOCK */
.mainHeaderImage img {
    width: 400px;
}

.mainHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -12%;
}


.mySvg svg {
    background-image: url("images/foodOne.jpg");
    background-position: right bottom 37%;
    background-size: cover;
    overflow: hidden;
}

.mainHeaderText h2 {
    color: rgb(207, 141, 79);
    font-family: 'Dancing Script', cursive;
    font-size: 35px;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
    margin: 0;
}

.mainHeaderText h1 {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 40px;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
    margin: 0;
}

.mainHeaderText {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mainHeaderText p {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 19px;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
    margin-top: 0;
}

.btn {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    background-color: rgb(88, 88, 88);
    border: 1px solid rgba(255, 255, 255, 0.466);
    font-size: 17px;
    padding: 5px 20px;
    border-radius: 20px;
    transition: background-color .5s ease;
    cursor: pointer;
}

.btn:hover{
    background-color: rgb(207, 141, 79);
}

/* about us */

.aboutUsContainer {
    display: flex;
    justify-content: center;
    margin-top: 120px;
}

.aboutUsContainer img {
    height: 400px;
}

.aboutUsItem {
    height: 360px;
    width: 300px;
    padding: 10px;
    background-color: rgb(17, 14, 14);
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aboutUsItem p {
    text-align: center;
    font-size: 25px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
}

.blockHeaders h3 {
    margin: 0;
    font-size: 20px;
    color: rgb(207, 141, 79);
    font-family: 'Dancing Script', cursive;
    text-align: center;
}

.blockHeaders h2 {
    margin: 0;
    font-size: 32px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
}

.menuButtons img {
    width: 100px;
}

#cafeMenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120px;
}

.menuButtons {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.menuButtonsItem {
    display: flex;
    justify-content: space-around;
    width: 70%;
}

.menuItems {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menuItems p {
    font-size: 22px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
}

.menuItems img {
    cursor: pointer;
    border-radius: 50%;
}

/* FILLINGS */
.fillings {
    width: 100%;
    position: absolute;
    top: 0;
    display: none;
    justify-content: center;
}

.fillingsBackground {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.438);
    z-index: 1;
}

.fillingsContainer {
    width: 550px;
    height: 315px;
    position: fixed;
    z-index: 2;
    bottom: 40%;
    background-color: rgba(255, 255, 255, 0.685);
    backdrop-filter: blur(0.5px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
}

.closeBtn {
    position: fixed;
    top: -14%;
    right: -8%;
    background-color: rgba(255, 255, 255, 0.849);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.closeBtn img {
    width: 40px;
}

.fillingsItem {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 5px;
    background-position: center;
    background-size: cover;
    filter: brightness(75%);
    transition: box-shadow, filter .4s ease;
    cursor: pointer;
    box-shadow: inset 0 2px 10px rgb(0, 0, 0);
}

.selectedFood {
    filter: brightness(120%);
    box-shadow: 0 2px 10px #fff;
}


.fillingsAndCost h4{
    font-size: 15px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
    margin: 5px 0 0 0;
    text-align: center;
}

.fillings .without {
    background-color: rgba(255, 255, 255, 0.13);
}

.fillingsItems {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.fillingsAndCost {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: inherit;
    cursor: pointer;
}

.foodElement h2 {
    font-size: 30px;
    color: #fff;
    font-family: 'Dancing Script', cursive;
    margin-bottom: 0;
}

.fillingsItems p {
    font-size: 20px;
    font-family: 'Nunito', sans-serif;
    color: #fff;
    margin-top: 0;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
}

.foodElement h3 {
    font-size: 20px;
    font-family: 'Nunito', sans-serif;
    color: #fff;
}

.fillings h3 {
    font-size: 25px;
    color: #fff;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
}

.foodElement p {
    font-size: 15px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    margin:  0;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
}

.foodElement {
    width: 300px;
    height: 150px;
    overflow: hidden;
    padding: 5px;
    margin: 35px;
    -webkit-box-shadow: -3px -8px 4px -7px rgba(255, 255, 255, 0.4);
    -moz-box-shadow: -3px -8px 4px -7px rgba(255, 255, 255, 0.4);
    box-shadow: -3px -8px 4px -7px rgba(255, 255, 255, 0.4);
    position: relative;
}

.price {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.foodImageBlock {
    position: absolute;
    z-index: -1;
    top: 0;
}

.foodImage {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    position: absolute;
    left: 110px;
    bottom: -160px;
}

.croissantImg {
    background-image: url("images/croissant.jpg");
}

.aboutFood {
    display: flex;
    align-items: center;
}

.foodContainer {
    display: flex;
    flex-wrap: wrap;
    width: 65%;
    justify-content: space-between;
}

.menuContent {
    display: flex;
    justify-content: center;
}

.foodImageTwo {
    background-image: url("images/benedicts.jpg");
}

.foodImageOne{
    background-image: url("images/croissant.jpg");
}

.foodImageThree {
    background-image: url("images/porridge.jpg");
}

.foodImageFour {
    background-image: url("images/pancakes.jpg");
}

.selected {
    filter: brightness(110%) !important;
}

.selected img{
    box-shadow: 0 2px 10px #fff;
}

.menuItems {
    filter: brightness(50%);
    transition: box-shadow, filter .4s ease;
}

/* FILL IN ORDER */
.orderBlock {
    width: 100%;
    position: absolute;
    top: 0;
    display: none;
    justify-content: center;
}

.orderBackground {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.438);
    z-index: 1;
}

.orderModal {
    width: 550px;
    height: 315px;
    position: fixed;
    z-index: 2;
    bottom: 40%;
    background-color: rgba(255, 255, 255, 0.479);
    backdrop-filter: blur(3px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.closeOrderBtn {
    position: fixed;
    top: -14%;
    right: -8%;
    background-color: rgba(255, 255, 255, 0.849);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.closeOrderBtn img {
    width: 40px;
}

.orderModal h3, .successfullyModal h3 {
    font-size: 25px;
    color: #fff;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    margin-bottom: 0;
}

.orderModal label {
    font-size: 20px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
    text-align: center;
}

.orderModal p, .successfullyModal p {
    font-size: 15px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    text-shadow: 0 2px 10px rgb(0, 0, 0);
    text-align: center;
    margin-top: 0;
}

.orderModal p {
    margin-bottom: 0;
}

.orderModal form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.orderModal form div {
    display: flex;
    justify-content: space-between;
    width: 350px;
    padding: 5px;
    align-items: center;
}

.orderModal input{
    font-size: 15px;
    color: rgb(0, 0, 0);
    font-family: 'Nunito', sans-serif;
}

.orderCostsBlockTrolley {
    display: flex;
    justify-content: space-between;
    width: 300px;
}

.costsHeader {
    width: 220px;
}

.orderCostsBlockTrolley {
    font-size: 15px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
}

.successfullyBackground {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.438);
    z-index: 1;
}

.successfullyOrder {
    width: 100%;
    position: absolute;
    top: 0;
    display: none;
    justify-content: center;
}

.successfullyModal {
    width: 550px;
    height: 315px;
    position: fixed;
    z-index: 2;
    bottom: 40%;
    background-color: rgba(255, 255, 255, 0.479);
    backdrop-filter: blur(3px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.redBorder {
    border: rgb(211, 7, 7) 1px solid
}

.changeCount {
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.582);
    width: 60px;
    margin-right: 10px;
    padding: 5px;
    height: 20px;
    margin-top: 3px;
}

.changeCount p {
    margin: 0;
}

.addFoodOnBasket, .removeFood {
    width: 11px;
    cursor: pointer;
}

/* FOOTER */

.footer {
    background-color: rgb(29, 29, 29);
    box-shadow: 0 0 10px rgb(14, 13, 13);
    margin-top: 100px;
}

.contactInfo {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background-size: 100% ;
}

.numbers {
    display: flex;
}

.numbersItem {
    padding: 25px;
    text-align: center;
}

.phoneNumberStyle {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-family: 'Nunito', sans-serif;
}

.numberPar {
    color: white;
    font-size: 15px;
    font-family: 'Nunito', sans-serif;
}

.socialNetworkItem {
    padding: 15px;
}

.socialNetworkItemImg {
    height: 50px;
    border-radius: 14px;
    filter: grayscale(100%) opacity(70%);
}

.socialNetworkItemImg:hover {
    filter: none;
} 

.socialNetwork {
    display: flex;
    align-items: center;
}

.contactMe {
    color: #fff;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 30px;
    font-family: 'Nunito', sans-serif;
}


.contactMeBlock {
    display: flex;
    justify-content: center;
}

.contactMeLink {
    margin-left: 5px;
}

/* NEWS */
.newsItem img {
    width: 470px;
    box-shadow: 0 2px 5px;
}

.newsBlock {
    height: 450px;
    margin-top: 50px;
    text-align: center;
}

.newsBlockContainer {
    display: flex;
    justify-content: space-around;
    width: 100%;
    
}

.newsItem {
    position: relative;
    transition: all .8s ease;
    opacity: 0;
    top: 200px;
}

.newsText {
    width: 400px;
    height: 200px;
    background-color: rgba(39, 39, 39, 0.671);
    position: absolute;
    top: 190px
}

.newsTextBlock {
    position: relative;
    display: flex;
    justify-content: space-around;
}

.newsheader {
    display: flex;
    justify-content: space-around;
}

.eventBlockHeader {
    margin-bottom: 50px;
}

.newsheader h3 {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    margin-bottom: 0;
    text-shadow: 0 3px 10px rgb(0, 0, 0);
}

.infoAboutEvent {
    padding: 5px;
    margin: 0 20px;
}

.infoAboutEvent p {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    text-align: justify;
    text-shadow: 0 3px 10px rgb(0, 0, 0);
}

.eventDate {
    font-family: 'Dancing Script', cursive !important;
}

@media all and (max-width: 1415px) {
    .newsItem img {
        width: 400px;
    }

    .newsText {
        width: 350px;
    }
}

@media all and (max-width: 1210px) {
    .newsItem img {
        width: 350px;
    }

    .newsText {
        width: 300px;
        top: 120px;
    }

    .infoAboutEvent p {
        font-size: 15px;
        padding: 0;
    }

    .newsheader h3 {
        font-size: 17px;
    }
}

@media all and (max-width: 1170px) {
    .foodContainer {
        width: 90%;
    }

    .blockHeaders h2 {
        font-size: 25px;
    }

    .aboutUsItem p {
        font-size: 20px;
    }

    .newsItem img {
        width: 300px;
    }

    .newsText {
        width: 250px;
        height: 260px;
        top: 80px;
    }

}

@media all and (max-width: 910px) {
    .aboutUsContainer {
        position: relative;
    }

    .aboutUsContainer img {
        position: absolute;
        z-index: 0;
    }

    .imageOne {
        left: 60px;
    }

    .imageTwo {
        right: 60px;
    }

    .aboutUsItem {
        z-index: 1;
    }

    .foodElement {
        margin: 10px;
    }

    .newsItem img {
        width: 250px;
    }

    .newsText {
        width: 240px;
    }

    .fillingsContainer, .orderModal, .successfullyModal {
        top: 13%;
    }
}

@media all and (max-width: 740px) {
    .foodElement {
        width: 250px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .foodElement h2 {
        font-size: 20px;
        margin-top: 5px;
    }

    .foodElement p {
        font-size: 12px;
    }

    .foodElement h3 {
        font-size: 15px;
    }

    .btn {
        font-size: 15px;
    }

    .foodImage {
        bottom: -100px;
        width: 150px;
        height: 150px;
        left: 150px;
    }

    .phoneNumberStyle {
        font-size: 15px;
    }

    .numberPar {
        margin: 0;
    }

    .socialNetworkItem img {
        height: 30px;
    }

    .socialNetworkItem {
        padding: 10px;
    }

    .contactInfo {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .menuItems img {
        width: 70px;
    }

    .menuItems p {
        font-size: 15px;
    }

    .menuButtonsItem {
        margin-bottom: 20px;
    }

    .aboutUsItem {
        height: 250px;
        width: 210px;
        padding: 5px;
        margin: 5px;
    }

    .aboutUsContainer img {
        height: 270px;
    }

    .aboutUsItem p {
        font-size: 15px;
    }

    .aboutUsItem h2 {
        font-size: 15px;
    }

    .imageOne {
        left: 160px;
    }

    .imageTwo {
        right: 160px;
    }

    .newsItem img {
        width: 200px;
    }

    .newsText {
        width: 110%;
        top: -5px;
        height: 150px;
    }

    .infoAboutEvent p {
        font-size: 12px;
    }

    .infoAboutEvent {
        padding: 0;
        margin: 5px;
    }

    .newsBlock {
        height: 200px;
    }

    .aboutUsContainer, #cafeMenu {
        margin-top: 50px;
    }
}


@media all and (max-width: 650px) {
    .newsBlockContainer {
        flex-direction: column;
    }

    .newsBlock {
        height: 500px;
    }

    .newsItem {
        margin-top: 20px;
    }

    .newsheader, .infoAboutEvent {
        width: 70%;
    } 

    .infoAboutEvent p {
        font-size: 15px;
    }

    .newsText {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .eventBlockHeader {
        margin-bottom: 20px;
    }

    .menuForMobile {
        display: flex;
        align-items: center;
    }

    .menuButtonsItem {
        flex-direction: column;
    }

    .fillings {
        left: 0;
    }

    .fillingsContainer, .orderModal, .successfullyModal {
        width: 450px;
    }

    .fillingsContainer {
        height: 285px;
    }

    .closeBtn img, .closeBtn, .closeOrderBtn, .closeOrderBtn img {
        width: 30px;
        height: 30px;
    }

    .closeBtn, .closeOrderBtn {
        top: -10%;
        right: -5%;
    }

    .fillingsItem {
        width: 80px;
        height: 80px;
    }

    .imageOne {
        left: 60px;
    }

    .imageTwo {
        right: 60px;
    }

    .fillingsName h4 {
        font-size: 12px;
    }
}

@media all and (max-width: 500px) {
    .fillingsContainer, .orderModal, .successfullyModal {
        width: 380px;
    }

    .closeBtn img, .closeBtn, .closeOrderBtn, .closeOrderBtn img {
        width: 25px;
        height: 25px;
    }

    .closeBtn, .closeOrderBtn {
        top: -8%;
        right: -5%;
    }

    .fillingsItem {
        width: 80px;
        height: 80px;
    }

    .phoneNumberStyle, .numberPar {
        font-size: 12px;
    }

    .trolleyMenu {
        width: 300px;
        padding: 5px;
    }
}

@media all and (max-width: 400px) {
    .menuHeader h4 {
        font-size: 10px;
    }

    .newsText {
        height: 200px;
    }

    .newsItem {
        margin-top: 60px;
    }

    .newsBlock {
        height: 600px;
    }

    .imageOne {
        left: 20px;
    }

    .imageTwo {
        right: 20px;
    }

    .empty h3 {
        font-size: 20px;
    }

    .fillingsContainer, .orderModal, .successfullyModal {
        width: 300px;
    }

    .closeBtn img, .closeBtn, .closeOrderBtn, .closeOrderBtn img {
        width: 25px;
        height: 25px;
    }

    .fillingsContainer, .successfullyModal {
        height: 255px;
    }

    .orderModal {
        height: 195px;
    }

    .closeBtn, .closeOrderBtn {
        top: -13%;
    }

    .trolleyMenu, .typeOfFoodItem, .orderCostsBlockTrolley {
        width: 280px;
    }

    .fillingsItem {
        width: 50px;
        height: 50px;
    }

    .orderModal p {
        font-size: 12px;
    }

    .orderModal label, .orderModal input {
        font-size: 10px;
    }

    .orderModal form div {
        width: 100%;
    }

    .eventBlockHeader {
        margin-bottom: -40px;
    }

    .fillingsAndCost {
        width: 80px;
        padding: 3px;
    }
}

@media all and (max-width: 280px) {
    .foodContainer {
        width: 70%;
    }

    .menuContent {
        width: 215px;
    }

    .mainHeaderText h1 {
        font-size: 30px;
    }

    .mainHeaderText p {
        text-align: center;
        font-size: 15px;
    }

    .mainHeaderText h2 {
        font-size: 25px;
    }

    .foodElement {
        height: 130px;
    }

    .newsItem {
        margin-top: 90px;
    }

    .newsText {
        height: 250px;
    }

    .footer {
        margin-top: 270px;
    }
}