punkfairie-site/style/style.css

/* 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 */