* {
    padding: 0px;
    margin: 0px 1px 1px 1px;
    box-sizing: border-box;
    scroll-behavior: smooth;
    border-radius: 5px;
}
.background{
    display: flex;
    justify-content: center;
    align-items: center;
    animation-direction: alternate;
    height: 105svh;
    width: 98.3svw;
    background-size: cover;
    animation-name: messi;
    animation-duration: 15s;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    animation-iteration-count: infinite;
}
/* Background */
@keyframes messi {
    from{

        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("/Screenshot/messiimg.jpg");
    }
    to{
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url("/Screenshot/messi.jpg");
    }
}
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(194, 192, 180);
    height:100px auto;
    width: 2px auto;
    background-image: url("/Screenshot/nisha\ in\ sari.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    touch-action: pan-y;
}

.nav .nav1,.nav2,.nav3{
    margin: 15px;
    display: inline-block;
    justify-content: space-evenly;
    font-size: 14px;
}
#scrool{
    padding: 10px;
    font-weight: 600;
    font-family: cursive;
    position: relative;
    right: 50vw;
    top: 40vh;
    color: #928c8c;
    border: 2px solid white;
    background-color: #1f1f1f;
    line-height: 50px;
}

.dot{
    margin: 0;
    padding: 0;
    animation-direction: alternate;
    animation-name: dot;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid white;
}
.dot1{
    animation-direction: alternate;
    animation-name: dot;
    animation-delay: 0.3s;
    animation-timing-function: linear;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid white;
}
.dot2{
    animation-delay: 0.5s;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-name: dot;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid white;
}
@keyframes dot {
    from{
        transform: translateY(3px);
    }
    to{
        transform: translateY(10px);
    }
}
.nav{
    border-radius: 0;
    left: 0;
    top: 0px;
    position: fixed;
    border: 0.1cm orange solid;
    background:linear-gradient(45deg,#d62727,#6b58f7);
    background-color: rgba(255, 255, 255, 0.281);
    height: 10vh;
    width: 100%;
}
.nav ul{
    justify-content: space-between;
    list-style: none;
    display: flex;
    padding: 20px;
}
.nav ul li{
    transition-timing-function: cubic-bezier(0.53, 3.29, 0.02, 0.17);
    transition-property:transform;
    transition-duration: 5s;
    background-color: #ffffff00;
}
.nav ul li a{
    font-size: large;
    border-radius: 7%;
    padding: 3px;
    border: 2px solid pink;
    text-decoration: none;
    transition-timing-function: cubic-bezier(0.53, 3.29, 0.02, 0.17);
    transition-property: font-size,background-color,color,border,padding;
    transition-duration: 0.5s;
    color: rgb(7, 4, 4);
}

.nav ul li a:hover{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    padding:5px;
    font-size: larger;
    background-color: white;
    border: 2px solid rgb(255, 0, 0);
    color: rgb(255, 0, 0);
}
.nav ul li:hover{
    box-shadow:
    0 0 30px 15px #fff,  /* inner white */
    0 0 50px 30px #f0f, /* middle magenta */
    0 0 70px 45px #0ff; /* outer cyan */

    transform: rotate(360deg);
}
.story1{
    animation-direction: alternate  ;
    animation-name: story;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes story {
    from{
        box-shadow:
        0 0 5px 15px #ff5959,  /* inner white */
        0 0 10px 15px rgb(102, 52, 102), /* middle magenta */
        0 0 35px 15px rgb(10, 36, 36); /* outer cyan */
    }
    to{
        box-shadow:
        0 0 10px 15px #fff,  /* inner white */
        0 0 20px 30px rgb(126, 79, 79), /* middle magenta */
        0 0 30px 35px rgb(5, 43, 5); /* outer cyan */
    }
}

    .best{
        width: 700px;
        height:150px;
    }
.video{
    height: 240px;
    width: 260px;
    float: left;
    border: 2px solid;
    margin-right: 20px;
    box-shadow: 3px 4px 5px blue,-3px -4px 5px rgba(105, 204, 12, 0.445);
}
.video1{
    box-shadow: 3px 4px 5px blue,-3px -4px 5px rgba(230, 92, 28, 0.644);
    width: 260px;
    height: 250px ;
    float: right;
    border: 2px solid;
    margin-right: 0px;
}
.img1{
    width: 700px;
    height:150px;
}
#ktmpost{
    height: 511px;
}
#photo2{
    height: 50vh;
    width: 50vw;
}
.photo1{
    width: 50vw;
    height: 70vh;
}
.mo{font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}

.head{
    background-color: rgb(129, 118, 150);
    display: inline;
    border: 2px solid;
    box-shadow: 3px 4px 5px blue,-3px -4px 5px rgba(105, 204, 12, 0.445);
}

.text{
    color: #a31800;
    margin-bottom: 30px;
}
@keyframes text {
    0% {
    text-shadow: -4px 0px 2px rgba(94,139,94,0.68),-4px 0px 2px rgba(255, 0, 0, 0.68);
    }
    50%{
        text-shadow: 6px 33px 13px rgba(36, 3, 223, 0.68);
    }
    75%{
        text-shadow: 6px 40px 5px rgba(115, 61, 122, 0.68);
    }
    100%{
        text-shadow: -5px 2px 1px rgba(67, 92, 104, 0.68),-4px 0px 2px rgba(255, 0, 0, 0.68);
    }
      }
.h3{
    border: 1px solid;
    display: inline;
    
}
.h4{
    border: 1px solid;
    display: inline-block;
}
.p1{
    text-overflow:ellipsis;
    overflow: auto;
    font-family: cursive;
    margin-top: 10px;
    border: 1px solid;
    border-radius: 5px;
}
#rough1{
    background-color: darkgrey;
}
.photo{
    height: 60vh;
    width: 55vw;
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid;
    box-shadow: 3px 4px 5px rgb(26, 26, 36),-3px -4px 5px rgba(230, 92, 28, 0.644);
}
.nishaimg{
    border: 2px solid;
    box-shadow: 3px 4px 5px rgb(26, 26, 36),-3px -4px 5px rgba(230, 92, 28, 0.644);
}
#audio{
    border: 2px solid;
    background:linear-gradient(45deg,#3a243f,#1e00ff);
    position: relative;
    top: 40px;
    width: clamp(25%,100%,100%);
    
}
#audio1{
    border: 2px solid;
    border-radius: 5px;
    background-image: url("https://img.freepik.com/premium-vector/simple-music-logo-design-concept-vector_9850-3776.jpg?w=740");
    display: block;
    padding: 20px;    
    background-position: center;
    background-size: cover;
}
.span{
    margin: 40px;
    font-size: large;
    font-family:fantasy;
    color: rgb(13, 13, 34);
}
#audiosection{
    color: rgb(100, 68, 57);
    position: relative;
    top: 40px;
    border: 3px solid rgb(3, 3, 255);
    display: inline-block;
    padding: 5px;
    border-radius: 6px;
    background-color: cornsilk;
}
#button1{
    font-family: cursive;
    color: grey;
    background-color: lightpink;
    float: left;
    margin: 5px;
}
.top{
    width: clamp(25%,100%,100%);
    margin-top: 20px;
    border: 2px solid;
    font-size: x-large;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#askingaudio{
    font-style: italic;
}
#Dont{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#last{
    font-weight: lighter;

}
#emoji{
    border: 2px solid pink;
    font-size: large;
}
.audiobor{
    display: inline-block;
    border: 5px solid darkred;
}
#bigp{
    margin-top: 10px;
    border: 1px solid;
    border-radius: 5px;
    overflow:auto;
    height: 150px;
}
#blank{
    border: 2px solid lightblue;
    box-shadow: 3px 4px 5px rgb(26, 26, 36)
}
.End{
    text-shadow: 3px 4px 5px rgb(84, 75, 109)
}
#Wanna:hover{
    color: red;
    font-size: 20px;
}
#button1:hover{
    font-size: 20px;
    color: rgb(182, 11, 11);
}
.button2:hover{
    display: none;
}
.Introduction{
    font-family:'Courier New', Courier, monospace;
    text-transform: capitalize;
}
header{
    border-radius: 0px;
}
footer{
    padding-top: 50px;
    text-align: center;
    height: 20px;
    background-color: black;
}
#Wanna{
    border-radius: 50%;
    padding-top: 40px;
    text-align: center;
    height: 100px;
    background: linear-gradient(45deg,#3d282b,#180896);
    color: white;
    text-decoration: wavy;
    font-size: large;
}
.space{
    height: 50px;
}
.para{

    padding: 10px;
    font-size: xx-large;
    border-radius: 10px;
    animation-name: color;
    border: 2px solid rgb(255, 255, 255);
    animation-duration: 4s;
    animation-iteration-count: infinite;
    color: red;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.borderback .animation{

    padding: 10px;
    font-size: larger;
    border-radius: 10px;
    animation-name: color;
    border: 2px solid rgb(255, 255, 255);
    animation-duration: 4s;
    animation-iteration-count: infinite;
    color: red;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
@keyframes color {
    0%{
        opacity: 0.1;
        transform: rotate(0);
        background: linear-gradient(45deg,#040504,#173114);
    }
    10%{
        opacity: 0.2;
        background: linear-gradient(45deg,#040504,#2e1dc702);
    }
    20%{
        opacity: 0.3;
        background: linear-gradient(45deg,#040504,#2c2666);
    }
    30%{
        opacity: 0.4;
        background: linear-gradient(45deg,#040504,#1b173f);
    }
    40%{
        opacity: 0.5;
        background: linear-gradient(45deg,#040504,#1b173f);
    }
    50%{
        opacity: 0.6;
        background: linear-gradient(45deg,#040504,#1b173f);
    }
    60%{
        opacity: 0.7;
    }
    70%{
        opacity: 0.8;
        background: linear-gradient(45deg,#130b11,#412041);
    }
    80%{        
        opacity: 0.9;

    }
    90%{        
        opacity: 1;

    }
    100%{        
        opacity: 0.1;
        transform: rotate(360deg);
        background: linear-gradient(45deg,#0c2b0e,#180896);
    }

}

@media screen and (max-width:600px){
    .video{
        height: 150px;
        width: auto;
        float: left;
        border: 2px solid;
        margin-right: 20px;
        box-shadow: 3px 4px 5px blue,-3px -4px 5px rgba(105, 204, 12, 0.445);
    }
    .video1{
        box-shadow: 3px 4px 5px blue,-3px -4px 5px rgba(230, 92, 28, 0.644);
        width: auto;
        height: 150px ;
        float: right;
        border: 2px solid;
        margin-right: 0px;
    }
    .nav ul{
        justify-content: start;
        display: flex;
    }
    .nav ul li a{
        transition: none;
        animation: none;
    }
    .story1{
        transition: none;
        animation: none;
    }
    #scrool{
        width: 100px;
        font-size: small;
        line-height: 20px;
    }
    .borderback .animation{
        display: inline-block;
        font-size: small;
    }
    .para{
        font-size: small;
    }
    #photo2{
        height: 40vh;
        width: 50vw;
    }
    .img1{
        width: 100vw;
        height:125px;
        }
    .best{
        height: 11vh;
        width: 100vw;
    }
    .a1{

        color: #1e00ff;
    }
    .nav .nav1,.nav2,.nav3{
        margin: 15px;
        display: inline-block;
        justify-content: space-evenly;
        font-size: 14px;
    }
    .p1{
        font-size: 14px;
    }
    #ktmpost{
        height: 50vh;
        width: 70vw;
    }
    .head{
        font-size: 20px;
    }
    #rough1{
        font-size: 15px;
    }

    .photo{
        height: 40vh;
        width: 100vw;
        display: block;
        margin-top: 15px;
        margin-bottom: 15px;
        border: 1px solid;
        box-shadow: 3px 4px 5px rgb(26, 26, 36),-3px -4px 5px rgba(230, 92, 28, 0.644);
    }
    .photo1{
        width: 100vw;
    }
    #photo2{
        width: 100vw;
    }
    .text{
        animation: none;
        color: #180896;
    }
}