@import url('https://fonts.googleapis.com/css2?family=Anek+Odia:wght@300&family=Grape+Nuts&family=Ma+Shan+Zheng&family=Mukta:wght@300&family=Patrick+Hand&family=Roboto+Mono&family=Teko:wght@300&display=swap');


* {margin:0;padding:0}

body{
    font-family: 'Patrick Hand', cursive;
    color:aliceblue;
    /*background: -webkit-linear-gradient(right top, #6A3680 , #2DC389); /* Safari 5.1 - 6.0 
    background: -o-linear-gradient(top right, red, blue); /* Opera 11.1 - 12.0 
    background: -moz-linear-gradient(top right, red, blue); /* Firefox 3.6 - 15 */
}

header{
    margin:0;
}

.Lheader{
    transition:font-size 0.8s, color 0.8s;
    font-size:7vmin;
    text-shadow: 0.3vmin 0.3vmin 0vmin grey
}
.Lheader:hover{
    font-size:8vmin;
    color:#ffa17a;
}

.Sheader{
    transition:font-size 0.8s, color 0.8s;
    font-size:12vmin;
    text-shadow: 0.3vmin 0.3vmin 0vmin grey
}
.Sheader:hover{
    font-size:14vmin;
    color:#ffa17a;
}

.bgcolor{
    background: linear-gradient(to right top,  #485DA6, #00a1ba, #00BF98, #43dd9d);
}

.top{
    width:100vw;
    height:10vh;
    padding:1vmin;
    vertical-align: center;
}

.weblogo{
    float:left;
}

.weblogo img{
    height:8vh;
}

li{display:inline-block; margin:1vmin}
nav ul li a{letter-spacing:2px;color:#fff;-webkit-transition:color .2s ease;-o-transition:color .2s ease;transition:color .2s ease;padding:3px 0;margin-bottom:10px;position:relative;display:inline-block;}
.effect{float:right; font-size: 2vmin;}
.effect ul li a:hover{color:#FBFAFC;}
.effect ul li a:hover::after, .effect ul li a:hover::before{width:100%;left:0;}
.effect ul li a::after, .effect ul li a::before{content:'';position:absolute;top:calc(100% + 5px);width:0;right:0;height:3px;}
.effect ul li a::before{-webkit-transition:width .25s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;-o-transition:width .25s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;transition:width .25s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;background:#845EC2;}
.effect ul li a::after{-webkit-transition:width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);-o-transition:width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);transition:width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);background:#2FFFAD;}
.effect ul li a.active:after{background:#2FFFAD;width:100%;left:0;}
.effect ul li a.active:before{z-index:2;}