*{
    border-radius: 5px;
    margin: 0;
    padding: 0px;
}
.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%;
    margin: 2px;
    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 */
    }
}
.Introduction{
    font-family: cursive;
    color: rgba(39, 19, 19, 0.856);
    margin-top: 20px;
    text-transform: capitalize;
    text-align: left;
    border: 2px solid;
    display: block;
}
body{
    touch-action: pan-y;
    font-family: Arial, Helvetica, sans-serif;
    background:linear-gradient(45deg,#775c5c,#0f0557);
}
h1{
    display: inline-block;
    border: 2px solid rgb(218, 218, 218);
    text-align: center;
}
img{
    position: relative;
    top: 6px;
    height: 53px;
    width: 60px;
}
.nav1 a:hover{
    color: blue;
    padding:5px;
    font-size: large;
    background-color: white;
    border: 2px solid white;
}
.nav2 a:hover{
    padding:5px;
    font-size: large;
    background-color: white;
    border: 2px solid white;
    color: rgb(255, 0, 0);
}
.nav3 a:hover{
    padding:5px;
    font-size: large;
    background-color: white;
    border: 2px solid white;
    color: rgb(10, 87, 42);
}
#Dont{
    font-family: cursive;
    font-weight: 200;
}
.nav{
    top: 0;
    left: 0;
    border-radius: 0;
}
@media screen and (max-width:600px){
    .nav ul li{
        transition: none;
        animation: none;
    }
    .nav ul li a{
        transition: none;
        animation: none;
    }
}