@font-face {
    font-family: 'mushin';
    src: url(/static/fonts/mushin.otf);
}
:root {
    --bg: #ffffff;
    --text: #000000;
    --subtext: gray;

    --accent: rgb(255, 141, 33);
    --header-bg: hsl(29, 100%, 78%);
}
*{
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    font-family: 'mushin',sans-serif;
}
body{
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    background: var(--bg);
    color: var(--text);
}
html, body {
    margin: 0;
}
main{
    flex: 1;
    padding-left: 25px;
}
p{
    color: var(--subtext);
    font-size: 20px;
}
a{
    color: var(--accent);
    font-size: 20px;
}
.description{
    background: var(--bg);
}
h3{
    font-size:25px;
}
.hl{
    height: 30px;
    color:red
}
.title{
    font-size: 40px;
    color:var(--accent);
}
.yel{
    color:darkkhaki
}
.dark{
    color:rgb(0, 187, 255)
}
.green{
    color:greenyellow
}
header {
position: fixed; /* ヘッダーを固定する */
top: 0; /* 上部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
width: 100%; /* ヘッダーの横幅を指定する */
height: 60px; /* ヘッダーの高さを指定する */
background-color: var(--header-bg); /* ヘッダーの背景色を指定する */
color: #000000; /* ヘッダーのフォントの色を指定する */
font-size: 20px; /* ヘッダーのフォントサイズを指定する */
padding-left: 10px;    /* ←横の余白だけ残す */
z-index: 100;
}
footer {
display: flex; /* フッターをフレックスコンテナにする */
height: 65px; /* フッターの高さを指定する */
width: 100%;
background-color: var(--header-bg); /* ヘッダーの背景色を指定する */
color: #FFFFFF; /* フッターのフォントの色を指定する */
padding-left: 10px;    /* ←横の余白だけ残す */
top: 0; /* 上部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
}
#footer {
     margin-top:auto; 
}
ul{
    font-size: 20px;
}
.blog img {
    max-height: 400px;
    width: auto;
}
body.dark {
    --bg: #121212;
    --text: #eaeaea;
    --subtext: #bbbbbb;

    --accent: #65d6ff;
    --header-bg: #1f1f1f;
    color:rgb(0, 187, 255)
}
@media (max-width: 800px){

    main{
        padding:15px;
    }

    .title{
        display:block;
        font-size:30px;
        margin-bottom:5px;
    }

    header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;

    }

    p,
    a,
    ul{
        font-size:17px;
    }

    h2{
        font-size:28px;
    }

    h3{
        font-size:22px;
    }

    footer{
        padding:10px;
    }

    .title {
    font-size: 28px;
    }



}