body,html{margin:0;padding:0}html{font-size:10px;font-family:"Lora",serif}body{width:100vw;overflow-x:hidden}body.thame-day{color:#000;background-color:#fff}body.thame-day p>code,body.thame-night{color:#fff;background-color:#000}body.thame-night p>code{color:#000;background-color:#fff}body.thame-green{color:#050;background-color:#eaeabb}body.thame-green p>code{color:#eaeabb;background-color:#050}nav,section aside{position:fixed;left:0}nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:"Playfair Display",serif;top:0;height:5rem;font-size:2rem}nav a{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;display:block}nav a::after{content:"";transition:width .5s;display:block;position:relative;background-color:#f50;top:.5rem;width:0;height:.2rem}nav a:hover{color:#f50}main,nav,nav a:hover::after{width:100%}nav #btn_about,nav #btn_blog,nav #btn_works{position:absolute;left:10rem;top:50%;translate:0-50%}nav #btn_about,nav #btn_works{left:20rem}nav #btn_about{left:30rem}nav #btn_thame{right:20rem}nav #btn_lang,nav #btn_thame,nav img{position:absolute;top:50%;translate:0-50%}nav #btn_lang{right:5rem}nav img{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;left:2rem}main{padding-left:5rem;padding-right:5rem;margin-top:5rem;margin-bottom:5rem;font-size:1.5rem}main #bloglist{display:flex;flex-direction:column}main #bloglist .blog-li h4{cursor:pointer;font-size:1.8rem}footer a:hover,main #bloglist .blog-li h4:hover,main #list-container .list-item h3,main #list-container .list-item ul li:hover,section aside div:hover{-webkit-text-decoration:underline;text-decoration:underline}footer,main #list-container{display:flex;gap:20rem}main #list-container .list-item h3{font-family:Arial,Helvetica,sans-serif;font-size:2rem}main #list-container .list-item ul{list-style-type:square;font-size:2rem;padding:0}main #list-container .list-item ul li{margin:0;padding:0;cursor:pointer}footer{font-size:1.5rem;width:100%;height:5rem;justify-content:center;position:fixed;bottom:0;gap:5rem;align-items:center}footer a{color:inherit;-webkit-text-decoration:none;text-decoration:none}footer a:visited{color:purple}footer.floor{position:static}section{width:90%}section aside{top:5rem;padding-top:2rem;width:20%;padding-right:2rem;overflow-x:hidden;overflow-y:auto}section aside div{cursor:pointer;margin-top:1rem;margin-bottom:1rem}section aside #back{margin-left:2rem}section aside #back,section aside .title1{font-size:2rem;font-weight:700}section aside .title2{font-size:1.8rem;font-weight:700;margin-left:1rem}section aside .title3{font-size:1.8rem;font-weight:400;margin-left:2rem}section aside .title4{font-size:1.5rem;font-weight:700;margin-left:3rem}section aside .title5{font-size:1.5rem;margin-left:4rem}section aside .title6{font-size:1.5em;margin-left:5rem}section article{width:80%;margin-left:20%;font-size:1.5rem}@media screen and (max-width:768px){*{box-sizing:border-box}body.thame-day aside{border-left:.5px solid gray;border-bottom:.5px solid gray}body.thame-night aside{border-left:.5px solid whate;border-bottom:.5px solid whate}body.thame-green aside{border-left:.5px solid green;border-bottom:.5px solid green}main,nav{font-size:1.2rem}main{padding-left:2rem;padding-right:2rem}footer{font-size:1rem}nav{display:flex;align-items:center;gap:2rem}nav #btn_about,nav #btn_blog,nav #btn_lang,nav #btn_thame,nav #btn_works,nav img{position:static;translate:0 0}section aside{position:static;padding:0;width:100%}nav img,section aside #back{margin-left:2rem}section aside #back,section aside .title1{font-size:1.5rem;font-weight:700}section aside .title2{font-size:1.2rem;font-weight:700;margin-left:1rem}section aside .title3{font-size:1.2rem;font-weight:400;margin-left:2rem}section aside .title4{font-size:1rem;font-weight:700;margin-left:3rem}section aside .title5{font-size:1rem;margin-left:4rem}section aside .title6{font-size:1em;margin-left:5rem}section article{width:100%;padding:0;margin:0;font-size:1.2rem}section article pre{overflow-x:auto}main #list-container{flex-direction:column;gap:1rem}main #list-container .list-item h3{font-size:1.5rem;-webkit-text-decoration:underline;text-decoration:underline}main #list-container .list-item ul{list-style-type:none;font-size:1.5rem;padding:0}}