/* fonts */
@font-face{font-family: "Atkinson-Hyperlegible-Regular";src: url("../font/AtkinsonHyperlegible-Regular.ttf");}
@font-face{font-family: "Atkinson-Hyperlegible-Bold";src: url("../font/RubikGlitch.ttf");}
@font-face{font-family: "Atkinson-Hyperlegible-Italic";src: url("../font/AtkinsonHyperlegible-Italic.ttf");}
@font-face{font-family: "Sometype-Mono-Regular";src: url("../fonts/sometype-mono-regular.ttf");}
:root {
    --hyperlegible: 'Atkinson-Hyperlegible-Regular',Helvetica, Arial, sans-serif;
    --hyperlegible-bold:'Atkinson-Hyperlegible-Bold',Helvetica, Arial, sans-serif;
    --hyperlegible-ita:'Atkinson-Hyperlegible-Italic',Helvetica, Arial, sans-serif;
    --mono:'Sometype-Mono-Regular',Helvetica, Arial, sans-serif;
}

/* colors */
:root {
--big: #510023;
--doom: #a31a3e;
--blaze: #d13c5f;
--amy: #000000;
--amy-50: rgba(72,25,49,.5);
--cream: #3d2f32;
--infinite: #fff5f9;
--infinite-50: rgba(255,245,249,.5);
--grounder: #fc0717;
}

/* scroll */
/* ff */
  * {
    scrollbar-width: auto;
    scrollbar-color: var(--big) var(--cream);
  }
/* chro, ow the edge, saf */
  *::-webkit-scrollbar {width: 16px;}
  *::-webkit-scrollbar-track {background: var(--cream);}
  *::-webkit-scrollbar-thumb {
    background-color: var(--big);
    border-radius: 10px;
    border: 3px solid var(--cream);
  }
/* text select */
::-moz-selection {background: var(--amy-50);}
::selection {background: var(--amy-50);}

/* resets */
html{background-attachment: fixed;background-image:radial-gradient(50% 50% at 50% 50%, #FFE5E5FF 7%, #073AFF00 100%),radial-gradient(70% 70% at 100% 1%, #FCADACFF 7%, #073AFF00 100%),radial-gradient(70% 70% at 1% 1%, #E1AECAFF 7%, #073AFF00 100%),radial-gradient(70% 70% at 1% 100%, #FCADACFF 7%, #073AFF00 100%),radial-gradient(70% 70% at 100% 100%, #E1AECAFF 7%, #073AFF00 100%),linear-gradient(125deg, #FFE5E5FF 0%, #FFE5E5FF 100%);}
body{margin:0;padding:0px;}
article{padding:30px;max-width:700px;margin:auto;}
.abs {position: absolute;}
.rel{position: relative}
html{overflow-x: hidden;}

/* footer always bottom, mobile nav always top */
body{display: flex; flex-direction: column;}
main{flex: 1 0 auto;}
footer{flex-shrink: 0;}
/* mobile nav disappears */ @media (min-width:1075px){
html, body{height: 100%;}
}
/* mobile footer appears */ @media (max-width:519px){
main{min-height: calc(100vh - 257px);}
}
/* normal nav and footer */ @media (min-width:520px) and (max-width:1074px){
main{min-height: calc(100vh - 252px);}
}

/* nav */
.top-nav a {text-decoration: none;}
.top-nav ul{list-style: none;padding-left: 0;}
.top-nav nav li:nth-child(1), .top-nav nav li:nth-child(2){position: fixed;}
@media (min-width:1075px){
.flower-left,.flower-right{display: none;}
.top-nav nav ul li{position: absolute;}
.top-nav{position: fixed;padding:10px;}
.top-nav li{backdrop-filter: blur(4px);
border-radius: 120px;width:120px;height:120px;
box-shadow: inset var(--infinite-50) 0 0 30px 6px;}
.top-nav nav li:nth-child(1){left: 30px;}
.top-nav nav li:nth-child(2){right: 30px;}
.kao-splash{top:15px;left:30px;}
.txt-splash{top:73px;left:30px;}
.kao-blawwwg{top:31px;left:46px;}
.txt-blawwwg{top:73px;left:19px;}
.top-nav nav li{transition: all 0.4s ease;}
.top-nav nav li:hover a, .top-nav nav li:hover img, .top-nav nav li:hover picture, .top-nav nav li:hover source{opacity: 1;}
.top-nav nav li:nth-child(1):hover{rotate:-5deg;}
.top-nav nav li:nth-child(2):hover{rotate:5deg;}
}
@media screen and (prefers-reduced-motion: reduce) {
.top-nav nav li:nth-child(1):hover,.top-nav nav li:nth-child(2):hover{rotate:0deg;}
}
@media (max-width:1074px){
.flower-left{position: fixed;top:18px;left:30px;}
.flower-right{position: fixed;top:18px;right:30px;}
.txt-splash{top:2px;left:25px;}
.txt-blawwwg{top:2px;right:-62px;}
.top-nav nav ul{margin: 0;}
.top-nav nav li:nth-child(1){left: 30px;top:14px}
.top-nav nav li:nth-child(2){right: 115px;top:14px}
.kao-nav{display: none;}
.top-nav{top: 0; position: sticky;z-index: 10000;}
.top-nav nav{background: var(--cream);height: 30px;}
.top-nav:after{height:30px;background: url("../img/bg-wiggle-top-2025.png") repeat-x bottom center;display: block;content: "";background-size: 50px auto;}
.top-nav div{background: var(--cream);padding-top:15px;padding-bottom:30px;}
}

/* bgs */
html{background-image:radial-gradient(50% 50% at 50% 50%, #FFE5E5FF 7%, #073AFF00 100%),radial-gradient(rgba(168,114,137,1) 0%, rgba(150,91,123,1) 44%, rgba(81,35,66,1) 98%);background-attachment: fixed;}

/* footer */
footer nav a{color:var(--big);}
footer ul{list-style: none;padding-left: 0;}
footer ul li {position: relative;}
footer nav ul{margin: 0;position: relative;}
footer nav li:nth-child(1):before{background-image: url('../img/control-tri.png');}
footer nav li:nth-child(2):before{background-image: url('../img/control-o.png');}
footer nav li:nth-child(3):before{background-image: url('../img/control-x.png');}
footer nav ul li {padding-left: 40px;display: inline-block;letter-spacing: .03rem;}
footer nav ul li:before {content: '';position: absolute;background-size: cover;width: 26px;height: 26px;left: 0;top: 5px;}
@media (min-width:520px){
footer{height:192px;bottom:0;position: relative;background:url("../img/bg-wiggle-2025.png") repeat-x bottom center;background-size: 160px;}
footer nav ul {text-align: center;top: 135px;padding-bottom: 0px;}
footer nav ul li{margin-left:30px;}
footer nav li:nth-child(1){margin-left:0px;}
}
@media (max-width:519px){
footer nav{background: var(--cream)}
footer:before{height:40px;background: url("../img/bg-wiggle-2025.png") repeat-x bottom center;display: block;content: "";background-size: 50px auto;}
footer div{background: var(--cream);padding-top:30px;padding-bottom:15px;}
footer ul{width:160px;margin-left: auto !important;margin-right: auto !important;padding-top: 10px;}
footer nav ul li{display: block;padding-bottom:30px;}
}

/* blog index */
.posts{margin-bottom: 30px;}
.posts{padding-bottom: 20px;}
.posts time {margin-top:30px;}
.posts time{display: block;}
.posts a{text-decoration: none;}
.posts a:hover{text-decoration:underline wavy;text-underline-position: under;}

/* post container */
section {backdrop-filter: blur(4px);
border-radius: 25px;
border: 2px solid var(--infinite-50);
box-shadow: inset 0 0 50px 6px var(--cream);
padding: 25px 70px 0px 70px;}

/* text */
@media (min-width:520px){html{font-size:20px;}footer{font-size: .8rem;}}
@media (max-width:519px){html{font-size:18px;}footer{font-size: .9rem;}}
html{line-height:1.7rem;}
body,p{font-size: 1rem; letter-spacing:.05rem;}
body,p,h1,h2,h3{margin-top:0;}

article, article p, article a, section ul{letter-spacing: 0;}
b, strong {font-family: var(--hyperlegible-bold);font-weight: normal;}
h1,h2,h3{font-family:var(--hyperlegible-bold);font-weight: normal;margin-bottom: 15px;}
body,p{font-family:var(--hyperlegible);color:var(--doom);}
h1{font-size: 2rem; line-height:2.2rem;color:var(--big);text-align: center;margin-top: 30px;margin-bottom: 30px;}
h2{font-size: 1.5rem; color:var(--big);}
p{margin-bottom: 1.3rem;}

/* links */
a{transition: all 0.4s ease;font-family:var(--hyperlegible-bold);}
a, a:active{color:var(--big);text-decoration:underline wavy;text-underline-position: under;}
.posts a, .posts:active{color:var(--big);border-bottom: 0;}
a:hover,a:focus{opacity:85%;}
nav a{border-bottom: 0;}
.block-link::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;}

/* lists */
section ul{list-style: none;padding-left: 1em;margin-bottom: 1.3rem;margin-top: -0.5em}
section ul li {position: relative;padding-left: 35px;}
section ul > li:not(:last-child){margin-bottom: 15px;}
section ul li:before {
content: '';
width: 21px;
height: 21px;
position: absolute;
background-size: cover;
left: 0;
top: 7px;
}
section li:before{background-image: url('../img/favicon.png');}

/* imgs */
.imgPixel{image-rendering: pixelated;image-rendering: -moz-crisp-edges;image-rendering: crisp-edges;}
.imgBlog{width: 100%;max-width: 370px; height:auto;margin-left: auto;margin-right: auto;display: block;margin-top:30px;margin-bottom:30px;}
.img100{max-width:100%; height:auto;margin-left: auto;margin-right: auto;display: block;border-radius: 3px;margin-bottom: 15px;}
.imgSep{vertical-align: 5px;}
@media(max-width:666px){.imgSep{vertical-align: 3px;}}
hr{background-image: url("../img/wiggle.png");height:100px;border:0;background-position: center;background-repeat: no-repeat;background-size: 150px auto;}