@charset "utf-8";

@import url(ress.css);

@font-face {
    font-family: 'Gabriella';
    src: url(../font/fonnts.com-Gabriella_Heavy.otf) format('opentype');
    font-style: normal;
    font-weight: normal;
}

:root{
    --mainColor:rgb(18, 18, 18);
    --subColor:#E3DFDC;
    /* --subopaColor:#e3dfdc40; */
    --transTextColor:#C5D174;
    --hintTextColor:#fff;
    --decorateColor:#F05D22;
    --bgColor:#10322B;
}
li{
    list-style: none;
}
a:link,
a:visited,
a:hover{
    text-decoration: none;
    color: var(--hoverTextColor);
}
body{
    font-family: 'Gabriella', 'Urbanist', sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--subColor);
    height: 100%;
    position: relative;
    width: 100%;
}

/* #scroll
================================================== */
.fade-in{
	opacity: 0;
	transform: translateY(20px); 
	transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
.fade-in.active{
	opacity: 1;
	transform: translateY(0);
}

/* #line
================================================== */
.line_bl{
	width: 98%;
	height: 100%;
	border-left: 1px solid var(--mainColor);
	border-right: 1px solid var(--mainColor);
	margin: 0 auto;
	position: absolute;
}
.line_wh{
	width: 98%;
	height: 100%;
	border-left: 1px solid var(--subColor);
	border-right: 1px solid var(--subColor);
	margin: 0 auto;
	position: absolute;
}