@font-face{
    font-family: "Roboto";
    src: url("./Assets/Fonts/Roboto/Roboto-Regular.ttf")format('truetype');
}
@font-face{
    font-family: "Lato";
    src: url("./Assets/Fonts/Lato/Lato.ttf")format('truetype');
}
@font-face{
    font-family: "Chilanka";
    src: url("./Assets/Fonts/Chilanka/Chilanka-Regular.ttf")format('truetype');
}

@font-face{
    font-family: "Anonymous Pro";
    src: url("./Assets/Fonts/Anonymous_Pro/AnonymousPro.ttf")format('truetype');
}

:root{
    --dark-navy: #020c1b;
    --navy: #0a0d1f;
    --sky: #9aa2ca;
    --light-blue: #c1c8ec;
    --white: rgb(240, 229, 229);
    --contrast-color: #4fe0be;
    --violet: #d19ff5;
    --btn-background: linear-gradient(var(--sky), var(--contrast-color));
    scrollbar-color: var(--sky) var(--light-blue) !important;
    scrollbar-width: thin !important;
}

body{
    font-family: "Roboto", "Lato", "Anonymous Pro", "Chilanka";
    margin: 0;
    padding: 0;
    transition: .5s;
    height: 100%;
    width: 100%;
}

html{
    scroll-behavior: smooth;
}

body[data-theme="dark"]{
    background-image: linear-gradient(var(--navy),var(--dark-navy));
    color: var(--sky);
}

body[data-theme="light"]{
    --contrast-color: #1ebb87;
    background-color: var(--white);
    color: var(--dark-navy);
    --btn-background: linear-gradient(#3db8bd, #58a751);
}

::-webkit-scrollbar {
    width: .5rem;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--dark-navy); 
    border-radius: 10px;
}
   
::-webkit-scrollbar-thumb {
    background: var(--sky);
    border-radius: 10px;
    transition: 1s;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--light-blue); 
}
.loading-animation{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    background-color: var(--dark-navy);
    animation: loading-page 1.25s;
    animation-delay: .75s;
    animation-fill-mode: forwards;
}
body[data-theme="light"] .loading-animation{
    background-color: var(--sky);
}

.loading-animation-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1 !important;
    animation: loading-animation .75s;
}

.loading-animation-icon svg{
    width: 75px;
}
@keyframes loading-animation{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes loading-page{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        display: none;
        z-index: -5;
    }
}

.container{
    padding: 0 150px;
    max-width: 1400px;
    margin: 0 auto;
}

.intro, .articles{
    min-height: calc(90vh - 12rem);
    padding: 8rem 0 4rem 0;
}

.about-me, .articles{
    min-height: calc(60vh - 8rem);
    padding: 4rem 0;
}

.contacts{
    min-height: calc(40vh - 16rem);
    padding: 8rem 0;
    
    
}

.intro-title, .about-me-title{
    font-size: clamp(40px, 8vw, 80px);
    margin: 0.5rem 0;
    color: var(--light-blue);
}
.intro-title{
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(-70deg,#79cea4,#295c98);
    font-family: "Chilanka";
}

body[data-theme="light"] .intro-title{
    background: -webkit-linear-gradient(-70deg, var(--navy), var(--dark-navy));
}

.intro-text{
    font-size: clamp(24px, 3.5vw, 35px);
}

.intro-heading{
    color: var(--contrast-color);
}

body[data-theme="light"] .intro-heading, body[data-theme="light"] .intro-text{
    color: #151b3e;
}

.intro-btn{
    color: var(--dark-navy);
    background-image: var(--btn-background);
    border: 1px solid var(--contrast-color);
    border-radius: 6px;
    padding: 15px 20px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s ;
    transition-timing-function: ease-out;
}

.intro-btn:hover{
    border: 1px solid #50b69e;
    background-color: rgba(59,174,129,0.5);
}

.topnav{
    position: fixed;
    top: 0;
    max-height: 5rem;
    background-color: #111333;
    box-shadow: 0 4px 2px -2px var(--navy);
    width: 100%;
    opacity: .8;
    z-index: 10;
}
body[data-theme="light"] .topnav{
    background-color: var(--contrast-color);
    color: var(--navy) !important;
    box-shadow:  0 4px 12px rgb(0 0 0 / 50%);
}

.topnav-main{
    margin: 1rem;
}
.topnav-logo{
    width: 2rem;
    float: left;
    margin-top: -.3rem;
}
.topnav-name{
    padding-top: 0.1rem;
    float: left;
    font-size: 1.2rem;
    margin: 0 0.8rem 0.8rem 0.8rem;
    vertical-align: middle;
    font-family: "Chilanka";
    text-shadow: 1px 1px 1px rgba(230, 241, 255, .5);
    color: inherit;
    text-decoration: none;
}

.topnav-menu{
    float: right;
}
.topnav-exit-menu{
    display: none;
}

.topnav-menu a{
    margin: 0 1.25rem;
    text-decoration: none;
    color: var(--sky);
    transition: .5s;
}

body[data-theme="light"] .topnav-menu a{
    color: var(--navy);
}
.topnav-menu a:hover{
    color: var(--light-blue);
}

.topnav-ham{
    float: right;
    font-size: 1.5rem;
    margin: -.5rem 1rem .5rem 0;
    display: none;
    cursor: pointer;
}

.about-me{
    max-width: 700px;
    margin: 0 auto;
}

.about-me-title{
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(-70deg,#db469f,#2188ff);
}

.about-me-content{
    float: left;
    width: 70%;
    font-size: 1.3rem;
    text-align: justify;
}

.about-me-text{
    color: var(--violet);
}

html[lang="zh-CN"] .about-me-content, html[lang="zh-TW"] .about-me-content{
    text-align: none;
}
body[data-theme="light"] .about-me-text{
    color: #280b3e;
}

.about-me-pp{
    float: left;
    width: calc(30% - 40px);
    padding: 3rem 20px;
    position: relative;
}

.about-me-pp img{
    width: 100%;
}
body[data-theme="light"] .about-me-pp img{
    border: 3px solid #9aa2ca;
}
.about-me-pp::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px 20px;
    width: calc(100% - 30px);
    height: calc(100% - 90px);
    z-index: -2;
    box-sizing: border-box;
    border: 5px solid var(--sky);
    transform: translate(10px, 10px);
    transition: transform 150ms;
}
.about-me-pp:hover::before{
    transform: translate(5px, 5px);
}

.articles-title{
    font-size: clamp(30px, 6vw, 70px);
    font-weight: bold;
    text-align: center;
    top: 8rem;
    z-index: -3;
    width: 100%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(-70deg,#23d089,#c7a310);
}

.article-box{
    opacity: .9;
    margin: calc(clamp(30px, 6vw, 70px) + 1rem) 0;
    position: relative;
}

.article-preview{
    width: 70%;
    display: block;
    z-index: 1;
    transition: .5s;
}

.article-preview img{
    width: -webkit-fill-available;
    width: fill-available;
    width: -moz-available;
    display: block;
}

.article-preview:hover{
    opacity: .6;
}

.article-content{
    position: absolute;
    right: 0;
    top: 20px;
    z-index: 2;
    width: 60%;
    text-align: right;
    max-height: -webkit-fill-available;
    max-height: fill-available;
    max-height: -moz-available;
    overflow: hidden;
}

.article-content-inner{
    background: var(--navy);
    padding: 1rem;
    opacity: .8;
}

.article-content-title{
    font-size: 1.5rem;
    margin: 0.3rem 0;
    display: block;
}

.article-content-description{
    display: block;
    border-radius: 5px;
}
body[data-theme="light"] .article-content-inner{
    background-color: var(--sky);
}

.article-link{
    color: var(--sky);
    margin: 0.5rem 0rem;
    display: inline-block;
}
.article-link:hover .article-link{
    color: var(--contrast-color);
}
.article-svg{
    width: 2rem;
}

.article-box:nth-child(2n) .article-content{
    text-align: left;
    left: 0;
}

.article-box:nth-child(2n) .article-preview{
    margin-left: auto;
}

.contact{
    position: relative;
}

.contacts-title{
    font-size: clamp(40px, 8vw, 80px);
    font-weight: bold;
    text-align: center;
    z-index: -3;
    width: 100%;
    margin: 1rem 0;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(-70deg,#804eda,#71c2a3);
}

.contacts-cv-btn{
    text-align: center;
    color: var(--contrast-color);
    background-color: var(--navy);
}

.contacts-content{
    background-color: var(--navy);
    padding: 1.2rem;
    border-radius: 1rem;
    opacity: .8;
    margin-top: calc(clamp(20px, 4vw, 40px) - .5rem);
    color: var(--contrast-color);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: auto auto;
}
body[data-theme="light"] .contacts-cv-btn{
    background-color: var(--whitef);
    color: var(--white);
}
body[data-theme="light"] .contacts-content{
    background-color: var(--sky);
    color: var(--white);
}
.contacts-content-text{
    font-size: 1.25rem;
    margin: 0 1rem;
    display: inline-block;
}
.contacts-link-btn{
    text-decoration: none;
    background-image: linear-gradient(#5c69ad, #77549e);
    border: 1px solid var(--sky);
    color: var(--dark-navy);
    border-radius: 15px;
    padding: 1.25rem 1.5rem;
    font-size: 1.25rem;
    transition: .5s;
    transition-timing-function: ease-out;
    height: fit-content;
    height: -moz-fit-content;
}

.cv-button{
    text-decoration: none;
    opacity: .8;
    background-image: linear-gradient(#5c69ad, #77549e);
    font-size: 1.25rem;
    border: 1px solid var(--sky);
    border-radius: 15px;
    color: var(--dark-navy);
    margin-top: 15px;
    padding: 15px 32px;
    text-align: center;
    transition: .5s;
    transition-timing-function: ease-out;
    display: inline-block;
    width: 40%;
}

body[data-theme="light"] .cv-button{
    color: var(--white);
}


body[data-theme="light"] .contacts-link-btn{
    color: var(--white);
}

.contacts-link-btn:hover{
    border: 1px solid #50b69e;
    background-color: rgba(59,174,129,0.5);
    color: var(--navy);
}

.copyright{
    font-size: 1.2rem;
    text-align: center;
    margin: 2rem 0;
}

.github-stats{
    color: var(--contrast-color);
    text-decoration: none;
}

.github-stars, .github-forks{
    width: 1rem;
}

.site-setting{
    position: fixed;
    bottom: 30%;
    right: 4rem;
    display: block;
    z-index: 7;
    height: 2.5rem;
}

.switch-theme-btn, .terminal-version-btn{
    color: var(--navy);
    width: 2.5rem;
    background-color: var(--contrast-color);
    padding: .5rem;
    margin: 1rem 0;
    display: block;
    border-radius: 50%;
    cursor: pointer;
}

body[data-theme="light"] .switch-theme-btn,body[data-theme="light"] .terminal-version-btn{
    color: var(--light-blue);
    fill: var(--light-blue);
}


.article-read-more{
    color: var(--dark-navy);
    background-image: var(--btn-background);
    border: 1px solid var(--contrast-color);
    border-radius: 10px;
    padding: 15px 20px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s ;
    transition-timing-function: ease-out;
    margin: 0 auto;
    position: inherit;
    display: block;
    width: max-content;
    font-size: 1rem;
}
body[data-theme="light"] .article-read-more{
    color: var(--white);
}

.modal{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--light-blue);
}

.terminal{
    overflow: auto;
    margin: 10vh auto;
    position: relative;
    padding: 50px 20px;
    background-color: #0e1019;
    animation: modal 1s;
    width: 80%;
    height: calc(80% - 100px);
    animation-fill-mode: forwards;
    position: relative;
    font-family: "Anonymous Pro";
    border: .05rem solid var(--white);
    border-radius: 4px;
    opacity: .95;
}

.terminal[data-theme="dark"]{
    background-color: #0e1019 !important;
    color: var(--white) !important;
}
.terminal[data-theme="light"]{
    background-color: #f7f7f7 !important;
    color: var(--navy) !important;
}
.terminal[data-theme="sky"]{
    background-color: #673ab7 !important;
}
.terminal[data-theme="tokyo night"]{
    background-color: #16161e !important;
    color: rgb(120, 124, 153) !important;
}
.terminal[data-theme="atom"]{
    background-color: #161719 !important;
    color: rgb(197, 200, 198) !important;
}
body[data-theme="light"] .terminal{
    background-color: #f7f7f7;
    color: var(--navy);
}
body[data-theme="light"] .terminal a{
    color: #76a7a5 !important;
}

body[data-theme="light"] .terminal .terminal-user, .terminal[data-theme="light"] .terminal-user{
    color: var(--sky);
}

.terminal[data-theme="tokyo night"] .terminal-user{
    color: rgb(65, 166, 181) !important;
}
.terminal[data-theme="atom"] .terminal-user{
    color: rgb(133, 190, 253) !important;
}


.terminal a{
    color: #81e2de;
}

.window-manager{
    position: absolute;
    right: 20px;
    top: 20px;
}

.modal-maximize-btn, .modal-close-btn{
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    background: #00ca4e;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    padding: .2rem;
}

.modal-maximize-btn{
    background: #00ca4e;
}

.modal-maximize-btn:hover::after{
    content: "□";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    columns: var(--contrast-color);
}

.modal-close-btn{
    background: #ff4743;
}

.modal-close-btn:hover:after{
    content: "×";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    columns: var(--contrast-color);
}


@keyframes modal{
    0%{
        transform: scale(0);
    }
    70%{
        transform: scale(.92);
    }
    80%{
        transform: scale(.9);
    }
    100%{
        transform: scale(1);
    }
}
.terminal-user{
    color: #47e295;
    margin-right: .5rem;
}

.terminal-row{
    display: flex;
    font-size: 1.2rem;
    margin: 1rem 0;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}

.terminal-log{
    word-wrap: break-word;
    min-width: 30%;
    display: block;
}

.terminal-input-command{
    flex-grow: 1;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
}
.terminal-input-command:focus{
    outline: none;
}

.copyright-notice{
    margin: 0.5rem;
}

.lang{
    margin: 0.5rem 0 1rem 0;
}

.lang-select{
    background: inherit;
    color: var(--contrast-color);
    border: 1px solid transparent;
    -moz-appearance: none;
    line-height: 1rem;
    width: fit-content;
    width: -moz-fit-content;
    cursor: pointer;
}

.lang-select option{
    background: var(--dark-navy) !important;
}

@media only screen and (min-width: 1400px){
    .intro, .articles{
        min-height: calc(90vh - 24rem);
        padding: 12rem 0;
    }
}
@media only screen and (max-width: 1080px){
    .container{
        padding: 0 100px !important;
    }
}


@media only screen and (min-width: 768px){
    .social-link, .email-link{
        bottom: 50%;
        width: 40px;
        position: fixed;
        z-index: 8;
        color: var(--contrast-color);
        transform: translate(0, 50%);
    }

    .social-link{
        left: 1rem;
    }
    .email-link{
        right: 1rem;
    }
    .email-link-flex{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .email-link a{
        writing-mode: vertical-rl;
        margin: 1rem .5rem !important;
    }
    .email-link a:hover{
        color: #50b69e;
    }
    
    .social-link-item, .email-link a{
        margin: 1rem 0;
        display: block;
        text-decoration: none;
        color: var(--contrast-color);
        transition: .5s;
    }
    .social-link-item:hover, .email-link a:hover{
        color: #50b69e;
    }
    
    .social-link::before, .email-link .email-link-flex::before{
        content: "";
        background-color: var(--light-blue);
        width: 1px;
        height: 100vh;
        display: block;
        margin: 0 auto;
        opacity: .7;
    }
    
    .social-link::after, .email-link .email-link-flex::after{
        content: "";
        background-color: var(--light-blue);
        width: 1px;
        height: 100vh;
        display: block;
        margin: 0 auto;
        opacity: .7;
    }
    body[data-theme="light"] .social-link::before, body[data-theme="light"] .email-link .email-link-flex::before,
    body[data-theme="light"] .social-link::after, body[data-theme="light"] .email-link .email-link-flex::after{
        background-color: var(--sky);
    }
}

@media only screen and (max-width: 767px){
    .container{
        padding: 0 50px !important;
    }
    .topnav-ham{
        display: block !important;
    }
    .topnav-menu{
        position: fixed;
        top: 0;
        left: 0;
        width: 0vw;
        overflow: hidden;
        height: 100vh;
        transition: .8s;
        background-color: var(--dark-navy);
        z-index: 3;
    }
    .topnav-menu a:first-of-type{
        margin-top: calc(50vh - 6.6rem);
    }
    .topnav-menu a{
        text-align: center;
        font-size: 1.3rem;
        margin: 3rem;
        color: var(--contrast-color);
    }
    body[data-theme="light"] .topnav-menu a{
        color: var(--contrast-color);
    }
    .topnav-exit-menu{
        display: block !important;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 2rem;
        cursor: pointer;
        color: var(--contrast-color);
    }
    .topnav-menu a{
        display: block;
    }
    .intro{
        min-height: calc(80vh - 16rem);
    }
    .article-preview, .article-content{
        width: 100%;
    }
    .article-content{
        margin: 0 -1rem;
        text-align: left;
        top: 0 !important;
        opacity: .5 !important;
        left: 0 !important;
    }
    .article-preview{
        opacity: .3;
    }
    .article-content-description{
        background: none;
        padding: 0;
        width: calc(100% - 2rem);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    body[data-theme="light"] .article-content-description{
        background-color: transparent;
    }
    .article-svg{
        width: 1.25rem;
    }
    .article-box:nth-child(2n) .article-content{
        left: 2rem;
    }
    .social-link{
        display: grid;
        grid-template-columns: auto auto auto auto;
        margin: auto;
        max-width: 300px;
    }
    .social-link-item{
        color: var(--contrast-color);
        margin: 1rem auto;
        width: 2rem;
    }
    .email-link{
        display: none;
    }
    .site-setting{
        bottom: 25%;
        right: 1.2rem;
    }
}

@media only screen and (max-width: 520px){
    .container{
        padding: 0 25px !important;
    }
    .about-me{
        min-height: calc(140vh - 16rem);
    }
    .about-me-content{
        width: 100%;
    }
    .about-me-pp{
        padding: 40px;
        width: -webkit-fill-available;
        width: fill-available;
        width: -moz-available;
        z-index: -1;
    }
    .about-me-pp::before{
        margin: 60px !important;
        width: calc(100% - 80px);
        height: calc(100% - 80px);
        transform: translate(5px, 5px);
    }
    .about-me-pp:hover::before{
        transform: translate(1px, 1px);
    }
    .contacts-content{
        grid-template-columns: auto;
        margin-top: 0;
    }
    .contacts-content-text{
        font-size: 1rem;
    }
    .contacts-link-btn{
        max-width: 70%;
        margin: 1rem auto;
    }
    .modal-maximize-btn{
        display: none;
    }
    .terminal{
        width: -webkit-fill-available;
        width: -moz-available;
        width: fill-available;
        height: calc(100% - 4.1rem);
        margin: 0;
        padding: 2rem;
    }
    .terminal-row{
        font-size: .9rem;
    }
}

@media only screen and (max-width: 368px){
    .about-me{
        min-height: calc(120vh - 16rem);
    }
}