css page start setting 처음 세팅

<link rel="shortcut icon" href="./assets/img/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
<link rel="stylesheet" href="./assets/css/common.css">

 

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"); 

/* SET */
:root { 
--color-link:rgba(255,255,255,0.9); 
--color-text:#FEFFFF;
--color-main:#1CC8FF; 
--color-fontgray:#E8E8E8; } 
html { font-size: 16px; } 
body { margin:0 auto; overflow-y:auto; position:relative; width:100%; -ms-overflow-style:none; display:flex; width:100%; height:max-content; min-height:100vh; background-color:#0e0d2c; background-image: url(../img/bg.jpg); background-repeat:no-repeat; background-size: cover; } 
body,
button,
input,
select,
textarea { font-family:"Pretendard Variable", Pretendard, -apple-system, "Apple SD Neo Gothic", sans-serif; line-height:1.6; color:var(--color-text) } 

a { color:var(--color-link); text-decoration:none; transition:all 0.2s } 
h1 { font-size:36px } 
h2 { font-size:24px } 
h3 { font-size:22px } 
h4 { font-size:18px } 
.disable { display:none !important } 
.gCenter { display:flex; align-items:center; justify-content:center } 
input,
select,
button { color-scheme: dark; display:flex; align-items:center; justify-content:start; border:1px solid rgba(255, 255, 255, 0.40); height:40px; background:rgba(3, 2, 17, 0.3); line-height:1; color:rgba(255,255,255,0.8); border-radius:2px } 
input:focus { border:1px solid #599fd4 } 
input::placeholder { color:rgba(255,255,255,0.6) } 
option { background:#1F2145 }  
.bold { font-weight: bold !important; } 
.num { font-family: 'Open Sans', sans-serif !important; }
.container { display:flex; flex-direction:row; width:100%; height:max-content; min-height:100vh } 
.contentsArea { padding:3rem; margin-top: 120px; border-left: 1px solid #4C4B6A; display: flex; min-height: calc(100vh - 121px); align-items: center; flex-direction:column; width:calc(100% - 115px); height:max-content; justify-content: start; margin-left: 116px; z-index: 20; } 
.contentsArea { animation:fadein .5s; -moz-animation:fadein .5s; -webkit-animation:fadein .5s; -o-animation:fadein .5s } 
@keyframes fadein { 
 from { opacity:0 } 
 to { opacity:1 } 
 }
@-moz-keyframes fadein { 
 from { opacity:0 } 
 to { opacity:1 } 
 }
@-webkit-keyframes fadein { 
 from { opacity:0 } 
 to { opacity:1 } 
 }
@-o-keyframes fadein { 
 from { opacity:0 } 
 to { opacity:1 } 
 }