/*
    1.2em 상위의 1.2배
    0.8rem 최상위의 0.8배

    ex, ch는 폰트와 폰트사이즈로 계산
    ex는 현제 폰트의 'x'높이값 혹은 em의 절반값
    x높이 값은 소문자 'x'의 높이값이다
    ex는 글자위치의 미세한조정에 쓰인다
    예) position: relative; bottom: 1ex;
    예) wigth: 40ch; // 현제 폰트로 문자열40자리
    간단히 말해 ch는 폰트의 가로길이
    ex는 세로길이를 기준으로 계산한다

    1vh 뷰포트 높이 1/100 크기
    1vw 뷰포트 넓이 1/100 크기

    브라우저 창크기가 1100px * 700px 일때
    1vmax = 11px   1vmin = 7px
    뷰포트의 가로 세로중 가장 긴것 혹은 짧은것을 중심으로 계산함

    1fr = 사용가능한 공간의(모든 마진, 갭 등등) 1/n

    .blog-card a:link,
    .blog-card a:visited { 방문 전 후
        color: inherit;
        text-decoration: none;
    }
*/



:root {
    --page_width: 1200px;

    --gap_section: 55px;
    --gap_out: 15px;
    --gap_in: 10px;
    --gap_text: 5px;

    --radius_in: 15px;
    --radius_out: 20px;

    --solid: 1.5px;


    --logoColor: rgb(255, 224, 100);
    --logoColor-hover: rgb(230, 185, 40);

    --backgroundColor: rgb(246, 246, 248);
    --lineColor: rgb(234, 234, 231);
    --alphaColor: rgb(244, 244, 245);

    --textColor-default: rgb(0, 0, 0);
    --textColor-light: rgb(193, 193, 193);
}

:root.dark-theme {
    --backgroundColor: rgb(25, 25, 27);
    --lineColor: rgb(50, 50, 52);
    --alphaColor: rgb(31, 31, 33);

    --textColor-default: rgb(235, 235, 235);
    --textColor-light: rgb(101, 101, 101);
}


@font-face {
    font-family: 'School';
    src: url('/resources/font/학교안심그림일기.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color 2s ease, color 2s ease;
}

button {
    border: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    background: none;
}

input {
    font-family: 'School', sans-serif;
    background-color: var(--backgroundColor);
}

.text-large {
    font-size: 1rem;
    color: var(--textColor-default);
}

.text-mid {
    font-size: 0.8rem;
    color: var(--textColor-default);
}

.text-small {
    font-size: 0.6rem;
    color: var(--textColor-default);
}

.text-large.bold,
.text-mid.bold,
.text-small.bold {
    font-weight: bold;
}

.text-large.light,
.text-mid.light,
.text-small.light {
    color: var(--textColor-light);
}

html {
    font-size: 20px;
    font-family: 'School', sans-serif;
    background-color: var(--backgroundColor);
    color: var(--textColor-default);
    padding: 0 var(--gap_in);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    max-width: var(--page_width);
    margin: 0 auto;
    flex: 1;
    width: 100%;
}

.card-Highlight {
    box-shadow: 0 0 7px rgba(110, 110, 110, 0.1);
    border-radius: var(--radius_out);
}

.dark-theme .card-Highlight {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}


.title {
    border-left: 5px solid var(--logoColor);
    margin-bottom: var(--gap_out);
    padding-left: var(--gap_in);
}

.title a {
    color: inherit;
    text-decoration: none;
}

section {
    margin: var(--gap_section) 0;
}