/* IMPORTS -------------------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Imprima&display=swap"); @font-face { font-family: basiic; src: url(basiic.ttf); } /* GLOBAL --------------------------------------------------------------------------------------- */ html { background-image: url(img/bg.png); background-color: #f1c8fe; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; cursor: url(img/cursor.png), auto; } html a[href] { cursor: url(img/cursor.png), auto; } body { font-family: imprima; font-size: 14px; width: 60%; height: 70%; display: grid; gap: 10px; grid-gap: 10px; grid-template-columns: 20% auto 20%; grid-template-rows: 15% 85%; grid-template-areas: "head head head" "side main nav"; } .divide { display: block; margin: 15px auto; content: url(img/divide.gif); } /* TEXT ----------------------------------------------------------------------------------------- */ a { color: #fa829e; text-decoration: none; } a:hover { text-decoration: line-through; } a:visited { color: #e496fd; } p { margin-bottom: 10px; } b { color: #fa829e; } i { color: #e496fd; font-style: italic; } .center-block { display: block; text-align: center; } .center { text-align: center; } img { max-width: 100%; } h3 { display: block; text-align: center; padding-bottom: 10px; text-transform: uppercase; color: #fa829e; } h3::before, h3::after { content: url(img/bow.gif); margin: 0 5px; } ul { list-style-image: url(img/bullet.gif); list-style-position: inside; margin-bottom: 10px; } /* CLOUD BOX ------------------------------------------------------------------------------------ */ .u01 { background: url(img/lace/f-ue.gif) repeat-x; height: 18px; margin: 0 18px 0 19px; } .s01 { background: url(img/lace/f-sita.gif) repeat-x; height: 19px; margin: 0 18px 0 19px; } .box-top { background-image: url(img/lace/f-kado1.gif), url(img/lace/f-kado2.gif); background-position: top left, top right; background-repeat: no-repeat, no-repeat; height: 18px; } .box-center { background-image: url(img/lace/f-migi.gif), url(img/lace/f-hidari.gif); background-position: top right, top left; background-repeat: repeat-y, repeat-y; } .box-inner { background: #fff; margin: 0 18px 0 19px; } .box-bottom { background-image: url(img/lace/f-kado3.gif), url(img/lace/f-kado4.gif); background-position: top left, top right; background-repeat: no-repeat, no-repeat; height: 19px; } /* EMOTES --------------------------------------------------------------------------------------- */ i.angry { content: url(img/emote/angry.gif); margin: 0 2px; } i.annoyed { content: url(img/emote/annoyed.gif); margin: 0 2px; } i.love { content: url(img/emote/love.gif); margin: 0 2px; } i.sick { content: url(img/emote/sick.gif); margin: 0 2px; } i.smile { content: url(img/emote/smile.gif); margin: 0 2px; } /* HEADER --------------------------------------------------------------------------------------- */ header { grid-area: head; text-align: right; } header img { height: 100%; } /* SIDEBAR -------------------------------------------------------------------------------------- */ aside { grid-area: side; } aside h2 { font-size: 14px; font-style: italic; margin: 20px 0 5px 0; display: flex; } aside h2:first-child { margin-top: 0; } aside h2 .h2-line { background-image: url(img/heart-right.gif); background-repeat: repeat-x; background-position-x: right; background-position-y: center; margin-left: 5px; min-height: 8px; flex-grow: 1; } aside #side1 p { margin-bottom: 0; } aside #side1 p::before { content: url(img/point-right.gif); padding-right: 5px; } /* SIDE2 ---------------------------------------------------------------------------------------- */ #side2 { margin-top: 10px; } #rings { text-align: center; } #rings > div { padding-top: 5px; } #rings img { padding: 0 5px; } #badges { padding-bottom: 5px; } #yesterweb { margin-top: 10px; } #yesterweb, .yw-widget-text, .yw-widget, .yw-link-rand, .yw-link { font-family: Imprima, serif !important; font-weight: normal !important; } #yesterweb a, .yw-widget-text a, .yw-widget a, .yw-link-rand a, .yw-link a { color: #fa829e !important; } /* MAIN ----------------------------------------------------------------------------------------- */ main { grid-area: main; } main .box22 { height: 90%; } main .box-center, main .box-inner { height: 100%; } main .box-inner { display: grid; grid-template-columns: auto; grid-template-rows: auto 5%; grid-template-areas: "." "footer"; } main #content { overflow: auto; padding: 0 10px; } main #update-box { background-image: url(img/update-box.gif); width: 199px; height: 194px; margin: 20px auto; font-size: 12px; } main #update-box #update-inner { width: 145px; height: 130px; padding: 5px; position: relative; top: 35px; left: 27px; text-align: center; overflow: auto; } main #update-box h2 { margin-bottom: 5px; display: flex; } main #update-box h2 .h2-line:first-child { background-image: url(img/heart-left.gif); background-repeat: repeat-x; background-position-x: left; background-position-y: center; margin-right: 5px; min-height: 8px; flex-grow: 1; } main #update-box h2 .h2-line:last-child { background-image: url(img/heart-right.gif); background-repeat: repeat-x; background-position-x: right; background-position-y: center; margin-left: 5px; min-height: 8px; flex-grow: 1; } main #update-box p { margin-bottom: 5px; } #cboxdiv { border: 1px dotted #fa829e; padding: 10px; } #cboxmain3-3514647, #bdy, .mnbdy, #scrollmain, #mt, .hbtbl, .stxt2, #cboxform3-3514647, .fmbdy, .cfrm, .cfrm table, .cfrm tbody, .cfrm td, .cfrm tr, .cfrm a, #tblmid, #tblmid input, .frmtb { font-family: Imprima, serif !important; font-size: 14px !important; } /* NAV ------------------------------------------------------------------------------------------ */ nav { grid-area: nav; text-align: right; } nav h2 { font-size: 14px; font-style: italic; margin-top: 20px; display: flex; } nav h2:first-child { margin-top: 0; } nav h2 .h2-line { background-image: url(img/heart-left.gif); background-repeat: repeat-x; background-position-x: left; background-position-y: center; margin-right: 5px; min-height: 8px; flex-grow: 1; } nav a { display: block; margin: 5px 0; } nav a:last-child { margin-bottom: 0; } nav a::after { content: url(img/point-left.gif); margin-left: 5px; } nav a.new::before { content: url(img/new.gif); padding-right: 5px; position: relative; top: 5px; } nav a.update::before { content: url(img/update.gif); padding-right: 5px; position: relative; top: 5px; } /* NAV 2 ---------------------------------------------------------------------------------------- */ .box22#nav2 { margin-top: 10px; } /* FOOTER --------------------------------------------------------------------------------------- */ footer { text-align: center; grid-area: footer; font-size: 12px; align-self: end; } /* COLLECTIONS ---------------------------------------------------------------------------------- */ .gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; grid-gap: 5px; } /* HOSTING APP ---------------------------------------------------------------------------------- */ form#hosting-app .form-item { margin-bottom: 10px; } form#hosting-app label { display: block; margin-bottom: 5px; } form#hosting-app label.check { display: inline; } form#hosting-app input { display: inline; width: 50%; } form#hosting-app input[type=checkbox] { width: unset; } form#hosting-app input[type=submit] { width: unset; display: block; margin: 0 auto; } form#hosting-app p { font-style: italic; } form#hosting-app p.inline { display: inline; font-style: normal; } /* UPDATE-ARCHIVE ------------------------------------------------------------------------------- */ #up-archive h2 { font-size: 14px; font-style: italic; display: block; text-align: center; padding-bottom: 10px; text-transform: uppercase; color: #fa829e; } #up-archive h2::before, #up-archive h2::after { content: url(img/bow.gif); margin: 0 5px; } /*# sourceMappingURL=style.css.map */