/**,
*:before,
*:after {
  box-sizing: inherit;
}*/
body, html{
    margin:0;
    padding:0;
    box-sizing: border-box;
    position: relative;
    font-family: sans-serif;
    background-image: linear-gradient(to right top, #ecf98f, #ffb95e, #ff6f71, #e737a8, #564ada);
    }
    nav {
        position: relative;
        z-index: 999;
        height: 8vh;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        background: #0a1b38;
        color: #fff;
    }
    nav>a>img {
       text-decoration: none;
        cursor: pointer;
        width: 10vh;
        height: 6vh;
        cursor: pointer;
    }
    .menu{
        margin-left: 50%;
    }
    .menu a {
        text-decoration: none;
        color: #fff;
        text-shadow: 0px 2px 2px #f80202;
        padding: 0px 20px;
        line-height: 8vh;
        cursor: pointer;
    }
    .menu a:hover,
    .menu a.active {
        color: #57106d;
        font-weight: bold;
        text-shadow: 0px 0px 0px;
        text-shadow: 0px -2px 0px rgb(231, 194, 194), 0 0 5px hsla(197, 83%, 69%, 0.8), 0 -4px 15px rgba(106, 236, 193, 0.5);
    }
    .clear{
        clear: both;
    }
      .user-profile {
        position: relative;
      }
      .user-circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 6vh;
        height: 6vh;
        border-radius: 50%;
        margin-right: 10px;
        cursor: pointer;
        background-color: #fff;
      }
      .user-circle img {
        width: 49px;
        height: 49px;
        object-fit: cover;
        border-radius: 50%;
      }
      .user-dropdown {
        display: none;
        position: absolute;
        top: 50px;
        right: 0;
        width: 200px;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 10px;
      }
      .user-dropdown ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .user-dropdown li a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #333;
      }
      .user-dropdown li a:hover {
        background-color: #f5f5f5;
        border-radius: 10px;
      }
      
    
    
    
    
    
    
    


sup{
    color: white;
    left: 5px;
    padding: 2px 5px 2px 5px;
    border-radius: 5px;
    animation: myanimation 10s infinite;
}
@keyframes myanimation {
  0% {background-color: #fc0303;}
  10%{background-color:#fc8403;}
  20%{background-color:#fcf803;}
  30%{background-color:#77fc03;}
  40% {background-color: #03fc39;}
  50% {background-color: #03ecfc;}
  60% {background-color: #035efc;}
  70% {background-color: #0703fc;}
  80% {background-color: #7f03fc;}
  90% {background-color: #fc03fc;}
  100% {background-color: #fc0384;}
}
.singerpage>li>a>p{
    display: none;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
@media (print),
(prefers-reduced-motion: reduce) {
    .animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
}
@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}
@media only screen and (min-device-width: 100px) and (max-device-width: 786px),  (max-width: 786px) {
  
    .menu a {
        font-size: 20px;
    }
  
}
@media only screen and (min-device-width: 100px) and (max-device-width: 970px),  (max-width: 970px) {
.menu{
    margin-left: 5%;
}
}
@media only screen and (min-device-width: 100px) and (max-device-width: 324px),  (max-width: 324px) {
    .menu{
        margin-left: 2%;
    }
    .menu a {
        padding: 0px 5px;
    }
    }