/* Quinn Thorne January 9th 2026 */ /* GLOBAL */ *, *::before, *::after{ box-sizing: border-box; } :root{ --main-color: #ffffff; --accent: #ff4992; --font-border: 1px 1px 0 #390012, -1px -1px 0 #390012, 0 1px 0 #390012, 1px 0 0 #390012; --background: #390012; --boxbg: #54001670; } body, html{ margin: 0; padding: 0; } h1, p{ margin: 0 0 1em; } p{ line-height: 2em; } .big{ font-size: 1.3em; text-shadow: 1px 1px 5px #0b0004, -1px -1px 5px #ff0051, 0 1px 5px #ff0051, 1px 0 5px #ff0051; } header{ padding-top: 3em; } body{ text-align: center; background-color: var(--background); background-image: url(https://file.garden/ZLmAKieVhBA68gj1/my-site/assets/media/random/images/Hubble_Veil_SMALL_potw2508a.jpg); background-repeat: no-repeat; background-size: cover; background-blend-mode: overlay; background-attachment: fixed; color: var(--main-color); font-family: 'Trebuchet MS', Tahoma, sans-serif; overflow: scroll; min-height: 100vh; text-shadow: var(--font-border); } #wrapper{ margin: 0; height: 100%; } main{ overflow: hidden; width: 80vw; margin: auto; /*color: var(--main-color); background-color: var(--boxbg); padding: 2em; border: 1px solid var(--accent); border-radius: 50px;*/ } main>p{ width: 80vw; margin: 20px auto; } .separator{ display: block; width: 80%; margin: 1em auto; border: 1px solid var(--accent); } a{ text-decoration: none; } /* unvisited link */ a:link { color: var(--main-color); } .accent a:link{ color: var(--accent) } /* visited link */ a:visited { color: var(--main-color); } .accent a:visited{ color: var(--accent) } /* mouse over link */ a:hover { color: var(--accent); } .accent a:hover{ color: var(--main-color) } /* selected link */ a:active { text-shadow: 2px 2px 2px var(--accent), -2px -2px 2px var(--accent); color: var(--accent); } ul{ text-align: left; list-style-type: '\2605'; } ul li::marker{ color: var(--accent); } .accent{ color: var(--accent); text-shadow: var(--font-border); font-weight: bold; } h1{ color: var(--accent) } .list-validator{ list-style-type: none; } footer{ margin-top:5vh; padding: 1.5vh; min-height: 5vh; } nav{ margin-bottom: 1vh; font-size: 1.5em; } /* 07.08.2024 */ /* Skip Nav */ .skip-nav-link{ position: absolute; transition: transform .25s ease-in; background: var(--accent); padding: 0.5em 1.5em; border-radius: 0 0 0.5em 0.5em; border: 1px solid #000; text-decoration: none; top: -50px; left: 7%; } .skip-nav-link:focus{ transform: translateY(145%); } /* Nav */ nav ul{ display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; padding: 0; margin: 0; text-align: center; } nav ul li{ display: inline; padding: .5em; font-size: 1.2em; line-height: 1.5em; } nav ul li:hover{ color: var(--main-color); } /* Nav End */ /* ABOUT .image-1{grid-area: logo;} .image-2{grid-area: morvay;} .image-3{grid-area: aster;} .image-4{grid-area: kuya;} .image-5{grid-area: quincy;} .image-6{grid-area: edmond;} .image-7{grid-area: eiden;} .image-8{grid-area: topper;} .image-9{grid-area: rin;} .image-10{grid-area: yakumo;} .image-11{grid-area: blade;} .image-12{grid-area: olivine;} .image-13{grid-area: garukaru;} .image-14{grid-area: dante;} .grid-area{ display: grid; grid-template-areas: '. . . logo . . .' '. . aster kuya quincy . .' '. morvay . . . edmond .' 'eiden . . topper . . rin' '. yakumo . . . dante .' '. . blade olivine garukaru . .' ; align-items: center; justify-content: center; padding: 5vh; } .grid-area img{ max-width: 30px; } .image-4, .image-12{ justify-self: center; } .image-1{ min-width: 100px; justify-self: center; padding: 3vh 0; } .image-8{ min-width: 120px; } #image-spam-area{ max-width: 100vw; max-height: 70vh; } #image-spam-area img{ min-width: 95vw; max-width: 95vw; } #image-spam-area .stamp{ min-width: 45vw; max-width: 45vw; }*/ /* Quinn Thorne 5/22/2024 */ /* Happy Birthday Kuya! */ .post-body{ max-width: 500px; width: 60%; margin: auto; border: 2px solid var(--accent); } .post-body img{ width: 100%; height: auto; margin: auto; border-bottom: 1px solid var(--accent); } .post-body p{ width: 80%; text-align: left; margin: auto; padding-bottom: 3em; } #post-heading{ width: 60%; margin: auto; padding: 0.5em 0; color: var(--accent); text-align: left; } #featured-image{ object-fit: cover; height: 100%; width: 100%; overflow: hidden; } #featured-post{ border: none; width: 60%; height: 80vh; overflow: hidden; } #date{ color: var(--accent); text-shadow: var(--font-border); line-height: 1; padding: 0; font-weight: bold; } #gallery img{ height: 25%; width: 25%; min-height: 200px; min-width:200px; object-fit: cover; mask-image:url(https://file.garden/ZLmAKieVhBA68gj1/my-site/assets/media/icons/star.png); mask-size:cover; } @keyframes wiggle{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-15deg); } 75%{ transform:rotate(15deg); } } #gallery img:hover{ animation: wiggle 450ms infinite linear; } #gallery a{ height: 25%; width: 25%; min-height: 200px; min-width:200px; } #gallery{ display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; justify-content: space-around; background-color: var(--boxbg); border: 1px solid var(--accent); border-radius: 50px; padding: 2em; gap: 0; max-width: 80vw; margin: auto; } /* COMMISSION PAGE */ /* 1/9/2026 */ #commwrapper{ background: transparent; color: var(--main-color); padding: 2vh 0; letter-spacing: .1em; } #commwrapper p{ line-height: 2.5em; width: 90%; } .commgallery, .contactbox{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around; } .contactbox, #current-fascinations{ width: 80vw; max-width: 900px; } .commgallery, .contactbox, #current-fascinations{ margin: auto; background: var(--boxbg); border: 1px solid var(--accent); border-radius: 50px; padding: 1em; } .commgallery{ margin-bottom: 2em; width: 80vw; max-width: 800px; } .post-body{ background: var(--boxbg); border: 1px solid var(--accent); border-radius: 0 0 50px 50px; } #current-fascinations ul li, #current-fascinations ul > li{ padding-left: 1em; color: var(--main-color); } #current-fascinations > ul{ margin: auto; max-width: fit-content; padding: 3em; } @media(max-width: 1202px){ .post-body{ width: 100%; } } @media(max-width: 900px){ .commgallery{ flex-direction: column; } .imgbox{ min-width: 100%; } } #commwrapper ul{ width: 250px; margin: auto; } #commwrapper li{ text-align: left; line-height: 2.5em; } .imgbox{ display: flex; flex-direction: column; margin: 2vh 0; max-width: 30%; text-align: center; line-height: 2em; } .imgbox img{ max-width: 100%; object-fit: contain; } .box ul{ max-width: max-content; margin-left: auto; margin-right: auto; } .box ul li{ line-height: 2em; } #commwrapper a{ text-decoration: underline; } #wrapper{ width: 90%; margin: auto; } #desc{ display: flex; flex-direction: column; width: 80vw; margin: auto; align-items: center; justify-content: center; background-color: var(--boxbg); border: 1px solid var(--accent); border-radius: 50px; padding: 3em; margin-bottom: 2em; max-width: 900px; } @media(max-width:750px){ #desc{width:100%;} } #wrapper .disclaimer{ width: 90%; margin: 2vh auto; text-align: left; } #wrapper ul li::marker{ color: var(--accent); } #wrapper ul li{ padding-left: 10px; }