@charset "utf-8";
/* CSS Document */

body{
	font-size:16px;
    font-family: SF Pro Display,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,Microsoft YaHei UI;
}

.backgroundBlur{
    width:100%;
    height:100%;
    position: fixed;
    margin: 0;
    top:0;
    left:0;
    background:url("../../images/Fontpage/Background-Desktop.jpg") center no-repeat;
    background-size: cover;
    padding:1px;
    box-sizing:border-box;
    z-index: -3;
}

.backgroundBlur:after{
    content: "";
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    background: inherit;
    filter: blur(5px);
    z-index: -2;
}

.backgroundImage{
    height:100%;
    position: fixed;
    padding: 0px;
    margin: 0px;
    top:0;
    left:0;
    background:url("../../images/Fontpage/Background-Desktop.jpg") center no-repeat;
    background-size: cover;
    z-index: -1;
     
}

@media (max-width:800px){
    .backgroundImage{
        background:url("../../images/Fontpage/Background-Mobile.jpg") center no-repeat;
	    background-position-y: 35%;
    }
    .backgroundBlur{
        background:url("../../images/Fontpage/Background-Mobile.jpg") center no-repeat;
		background-position-y: 35%;
    }
}

.divbackgroundcolor{
    height:100%;
    display: flex;
    align-content: center;
    justify-content: center;
    position: fixed;
    margin: 0;
    padding: 0;
    top:0;
    left: constant(safe-area-inset-left) ; /*如果未竖屏时为0*/
    left: env(safe-area-inset-left) ;
    right: constant(safe-area-inset-right) ; /*如果未竖屏时为0*/
    right: env(safe-area-inset-right) ;
    background:rgba(0,0,0,.5);
}

.languageselector{
    height: 5vh;
    color:white;
}

.languageselector p{
    vertical-align: middle;
    text-align: right;
    font-size: 2vh;
    font-weight: bold;
    text-shadow: 0.2vh 0.1vh 0.5vh #000;
    margin: 2vh 2vw;
}


.languageselector span a{
   text-decoration: none;
   color: #FFFFFF;
}

.languageselector span a:hover{
   text-decoration: none;
   border-bottom: 0.3vh solid #FFF;
   transition: all 150ms ease-in-out;
}

.selectCN{
    margin-right:0.5vw;
}

.selected{
    border-bottom: 0.3vh solid #FFF;
}

.navguide{
    float: left;
    width: 40vh;
    height: min-content;
    color:white;
    margin:6% 3%;
    align-self:end;	
}

.navguide h1{
    font-size: 4.5vh;
    margin: 5% 0%;
    margin-bottom: 0.8%;
}

.navguide h2{
    font-size: 3.5vh;
    margin: 4% 0%;
    margin-top: 0%;
}

.navguide p{
    font-size: 2.5vh;
    margin: 3% 0%;
}

.content{
    height: auto;
    width: 100%;
    max-width: 2000px;
    display: grid;
}

#aboutme{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    transform:translateY(101%);
    transition: 800ms all;
    transition-timing-function: cubic-bezier(0.5, -0.2, 0.2, 1);
}

.flex.content{
    display: flex;
    height: 100%;
}

#aboutme iframe{
    height: 100%;
    width: 100%;
    border: none;
}

#CloseAboutme{
    width: 2em;
    height: 2em;
    position: absolute;
    right: 0px;
    transition: 200ms all;
    transition-timing-function: cubic-bezier(0.5, -0.2, 0.2, 1);
}

.fbutton{
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0px;
    background: #ec2f1a;
}

.CloseCanvas path{
    transition: 200ms all ease-in-out;
}