@font-face { font-family: GothicPixels; src: url("../fonts/GothicPixels.ttf"); } @font-face { font-family: DotGothic16; src: url("../fonts/DotGothic16-Regular.ttf"); } @font-face { font-family: Jacquard12; src: url("../fonts/Jacquard12-Regular.ttf"); } @font-face { font-family: Jacquard24; src: url("../fonts/Jacquard24-Regular.ttf"); } @font-face { font-family: OldeTome; src: url("../fonts/OldeTome.ttf"); } @font-face { font-family: basiic; src: url("../fonts/basiic.ttf"); } ::selection { background-color: #cc2d2d; color: white; } /*#region MARK: links */ a { text-decoration: underline; } a, a:visited { color: #cc2d2d; } a:hover, a:focus { color: #e98492; text-decoration: none; font-style: italic; } a.redlink { text-decoration: none; font-style: italic; color: #d1a588; } a.redlink:hover { text-decoration: none !important; font-style: italic !important; } /*#endregion */ /* #region MARK:body */ body { font-family: basiic; } /* is container */ #container { display: flex; flex-direction: column; color: whitesmoke; line-height: 1.2; padding: 20px; margin: 0 auto; max-width: 750px; } #middle-container { display: flex; flex-direction: row; justify-content: center; padding-top: 10px; } /*#endregion */ /* #region MARK: border image */ /* from hillhouse neocities*/ .lace-border { --borderwidth: 30px; /* everything else here shouldn't need to be changed! */ border: var(--borderwidth) solid transparent; margin: var(--borderwidth); border-image-source: url("../images/white-lace-border.png"); border-image-slice: 84; /* don't change this! */ border-image-repeat: round; /* this makes the border smoothly fit any size container */ border-image-outset:1; /* this puts the border outside your container */ background-color: black; } .lace-border-content{ margin:calc(0px - var(--borderwidth)); padding: 10px; background-color: black; } /*#endregion*/ /*#region MARK: header */ header { padding: 10px; } header > h1 { margin-top: 15px; text-align: center; font-size: 2.5em; color: white; text-shadow: 5px 5px #180808; } #header-container { height: fit-content !important; margin: auto; justify-content: space-around; } #header-container>img { height: 70px; margin-top: auto; margin-bottom: auto; } .outlined{ text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -3px 0px 0 #000, 3px 0px 0 #000, 0px -3px 0 #000, 0px 3px 0 #000; } .flip-horizontally { transform: scaleX(-1); } /*#endregion*/ /* #region MARK: footer */ footer { margin-top: 10px; overflow: hidden; padding: 15px; display: flex; justify-content: center; } footer p { margin: 5px; } /*#endregion*/ /* #region MARK: main content */ h1,h2,h3,h4{ font-family: OldeTome; } .flex-row { display: flex; flex-direction: row; } .flex-column { display: flex; flex-direction: column; } .three-column-grid { margin-top: 10px; display: grid; justify-content: center; justify-content: space-evenly; grid-template-columns: auto auto auto; } .two-column-grid { margin-top: 10px; display: grid; grid-template-columns: auto auto; } .heading-right { text-align: right; } .heading-left { text-align: left; } .heading-center { text-align: center; } .pixel{ image-rendering: pixelated; } divider{ image-rendering: pixelated; } /* MARK: box */ .box { padding: 20px; text-align: center; border: 1px dashed #5f5b5b; border-radius: 5px; margin: 10px; } .no-border{ border: none !important; } /* MARK: ul */ ul { list-style-image: url("../images/icons/rose-icon-animated-small.gif"); list-style-position: inside; padding: 10px; margin: 0; } /*#endregion*/ /*#region MARK: heading */ .heading-underlined{ text-align: center; color: white; padding-top: 0.1em; margin-bottom: 10px; margin-top: 0; font-size: 1.6em; margin: 0; display: flex; flex-direction: column; justify-content: center; } .heading-underlined::after{ content: url(../images/white-rose-divider-small.gif); margin-bottom: 5px; image-rendering: pixelated; } /* #endregion */ /*#region MARK: sidebars */ .sidebar { border: 1px dashed #5f5b5b; padding:20px; border-radius: 5px; background: #050404; color: var(--sidebar-text-color); font-family: var(--sidebar-font); width: 140px; margin: 10px; } .sidebar li { margin-bottom: 0.2em; } .sidebar-buttons { width: 100% !important; margin-left: unset !important; } .sidebar-buttons img{ width: 88px; height: 31px; } /*#endregion*/ /*#region MARK: nav */ .nav-list { padding: 0; padding-top: 10px; list-style: none; list-style-position: outside; display: flex; flex-direction: column; text-align: center; color: #cc2d2d; } .nav-list li{ margin: 0; margin-bottom: 5px; } .nav-list a{ display: block; text-decoration: none; } .nav-list a:hover{ background-color: rgb(10, 10, 10); color: #e98492; } .nav-sub { list-style: none; padding: 0; display: flex; flex-direction: column; } .nav-sub li { margin: 0; margin-bottom: 7px; } .nav-title { font-size: 20px; margin-bottom: 5px; margin-top: 10px; color: whitesmoke; display: flex; align-items: center; justify-content: center; gap: 1px; } .nav-title::before{ content: url(../images/white-rose-divider-l.gif); image-rendering: pixelated; transform: scale(0.75); } .nav-title::after{ content: url(../images/white-rose-divider-r.gif); image-rendering: pixelated; transform: scale(0.75); } /*#endregion */ .flex-container { display: flex; flex-direction: row; justify-content: center; } .flex-container>div { padding: 0px 30px; }