.head{
    background-image: url(https://avatars.mds.yandex.net/get-pdb/2883552/c88109b6-a6b5-4585-ba64-e7f8e19d09c3/s1200);
    background-repeat: no-repeat;
  background-size: cover;
  height: 980px; 
  margin-top: -70px;
}

.madina{
    font-family: 'Marck Script', cursive;
    margin: 12px 32px 12px 32px;
    font-size: 62px;
}
.text{
    margin-top: 42px;
}
.hd{
    background-color: black;
    position: sticky;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.hd a{
    color: white;
    text-decoration: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-family: 'Quicksand', sans-serif;
    color: #171d2d; 
}

.logo{
    font-family: 'Marck Script', cursive;
    font-size: 78px;
}
.logo .year{
    margin-top: -50px;
}
.fin{
    font-size: 25px;
}

.upIn{
    font-size: 12px;
    margin-bottom: 25px;
}
.upIn p{
    align-self: center;
    margin-right: 12px;
    margin-left: 12px;
}
.nextImg .ml-2{
    font-size: 15px;
    margin-top: 10px;
    margin-right: 500px;
    position: relative;
}
.upIn img{
    width: 500px;
    height: 400px;
}
.next{
    margin-top: -170px;
    margin-left: 400px;
}

.information {
    background-image: url(https://avatars.mds.yandex.net/get-pdb/2883946/997a2b63-f97e-4cb5-bccd-a2bcc9eced0b/s1200);
    color: white;
    text-align: center;
    font-family: 'Play', sans-serif; }
    .information img {
      max-width: 200px;
      max-height: 200px; }

.carousel-indicators {
    bottom: 100%;
    margin-bottom: 15px;
    text-align: center; }
    .carousel-indicators a{
        text-decoration: underline;
    }
  
  .menuCarousel {
    margin-bottom: 25px;
    font-family: 'Prosto One', cursive;
    background: url(https://avatars.mds.yandex.net/get-pdb/2883946/997a2b63-f97e-4cb5-bccd-a2bcc9eced0b/s1200); }
    .menuCarousel .carousel-inner {
      background: url(https://avatars.mds.yandex.net/get-pdb/2883946/997a2b63-f97e-4cb5-bccd-a2bcc9eced0b/s1200); }
    .menuCarousel .carousel-item {
      background: rgba(0, 0, 0, 0);
      transition: transform opacity .2s ease-in; }
    .menuCarousel .active a {
      background: #171d2d;
      color: white; }
    .menuCarousel .carousel-indicators {
      border-top: solid 2px #171d2d; 
    padding-top: 17px;}
      .menuCarousel .carousel-indicators img {
        width: 50px;
        height: 50px; }
     
  .midMenu {
    font-family: 'Play', sans-serif;
    margin-bottom: 45px;
    margin-top: 25px;
    color: #171d2d; }
    .midMenu p {
      margin-bottom: 55px;
      font-size: 80px; 
    }

.in{
    font-size: 25px;
}

footer{
    border-top: 1px solid black;
    font-size: 25px;
}
    footer a{
        text-decoration: underline
    }




    @media screen and (min-width: 320px) and (max-width: 800px) {
       
      
        .head{
          background-image: url(https://avatars.mds.yandex.net/get-pdb/2732355/5ebab9c8-93d2-44f9-8692-81293d498764/s1200);
          background-repeat: no-repeat;
          height: 200px;
          background-position: left;
          background-size: cover;
        margin-top: 0px; }
      
        .hd{
            text-align: center;
            font-size: 10px;
            margin-top: 1px;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .text{
            margin-top: 3px;
        }
        .madina{
            text-align: center;
            font-size: 17px;
            margin: 2px 3px 2px 3px;
        }

        .logo{
            font-family: 'Marck Script', cursive;
            font-size: 50px;
        }


        .fin{
            font-size: 17px;
        }
        
        .upIn{
            margin-left: 4px;
            font-size: 4px;
            margin-bottom: 25px;
        }
        
        .nextImg .ml-2{
            font-size: 5px;
            margin-top: 10px;
            margin-right: 100px;
            position: relative;
        }
        .upIn img{
            width: 150px;
            height: 100px;
        }
        .next{
            margin-top: -70px;
            margin-left: 110px;
        }





        .p {
          text-align: center;
          margin-top: -10px; }
      
        .information {
          max-width: 420px;
          height: 80px; }
          .information .info {
            max-width: 50px;
            height: 50px; }
          .information figcaption {
            font-size: 8px; }
      
        .menuCarousel {
          margin-top: -35px;
          max-width: 420px;
          height: 380px; }
          .menuCarousel .slide {
            max-width: 320px;
            height: 380px; }
          .menuCarousel .carousel-indicators {
            max-width: 420px;
            font-size: 10px; }
          .menuCarousel .carousel-inner {
            max-width: 420px;
            height: 380px; }
            .menuCarousel .carousel-inner .carousel-item {
              max-width: 420px;
              height: 380px; }
              .menuCarousel .carousel-inner .carousel-item img {
                max-width: 420px;
                height: 380px; }
                .in{
                    font-size: 15px;
                }
                
                footer{
                    border-top: 1px solid black;
                    font-size: 15px;
                }
                    footer a{
                        text-decoration: underline
                    }
                
        }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        
        .head{
            background-image: url(https://avatars.mds.yandex.net/get-pdb/2732355/5ebab9c8-93d2-44f9-8692-81293d498764/s1200);
            background-repeat: no-repeat;
            height: 500px;
            background-position: left;
            background-size: cover;
          margin-top: 0px; }
        
          .hd{
              text-align: center;
              font-size: 16px;
              margin-top: 5px;
              padding-top: 8px;
              padding-bottom: 8px;
          }
          .text{
              margin-top: 6px;
          }
          .madina{
              text-align: center;
              font-size: 22px;
              margin: 4px 6px 4px 6px;
          }
  
          .logo{
              font-family: 'Marck Script', cursive;
              font-size: 50px;
          }
  
  
          .fin{
              font-size: 17px;
          }
          
          .upIn{
              margin-left: 4px;
              font-size: 9px;
              margin-bottom: 25px;
          }
          
          .nextImg .ml-2{
              font-size: 10px;
              margin-top: 10px;
              margin-right: 270px;
              position: relative;
          }
          .upIn img{
              width: 370px;
              height: 250px;
          }
          .next{
              margin-top: -110px;
              margin-left: 280px;
          }
  
  
  
  
  
          .p {
            text-align: center;
            margin-top: -10px; }
        
          .information {
            max-width: 1224px;
            height: 80px; }
            .information .info {
              max-width: 50px;
              height: 50px; }
            .information figcaption {
              font-size: 8px; }
        
          .menuCarousel {
            margin-top: -35px;
            max-width: 1200px;
            height: 380px; }
            .menuCarousel .slide {
              max-width: 320px;
              height: 380px; }
            .menuCarousel .carousel-indicators {
              max-width: 420px;
              font-size: 10px; }
            .menuCarousel .carousel-inner {
              max-width: 420px;
              height: 380px; }
              .menuCarousel .carousel-inner .carousel-item {
                max-width: 420px;
                height: 380px; }
                .menuCarousel .carousel-inner .carousel-item img {
                  max-width: 420px;
                  height: 380px; }
                  .in{
                      font-size: 15px;
                  }
                  
                  footer{
                      border-top: 1px solid black;
                      font-size: 15px;
                  }
                      footer a{
                          text-decoration: underline
                      }
                  
          }