styles.css

 .square{
    height: 200px;
    width: 200px;
    background-color: black;
 }

 .circle{
 height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: blue;
 }

 .parallelogram{
    height: 200px;
    width: 150px;
    margin: 3%;
    transform: skewX(-20deg);
    background-color: brown;
 }

 .triangle{
    height: 0;
    width: 0;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 300px solid black;
    background-color: violet;
 }

.triangle:hover{
    background-color: purple; 
    transform: matrix3d();
}


/* selectors position */

.parent{
   background-image: url('image1.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: 100vh;
   width: 100vw;
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}

.relative{
    position: relative;
    background-color:rgba(27, 38, 68, 0.7);
    font-size: large;
    display: grid;
    place-items: center;
    height: 90%;
    width: 90%;
    align-content: center;
    color: azure;
}

.transition{
    background: linear-gradient(#FF5733,#F99206);
    background-repeat: no-repeat;
    background-size: 0px 100%;
    transition:
    background-size 0.5s,
    background-position 0.3s 0.5s;
}

.transition:hover{
    background-size: 100% 100%;
    background-position: 0% 0%;
    transition:
    background-size 2s,
    background-position 2s 2s;
}

.fixed{
    position: fixed;
    z-index: 0;
    top:0;
    height:7vh;
    width: 100vw;
    border-radius:20px;
    background-color:transparent;
}

.list-nav{
    display: flex;
    flex-direction: row;
    gap: 2%;
    color: whitesmoke;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}

.list-nav>li:hover{
    color:#F99206;
    transform: scale(1.1);
}

.container{
    max-width: 100vw; /* Adjust the maximum width as needed */
    margin: 0 auto; /* Center the container horizontally */
    padding:0; /* Add padding for content inside the container */
    box-sizing: border-box; /* Include padding and border in the total width/height */
}