*{box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    scrollbar-color: red black;
    }

body{
    background-color: #000;
}

/******************************************************************Navbar**************************************************************************/
    
.navbar{background: #000;
        width: 100%;
        justify-content: center;
        align-items: center;
        height: 80px;
        position: sticky;
        display: flex;
        top: 0;
        z-index: 999;
        }
       
        .navbar__container{justify-content: center;
        padding: 0 50px;
        height: 80px;
        margin: 0 auto;
        width: 100%;
        max-width: 1300px;
        z-index: 1;
        display: flex;
        }
       
      
       
       
        .navbar__menu{text-align: center;
        align-items: center;
        list-style: none;
        display: flex;
        gap: 20px;
        }
       
        .navbar__item{height: 40px;}
       
        .navbar__links{color: #f8f8f8;
        align-items: center;
        justify-content: center;
        padding:  5px 2rem;
        text-decoration: none;
        height: 100%;
        display: flex;
        background: #c31a1a;
        border-radius:45px;
        text-align: center;
        width: 100%;
        font-size: 1.2rem;
        }

        #logo, .navbar__container{
            width: 20%;
            cursor: pointer;
        }
   
   
        .navbar__links:hover{background: #000;
            color: #fff;
        transition: all 0.5s ease;
        }

        .back_video{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            width: 100%;
            height: auto;
        }



        .heading h1{
            color: #fff;
            text-align: center;
            font-size: 5.5rem;
            margin-top: 20%;
        }

        .socials{
        display: flex;
        gap: 25px;
        font-size: 30px;
        margin-top: 1%;
        justify-items: center;
        justify-content: center;
    }

    
    .fa {height: 50px;
        padding:  5px;
        width: 50px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        border:5px solid #ffffff;
        float: left;
        cursor: pointer;
      }
     
    
     
      .fa-instagram {
        color: rgb(255, 255, 255);
        }
     
     
      .fa-twitter {
        color:  rgb(255, 255, 255);
      }
     
      .fa-youtube{
        color: rgb(255, 255, 255);
      }

      .fa-paypal{
        color: rgb(255, 255, 255);
      }
     

      .fa:hover{background:#c31a1a;
        color: #fff;
      transition: 0.15 ease;
      }
     

   /*****Paintings****/

        .paintings{
            height: 55vh;
            width: 100%;
            background-size: cover;
            position: relative;
        }

        .paintings h1{
            color: #fff;
            margin-top: 22%;
            text-align: center;
            background-color: #c31a1a;
            font-size: 1.5rem;
        }

        .paintings_container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 2% 1% 0 1%;
        overflow-x: hidden;
        }

        .paintings_row{
        display: flex;
        flex-direction: row;
        gap: 5px;
        padding: 5px;
        }

        .paintings img{
            width: 20%;
            max-width: 1200px;
            object-fit: cover;
        }

/******Digital Art*******/

        .digitalart{
            height: 295vh;
            width: 100%;
            background-size: cover;
            position: relative;
            justify-content: center;
        }

        .digitalart h1{
            color: #fff;
            margin-bottom: 3%;
            margin-top: 5%;
            text-align: center;
            background-color: #c31a1a;
            font-size: 1.5rem;
        }

        .digitalart_container{
         display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0 1% 0 1%;

        }

        .digitalart_column{
        display: flex;
        flex-direction: column;
        gap: 25px;
        }

        .digitalart_container img{
            width: 95%;
            max-width: 1200px;
            object-fit: cover;
            border-radius: 5px;
        }

/************Crochet*************/

         .crochet{
            height: 55vh;
            width: 100%;
            background-size: cover;
            position: relative;
        }

        .crochet h1{
            color: #fff;
            margin-top: 22%;
            text-align: center;
            background-color: #c31a1a;
            font-size: 1.5rem;
        }

        .crochet_container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 2% 1% 0 1%;
        overflow-x: hidden;
        }

        .crochet_row{
        display: flex;
        flex-direction: row;
        gap: 5px;
        padding: 5px;
        }

        .crochet img{
            width: 20%;
            max-width: 1200px;
            object-fit: cover;
        }


          .footer{
        height: 30%;
        background-color: #8d1515;
        color: #fff;
        text-align: center;
        width: 100%;
    }

    .footer img{
        width: 1%;
        border-radius: 50%;
    }

    .footer a{
        color: #fff;
    }

    
@media screen and (max-width: 1024px){
    #logo{width: 20%;
    margin-left: -20%;}
    .navbar__links{padding: 0 20px;
    font-size: 25px;
    margin-left: -15%;
    }
    .back_video{height:90vh;}
    .heading h1{
        font-size: 70px;
        margin-top: 25%;
    }
    .socials, .fa, .fa-instagram{color: #fff;}
    .paintings{
        height: 35vh;
    }
    .paintings h1{
        margin-top: 20%;
    }
    .digitalart{
        height: 190vh;
    }
    .footer{
        height: 40vh;
        padding-top: 10%;
    }
    }

@media screen and (max-width: 768px){
    #logo{width: 20%;
    margin-left: -20%;}
    .navbar__links{padding: 0 20px;
    font-size: 25px;
    margin-left: -15%;
    }
    .back_video{height:80vh;}
    .heading h1{
        font-size: 70px;
        margin-top: 20%;
    }
    .socials, .fa, .fa-instagram{color: #fff;}
    .paintings{
        height: 30vh;
    }
    .paintings h1{
        margin-top: 25%;
    }
    .digitalart{
        height: 165vh;
    }
    .footer{
        height: 50vh;
        padding-top: 10%;
    
    }
    }

@media screen and (max-width: 480px){
    #logo{width: 20%;
    margin-left: -20%;}
    .navbar__links{padding: 0 3px;
    font-size: 15px;
    margin-left: -15%;
    }
    .back_video{height:50vh}
    .heading h1{
        font-size: 30px;
       margin-top: 20%;
    }
    .socials, .fa, .fa-instagram{color: #fff;}
    .paintings{
        height: 25vh;
    }
    .paintings h1{margin-top: 15%;}
    .digitalart{
        height: 120vh;
    }
    .footer{
        height: 40vh;
    }
    }

@media screen and (max-width: 320px){
    #logo{width: 20%;
    margin-left: -20%;}
    .navbar__links{padding: 0 3px;
    font-size: 15px;
    margin-left: -15%;
    }
    .back_video{height:50vh}
    .heading h1{
        font-size: 30px;
    }
    .socials, .fa, .fa-instagram{color: #fff;}
    .paintings{
        height: 20vh;
    }
    .digitalart{
        height: 100vh;
    }
    .footer{
        height: 50vh;
    }
    }

    @media screen and (max-width: 200px){
    #logo{width: 50%;
    margin-left: -20%;}
    .navbar__links{padding: 0 0.1px;
    font-size: 5px;
    margin-left: -15%;
    }
    .back_video{height:40vh}
    .heading h1{
        font-size: 30px;
    }
    .socials, .fa, .fa-instagram{color: #fff;}
    .paintings{
        height: 20vh;
    }
    .digitalart{
        height: 100vh;
    }
    .footer{
        height: 40vh;
    }
    }