body{
    margin: 0;
    font-family: "Inter";
    font-weight: 400;
    color: #A46C5B;
    min-width: 400px;
    background: #F6F3F1;
}


/*===== header ====== */
/*===== header ====== */
/*===== header ====== */
.section.header h1{
    color:#A46C5B;
}
.header ul{
    position:relative;
    top:auto;
    width:auto;
    height:53px;
}
.header ul li{
    float:left;
    margin:6px;
}
.header ul li a {
    display: flex;
}
.header ul li a:hover{
    text-decoration: none;
    border-bottom: 2px solid #A46C5B;
    background:#F2E9E5;
}
.header ul li a img{
    filter: invert(48%) sepia(8%) saturate(2132%) hue-rotate(327deg) brightness(95%) contrast(89%);
    margin-right:4px;
    height:20px;
    width:20px;
    padding-top:0px !important;
    display: none;
}
.section.header{
    padding:3% 10%;
    width:80%;
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
.section.header .headerandvideo{
    display:inline-flex;
    justify-content: center;
}
.section.header .header-info{
    position: relative;
    display:inline-flex;
    flex-direction: column;
    align-items: flex-start;
    
    margin-top:120px;
    width:100%;
    color:#A2543D;
}
.section.header .latest-article .images{
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap:24px
}
.section.header .header-info h1{
    font-family: "RobotoSlab";
    font-size:64px;
    margin:0px;
    line-height: 80px;
        -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 1;
}
.section.header .header-info p{
    font-family: "Inter";
    font-weight: 200;
    font-size:24px;
    line-height: 28px;
    margin:0px;
    margin-top:16px;
    position: relative;
        -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 1;
}
.section.header .header-info p.scrolldown{
    font-weight: 400;
    font-size:14px;
    margin-top:64px;
    overflow: hidden;
    padding-bottom: 1px;
    height: 29px;
}
.section.header .header-info p.scrolldown img{
    width:18px;
    height:30px;
    margin-right: 8px;
    margin-left:0px;
    margin-bottom:-10px;
    z-index: 1;
    padding:0px;
}
.section.header .header-info p.scrolldown img.animated-arrow{
    position:absolute;
    top:4px;
    left:6px;
    width:6px;
    height:8px;
    z-index: -1 !important;
     -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: arrowDown; 
            animation-name: arrowDown;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
.section.header .header-info p a img{
    height: 24px;
    width:24px;
    margin-left:4px;
    margin-bottom:-4px;
    padding:0px;
}
.section.header .header-info p a{
    font-weight: 400;
    text-decoration: none;
    color:#A2543D;
}
.section.header .latest-article{
    display: inline-flex;
    justify-content: center;
    gap:24px;
    align-items: center;
    padding:0px 24px;
    border-radius:32px;
    text-decoration:none;
    margin-top:64px;
    border: 1px solid #E6DDD8;
    color:#A2543D;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.section.header .latest-article.float{
    position:absolute;
    bottom:0px;
    left:50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
.section.header .latest-article img{
    height:24px;
    width:122px;
    padding:0px;
}
.section.header .latest-article p{
    font-size:16px;
}
.section.header .latest-article:hover{
    transform: translateY(2);
    border: 0px;
    border-bottom: 3px solid #A46C5B;
    background:#F2E9E5;
}
.section.header .dribbleVid{
    display: inline-flex;
    margin:auto;
    justify-content: center;
    align-items: center;
    width:40%;
    height:100%;
    min-width: 320px;
    z-index: -1;
        -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    max-height: 580px;
}
.section.header .dribbleVid video{
    width:120%;
}

/*===== featured ====== */
/*===== featured ====== */
/*===== featured ====== */

.section.featured{
    background:#FDFCFC;
    padding:10%;
    display: flex;
    flex-direction: row;
}


.section.featured h2{
    font-size:80px;
    max-width: 400px;
    text-align: right;
    color:#D7BCB1;
    font-family: "RobotoSlab";
}
.section.featured .tile-wrapper {
    justify-content:space-around;
    gap:64px;
}
.section.featured .feature-tiles{
    display: flex;
    flex-direction: row;
    gap:64px;
}
.section.featured .tile-wrapper a{
    display: block;
    width:360px;
    height:216px;
    background:#F0D198;
    border-radius: 24px;
    text-decoration: none;
    color:#444444;
    padding:40px;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.section.featured .tile-wrapper a:hover{
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
}
.section.featured .tile-wrapper a:last-child:hover{
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
}
.section.featured .tile-wrapper a .logo{
    height: 64px;
    width:64px;
    background:#ffffff;
    border-radius: 32px;
    position: absolute;
    right:40px;
    top:-32px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.section.featured .tile-wrapper a:hover .logo{
    top:-48px;
    right:48px;
}
.section.featured .tile-wrapper a:last-child:hover .logo{
    top:-40px;
    right:36px;
}
.section.featured .tile-wrapper a .spark-right{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 1px;
    width: 1px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.section.featured .tile-wrapper a .spark-right.spark-left{
    left:auto;
    right:0px;
    transform: rotate(90deg);
}
.section.featured .tile-wrapper a:hover .spark-right.spark-left{
    right:-44px;
    left:auto;
    top:-54px;
}
.section.featured .tile-wrapper a:hover .spark-right{
     top: -44px;
    left: -54px;
    height: 82px;
    width: 73px;
}
.section.featured .tile-wrapper a h2{
    font-size:32px;
    line-height: 40px;
    text-align: left;
    margin:0px;
    font-family: "Inter";
    font-weight: 600;
    padding-right: 64px;
    color:#666666;
    width:392px;
}
.section.featured .tile-wrapper a p{
    position: absolute;
    bottom:32px;
    left:40px;
    font-size: 12px;
    color: #666666;
    line-height: 16px;
    font-family: "Inter";
    font-weight: 400;
    margin:0px;
}
.section.featured .tile-wrapper a p img{
    width:16px;
    height:16px;
    margin-right: 8px;
    margin-bottom:-3px;
}

/* ===== about me css ===== */

.section.about-me{
    padding-bottom: 40px;
    padding-top:8px;
}
.section.about-me .tile-wrapper{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    width:100%;
}
.section.about-me .tv{
    width:520px;
    flex-grow:0;
    flex-shrink:0;
    height:432px;
    position: relative;
    margin-right: 0px;
    padding-bottom: 40px;
}

.section.about-me .tv .tutorial.active{
    position: absolute;
    right:0px;
    top:0px;
}
.section.about-me .tv .tutorial.active .channel-tut{
    right:145px;
    top:20px;
    width:114px;
    height: 127px;
}
.section.about-me .tv .tutorial .channel-tut{
    position: absolute;
    height: 0px;
    width:0px;
    top:80px;
    right:200px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.section.about-me .tv .tutorial.active .tuner-tut{
    right:60px;
    top:180px;
    width:119px;
    height: 105px;
    display:none;
}
.section.about-me .tv .tutorial .tuner-tut{
    position: absolute;
    height: 0px;
    width:0px;
    top:230px;
    right:120px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.section.about-me .tv img.tvscreen{
    width:100%; //857 × 789
    height:auto;
    position: absolute;
    bottom: 10%;
    left:-6%;
}

.section.about-me .tv .video{
    width: 48%;
    height: 47%;
    position: absolute;
    left: 6%;
    top: 23%;
    background: #222222;
    overflow: hidden;
    background:url('../Images/glitch-static.gif');
}


.section.about-me .tv .video.tuner video{

    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: tuner; 
            animation-name: tuner;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    position: absolute;
    top:0;
    left:0;
}
.section.about-me .tv .video.tuner .tuner1,
.section.about-me .tv .video.tuner .tuner3{
    transform: skew(5deg,5deg);
     -webkit-animation-duration: 1s;
        animation-duration: 1s;
}
.section.about-me .tv .video.tuner .tuner2{
    transform: skew(10deg,10deg);
     -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
}
.section.about-me .tv .video.tuner video.tunerFiller{
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: tunerFiller; 
            animation-name: tunerFiller;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    position: absolute;
    top:100%;
    border:5px solid #222;
    left:0;
}
.section.about-me .tv .channel{
    width: 5.2%;
    height: 5.8%;
    position: absolute;
    right: 32.8%;
    top: 25.9%;
    padding: 2%;
    -webkit-transition: all 0.2s cubic-bezier(1, 1, 1, 0.1);
    -moz-transition: all 0.2s cubic-bezier(1, 1, 1, 0.1);
    -o-transition: all 0.2s cubic-bezier(1, 1, 1, 0.1);
    transition: all 0.2s cubic-bezier(1, 1, 1, 0.1);
}
.section.about-me .tv .channel:hover{
    cursor: pointer;
}
.section.about-me .tv .channel img{
    width:100%;
    height: 100%;
}
.section.about-me .tv .tunerKnob{
    width: 5.2%;
    height: 5.8%;
    position: absolute;
    right: 32.8%;
    top: 35.7%;
    padding: 2%;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.section.about-me .tv .tunerKnob:hover{
    cursor: pointer;
}
.section.about-me .tv .tunerKnob img{
    width:100%;
    height: 100%;
}
.section .tile-wrapper{height: auto;display: flex; width: 100%;justify-content:space-between; align-items: center;}
.section.more-about-me, .section.about-me
{max-width:960px;margin:auto;position: relative;}
.section.about-me .about-content p{
    font-family: "Inter";
    font-size:16px;
    font-weight: 200;
    line-height: 24px;
    color:#444444;
}
.section.about-me .about-content p strong{
    font-weight: 400;
}

.about-me-tile{
    width:200px;
    font-family:"Inter";
    margin:24px;
    justify-content: center; 
    height:232px;
}
.about-me-tile p.content{
    font-size:12px;
    line-height: 16px;
    color:#768293;
    font-weight: 400;
    text-align: center;
}
.about-me-tile p.content a{
    font-weight: 400;
    color:#768293;
}
.about-me-tile p.content a:hover{
    color:#666666;
}
.about-me-tile .mask-main{
    width:176px;
    height:120px; 
    margin:auto;
    position: relative;
    border-radius: 8px;
    background:#E5DFDA;
    transition: background 1s;
    
}
.base-font{
    font-family: LiuJian;
    color:#444444;
    font-size:24px;
    font-weight: bold;
    z-index: 2;
    height:32px;
}
.mask-main{
    border:1px solid #F7F2EF;
}
/*++++===== more about me =====++++*/
/*++++===== more about me =====++++*/
/*++++===== more about me =====++++*/

.more-about-me h2 small{
    font-size: 12px;
    font-weight: 400;
    color:#768293;
    position: absolute;
    right:0px;
    top:0px;
    bottom: 0px;
    margin:auto;
    height: 16px;
}

/* Photography properties start here */
/* Photography properties start here */
/* Photography properties start here */
.about-me-tile.photography{
    margin-left: 0px;
}
.about-me-tile.photography .mask-main{
    overflow: hidden;
}
.about-me-tile.photography .mask-main .photography-back{
    background:url('../Images/photography-bg.png') no-repeat center center;
    background-size:100% 100%;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.about-me-tile.photography .mask-main .photo-grid{
    height: 100%;width: 100%;position: absolute;top:0px;left: 0px;opacity: 0;
    transition: opacity 0.2s;
}
.about-me-tile.photography .mask-main .center-items{
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    position:absolute;
    opacity:0;
    transition: opacity 0.2s;
}
.about-me-tile.photography .mask-main .center-items div{
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    margin:auto;
    position:absolute;
}
.about-me-tile.photography .mask-main .center-items .dotted-line{
    width:66%;
    height:1px;
    border-radius:2px;
    background-image: linear-gradient(to right, #E5DFDA 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 6px 3px;
    background-repeat: repeat-x;
}
.about-me-tile.photography .mask-main .center-items .line{
    width:66%;
    height:0px;
    border-radius:2px;
    background: #E5DFDA;
    transform: rotate(-5deg);
}
.about-me-tile.photography .mask-main .center-items .circle{
    width:24px;
    height:24px;
    border:1px #E5DFDA solid;
    border-radius:20px;
}
.about-me-tile.photography .mask-main .shutter{
    z-index: 1;
    height:145px;
    position: absolute;
    top:0px;
    bottom:0px;
    margin:auto;
    left:-2%;
    width:104%;
    -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: shutterOut; 
            animation-name: shutterOut;
}
.about-me-tile.photography .mask-main .bottom-cover{
    transform: scaleY(-1);width: 100%;height:auto;position: absolute;bottom:-1px;right: 0px;
}
.about-me-tile.photography .mask-main .top-cover{
    transform: scaleX(-1);width: 100%;height: :auto;position: absolute;top:-1px;left: 0px;
}

.about-me-tile.photography:hover .mask-main .shutter{
    -webkit-animation-duration: 1.8s;
            animation-duration: 1.8s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: shutterIn; 
            animation-name: shutterIn;
}
.about-me-tile.photography:hover .mask-main .photography-back{
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: blurIn; 
            animation-name: blurIn;
     -webkit-animation-delay: 0.2s; 
            animation-delay: 0.2s;
}
.about-me-tile.photography:hover .mask-main .center-items .line,
.about-me-tile.photography:hover .mask-main .center-items .circle{
     -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: levelIn; 
            animation-name: levelIn;
     -webkit-animation-delay: 0.2s; 
            animation-delay: 0.2s;
    
}
.about-me-tile.photography:hover .mask-main .center-items,
.about-me-tile.photography:hover .mask-main .photo-grid{
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: clearOut; 
            animation-name: clearOut;
     -webkit-animation-delay: 0.2s; 
            animation-delay: 0.2s;
}

/* PS4 properties start here */
/* PS4 properties start here */
/* PS4 properties start here */

.about-me-tile.ps4 .mask-main{
    background: #E5DFDA;
    transition: background 0.5s;
}
.about-me-tile.ps4:hover .mask-main{
    background:#F0D198;
}

.about-me-tile.ps4 .mask-main .spark-animate{
    position: absolute;
    width:0px;
    height:0px;
    bottom:10px;
    left:50%;
    margin-left:4px;
    opacity: 0;
    transition:width 0.1s, height 0.1s, opacity 0.1s;
    transition-delay: 0s;
}
.about-me-tile.ps4:hover .mask-main .spark-animate{
    width:19px;
    height:22px;
    opacity: 1;
    transition-delay: 0.1s;
    transition:width 0.2s, height 0.2s, opacity 0.2s;
}
.about-me-tile.ps4 .mask-main .base-font{
    position: absolute;
    bottom:-24px;
    left:36px;
    opacity: 1;
    transition: opacity 0.2s;
}
.about-me-tile.ps4 .mask-main .base-font img{
    width:56px;
}
.about-me-tile.ps4:hover .mask-main .base-font{
    opacity: 0;
    transition: opacity 0.2s;
    transition-delay: 0s;
}
.about-me-tile.ps4 .mask-main .animated-font img{
    width:104px;
}
.about-me-tile.ps4:hover .mask-main .animated-font{
    opacity: 1;
    transition: opacity 0.2s;
    transition-delay:0s;
         -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: rotateIn; 
            animation-name: rotateIn;
}
.about-me-tile.ps4 .mask-main .animated-font{
    opacity: 0;
    position: absolute;
    bottom: -24px;
    left: -16px;
    z-index: 2;
    font-family: LiuJian;
    color:#444444;
    font-size:24px;
    transition: opacity 0.2s;
    font-weight: bold;
     -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: rotateOut; 
            animation-name: rotateOut;
}
.about-me-tile.ps4 .mask-main .background-animate{
    height:80%;
    width:72%;
    position:absolute;
    left:-15%;
    top:-15%;

    padding-bottom: 20%;
    margin-bottom: -20%;
    padding-right: 20%;
    margin-right: -20%;
    background:url(../Images/controller-bg-inactive.png) no-repeat top 24px left 32px;
    transition: background 1s;
    background-size: 80% 80%;
        -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: bounceOut; 
            animation-name: bounceOut;
}
.about-me-tile.ps4:hover .mask-main .background-animate{
     -webkit-animation-duration: 1s;
            animation-duration: 1s;
    animation-name: bounceIn; 
    background:url(../Images/controller-bg-active.png) no-repeat top 24px left 32px;
    background-size: 80% 80%;
}
.about-me-tile.ps4 .mask-main .animate{
    height:80%;
    width:72%;
    margin-left:0px;
    margin-top:-10px;

    background: url(../Images/controller-inactive.png) no-repeat;
    background-size: 100% 100%;
    transition: background 0.5s;
    z-index: 0;
    -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: bounceOut; 
            animation-name: bounceOut;
}
.about-me-tile.ps4:hover .mask-main .animate{
     -webkit-animation-duration: 1s;
            animation-duration: 1s;
    animation-name: bounceIn; 
    background: url(../Images/controller-active.png) no-repeat;
    background-size: 100% 100%;
}

/* United properties start here */
/* United properties start here */
/* United properties start here */


.about-me-tile.united .mask-main .united-front{
    background: url('../Images/united-front.png') no-repeat center center;
    background-size: 90% 90%;
    height: 120px;width:106px;position: absolute;top:0px;bottom:0px;right: 0px;left:0px;margin: auto;z-index: 1;
    transition: background 0.2s;
}
.about-me-tile.united:hover .mask-main .united-front{
    background: url('../Images/united-front-active.png') no-repeat center center;
    background-size: 100% 100%;
}
.about-me-tile.united .mask-main{
    background:url(../Images/United-bg-inactive.png) no-repeat;
    background-size:100% 100%;
}
.about-me-tile.resume .mask-main{
    overflow: hidden;
    transition:background 0.2s;
}
.about-me-tile.resume:hover .mask-main{
    background:#F0D198;
}
.about-me-tile.united:hover .mask-main{
    background:url(../Images/united-bg-active.png) no-repeat;
    background-size:100% 100%;
}
.about-me-tile .mask-main .animate-united-bg{
    position: absolute;
    height:1px;
    width:1px;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: zoomOut; 
            animation-name: zoomOut;
}
.about-me-tile:hover .mask-main .animate-united-bg{
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: zoomIn; 
            animation-name: zoomIn;
     -webkit-animation-delay: 0.2s; 
            animation-delay: 0.2s;
}

/* Resume properties start here */
/* Resume properties start here */
/* Resume properties start here */

.about-me-tile.resume{
    margin-right: 0px;
}
.about-me-tile.resume .mask-main .animate-resume{
    position: absolute;
    top:40%;
    right:0px;
    left:0px;
    margin: auto;
    width:70%;
    height:100%;
    transition: top 0.2s;
}
.about-me-tile.resume:hover .mask-main .animate-resume{
    top:20%;   
}
.about-me-tile.resume .mask-main .animate-resume .animate-photo{
    position: absolute;
    top:-5px;
    left:0px;
    width:60%;
    -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: rotateOut2; 
            animation-name: rotateOut2;
}
.about-me-tile.resume:hover .mask-main .animate-resume .animate-photo{
        -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: rotateIn2; 
            animation-name: rotateIn2;
}
.about-me-tile.resume .mask-main .base-font img{
    width:96px;
}
.about-me-tile.resume .mask-main .animate-resume .animate-shadow{
    position: absolute;
    top:0;
    right:0px;
    left:-15%;
    margin: auto;
    width:130%;
    height:100%;
    opacity:0.5;
}
.about-me-tile.resume .mask-main .animate-resume .animate-page{
    position: absolute;
    top:0px;
    right:0px;
    left:0px;
    margin: auto;
    width:100%;
}
.about-me-tile.resume .mask-main .animate-resume .animate-clip{
    position: absolute;
    top:-2px;
    left:10px;
    width:10%;
}

.about-me-tile.resume .mask-main .base-font{
    position: absolute;
    top:8px;
    left: 0px;
    right:0px;
    margin:auto;
    margin-top:0px;
    width:88px;
    padding-top:0px;
    text-align: center;
    
    transition: top 0.2s;
}
.about-me-tile.resume:hover .mask-main .base-font{
    position: absolute;
    top:-40px;
    margin-top:0px;
    padding-top:0px;
    
}
.about-me-tile.resume .mask-main ul{
    margin:0px;
    list-style-type: none;
    text-align: left;
    position: absolute;
    right:0px;
    top:164px;
    margin-top:0px;
    transition: top 0.2s;
    width:160px;
}
.about-me-tile.resume .mask-main:hover ul{
    top:10px;
}
.about-me-tile.resume .mask-main ul li{
    margin:0px;
    list-style-type: none;
    height:40px;
    width:40px;
    background: #E5DFDA;
    margin:4px;
    line-height: 24px;
    border-radius:20px;
    display: inline-block;
    text-align: center;
}
.about-me-tile.resume .mask-main ul li.download{
    margin:0px;
    list-style-type: none;
    height:40px;
    width:140px;
    margin-top:16px;
    line-height: 40px;
}


/*====== Jijivisha =======*/

.section.jijivisha{
    background: linear-gradient(180deg, rgba(238, 240, 237, 0.00) 0%, #F0F1EF 12%);
    padding:10%;
}
.section.jijivisha .content{
    width:400px;
    margin-right: 80px;
    flex-shrink: 0;
    flex-grow: 0;
}
.section.jijivisha .content h2{
    color: #BECBC1;
    margin:0px;
    font-family: "RobotoSlab";
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 72px; /* 107.317% */
    margin-bottom: 48px;
    flex-shrink: 0;
    flex-grow: 0;
}
.section.jijivisha .content h3{
    color: #727F6E;
    font-family: "Kohinoor";
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    position:relative;
    margin:0px;
    margin-bottom: 16px;
}
.section.jijivisha .content h3 small{
    color: #727F6E;
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    height:24px;
    margin:auto;
    font-family: "Inter";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.section.jijivisha .content h3 small img{
    height: 20px;
    width:20px;
    margin-right: 8px;
    margin-bottom:-4px;
}
.section.jijivisha .content p{
    color: #727F6E;
    font-family: "Inter";
    font-size: 16px;
    font-style: normal;
    margin:0px;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
}
.section.jijivisha .content p span{
    color: #727F6E;
    display: block;
    margin-top:8px;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.section.jijivisha video{
    width:100%;
    max-width: 880px;
}

/*==== responsive css ====*/
/*==== responsive css ====*/
/*==== responsive css ====*/