@-webkit-keyframes typing {
     from {
         width: 0;
    }
}
 @-webkit-keyframes blink-caret {
     50% {
         border-color: transparent;
    }
}
 @-webkit-keyframes slideInFromLeft{
     0%{
         transform:translateX(-100%) 
    }
     100%{
         transform:translateX(0) 
    }
}
 @-webkit-keyframes slideInFromRight{
     from{
         margin-left:100%;
         width:300% 
    }
     to{
         margin-left:0%;
         width:100% 
    }
}
 body {
     font-family: dana !important;
     direction: ltr;
     background-color: #f5f5f7;
     margin: 0;
     background-image: -webkit-gradient(linear,left bottom,left top,from(#f5f5f7),color-stop(0,#f5f5f7),to(hsla(0,0%,100%,.05))),url(images/6037f1fff668b636e13e48d2_widgefy-header-bg.jpeg);
     background-image: linear-gradient( 0deg,#f5f5f7,#f5f5f7 0,hsla(0,0%,100%,.05)),url(images/6037f1fff668b636e13e48d2_widgefy-header-bg.jpeg);
     background-position: 0 0,40% 40%;
     background-size: auto,cover;
     background-repeat: repeat,no-repeat;
}
 h1, h2, h3, h4, h5, h6,input, textarea, p, span {
     font-family: dana !important;
}
 h1 {
     font-weight: bold;
}
 h2, h3 {
     font-size: 19px;
}
 p {
     font-size: 17px;
}
 html {
     scroll-behavior: smooth;
}
 .maincontent {
     margin: 40px 0px 20px 0px;
     border-radius: 30px;
     padding: 30px;
     background-image: linear-gradient(to bottom right, #000, #434343);
     color: #fff;
}
 #navbar_top {
     animation: slideInFromLeft 1s linear 50ms alternate;
     margin: 0px 0px 20px 0px;
     border-radius: 15px;
     padding: 10px 20px;
     background: rgba( 189, 195, 199, 0.3 );
     box-shadow: 0 7px 28px 0 rgba( 31, 38, 135, 0.24 );
     backdrop-filter: blur( 10px );
     -webkit-backdrop-filter: blur( 10px );
}
 .menu {
     animation: slideInFromLeft 1s linear 50ms alternate;
     margin: 0px 0px 20px 0px;
     border-radius: 15px;
     padding: 10px;
     background-color: #9c9c9c;
}
 .sticky {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
}
 .maincontent h2 {
     color: #fff;
}
 .maincontent h3 {
     color: #dbb34d;
}
 .maincontent p {
     font-size: 20px;
     font-weight: bold;
}
 .maincontent span {
     font-size: 18px;
     font-weight: normal;
}
 #Hel {
     font-size: 24px;
     font-weight: 600;
}
 .maincontent p a {
     color: #bdc3c7;
     text-decoration: none;
}
 .maincontent p a:hover {
     color: #bdc3c7;
     text-decoration: none;
}
 .maincontent img {
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     padding: 30px;
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 350px;
     height: 350px;
}
 .textpro {
     margin: auto auto;
     font-weight: bold;
}
 .textproabs {
     margin-top: 70px;
}
 .collapse {
     &:not(.show) {
         display: none;
    }
}
 .textproabs h2 {
     background-image: url(images/giphy.gif);
     background-size: cover;
     color: transparent;
     -moz-background-clip: text;
     -webkit-background-clip: text;
     text-transform: uppercase;
     -webkit-text-stroke: 0.1px white;
}
 .collapsing {
     height: 0;
     overflow: hidden;
     @include transition($transition-collapse);
}
 .maincontent2 {
     animation: slideInFromRight 1s linear 50ms alternate;
     margin: 0px 0px 20px 0px;
     border-radius: 30px;
     padding: 25px;
     background-color: #ffffff;
}
 .maincontent3 {
     margin: 0px 0px 20px 0px;
     border-radius: 30px;
     padding: 25px;
     background-color: #ffffff;
     display: block;
}
 .maincontent8 {
     animation: slideInFromLeft 1s linear 50ms alternate;
     margin: 0px 0px 20px 0px;
     border-radius: 30px;
     padding: 25px;
     background-color: #ffffff;
}
 .textbox {
    /*animation: slideInFromLeft 1s ease-out 50ms alternate;
     */
     margin: 15px 5px 0 5px;
     padding: 0 15px;
}
.textbox2 {
    /*animation: slideInFromLeft 1s ease-out 50ms alternate;
     */
     border-radius: 1;
     margin: 15px 5px 0 5px;
     padding: 0 15px;
}
 .textbox h3 {
     color: #dbb34d;
     margin-bottom: 5px;
}
 .textbox h4 {
     color: #dbb34d;
     margin-bottom: 5px;
     font-size: 17px;
     font-weight: normal;
}
 .textbox h4 a {
     color: #e66603;
     text-decoration: none;
}
 .textbox h4 a:hover {
     color: #e66603;
     text-decoration: none;
}
 .textbox h4 span{
     color: #37474f;
}
 .textbox span {
     font-size: 15px;
     color: #bdc3c7;
}
 .textbox p {
}
 #cen {
     font-weight: normal;
     font-size: 12px;
}
 .textbox p a {
     color: #37474f;
     text-decoration: none;
}
 .textbox p a:hover {
     color: #37474f;
     text-decoration: none;
}
 .lastTitle {
     text-align: center;
     margin: 20px 0 0;
     padding: 5px 0 0px;
}
 .lastTitle p {
     font-size: 12px;
     color: #bdc3c7;
     font-weight: normal;
}
 #subtext {
     font-size: 12px;
     margin-left: 5px;
}
 #honortext {
     padding: 0 20px 0px 0px;
     font-size: 14px;
}
 #texttag {
     background: #e3e3e8;
     color: #7e7e85;
     display: inline-block;
     padding: 10px 20px;
     border-radius: 12px;
     font-size: 14px;
     margin-right: 5px;
     text-align: left;
}

 #skilltag {
     color: #fff;
     display: inline-block;
     padding: 7px 10px 5px 15px;
     border-radius: 8px;
     font-size: 14px;
     margin-right: 4px;
     font-weight: bold;
     background: rgba( 126, 126, 133, 0.8 );
     backdrop-filter: blur( 10px );
     -webkit-backdrop-filter: blur( 10px );
     border-radius: 10px;
     border: 1px solid rgba( 255, 255, 255, 0.18 );
}
 #skilltaglevel {
     font-weight: normal;
     font-size: 14px;
     margin-right: 5px;
     color: #fff;
}
 #dissertation {
     font-size: 12px;
     display: inline-block;
     border-radius: 5px;
     border: 2px solid #e3e3e8;
     padding: 2px 2px;
}
 #dissertationtitle {
     color: #0c9d46;
     display: inline-block;
     quotes: "“" "”" "‘" "’";
     font-size: 15px;
}
 #supervision {
     margin-bottom: 0;
}
 #see {
     color: #2294b1;
}
 #see2 {
     color: #2294b1;
}
 #inst {
     color: #f63e54;
}
 #gpa {
     color: #8876fe;
}
 #icons {
     margin: 25px 15px 0px 0px;
     position: relative;
     display: inline-block;
}
 #awardnum {
     font-size: 35px;
     font-weight: bold;
     background: -webkit-linear-gradient(#fc354c, #0abfbc);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     position: relative;
     margin: 0 0 -50px 0;
}
 #rd {
     position: absolute;
}
 .textbox2 {
     margin: auto;
     text-align: right;
     width: 70%;
     padding: 5px 0 0 0;
}
 #honortitle h3 {
     margin-bottom: 15px;
}
 .pub h4 {
     font-size: 16px;
}
 .proj h4 {
     font-size: 16px;
}
#expproj {
    color: #708dfa;
}
#expproj2 {
    color: #000000;
}
 #icons .tooltiptext {
     visibility: hidden;
     background-color: black;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 6px 10px;
     font-size: 10px;
    /* Position the tooltip */
     position: absolute;
     z-index: 1;
     bottom: 120%;
     left: 50%;
     margin-left: -60px;
     opacity: 0;
     transition: opacity 0.3s;
}
 #icons:hover {
     color: #fff;
}
 #icons:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
}
 #button {
     text-align: center;
}
 #honorcontent {
}
 .navbar-collapse {
     flex-grow: 0;
}
 .nav-item a:hover {
     color: #dbb34d;
}
 .pub em {
     font-size: 16px;
     font-style: normal;
     background: linear-gradient(121deg,#D400A5 18%,#7040B9 25%,#2B6EC7 55%,#31CFD9 80%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: -1px;
}
 .pub p {
     font-size: 16px;
     color: #d3d3d3;
}
 .pub span {
     font-size: 16px;
     color: #d3d3d3;
}
 .proj em {
     font-size: 16px;
     font-style: normal;
     background: linear-gradient(to left, rgb(245, 227, 217) 40%, rgb(253, 201, 174));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: -1px;
}
 .proj p {
     font-size: 16px;
     color: #d3d3d3;
}
 .proj span {
     font-size: 16px;
     color: #d3d3d3;
}
 #upbtn {
     font-size: 22px;
     border: none;
     outline: none;
     background: none;
     color: #dbb34d;
     font-weight: 600;
}
 #more {
     display: none;
}
 .readBtn {
     /*font-size:25px;*/
     color: #fff;
     border: none;
     outline: none;
     background: #2B6EC7;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
     border-radius: 50%;
     overflow: hidden;
     text-align: center;
     vertical-align: middle;
     box-shadow: 0 7px 28px 0 rgba( 31, 38, 135, 0.14 );
     /*backdrop-filter: blur( 10px );*/
     /*-webkit-backdrop-filter: blur( 10px );*/
     display: block;
     margin-left: auto;
     margin-right: 0px;
     font-weight: 300;
     width: 42px;
     height: 42px;
     padding: 2px 0px;
}
 #icons2:hover {
     color: #20BEFF;
}
 #icons3:hover {
     color: #171515;
}
#plusss{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    vertical-align: middle;
    font-size:30px;
    font-weight: 300;
    text-align: center;
    color: #fff;
}