reesericci scrapbook css

style.css

@font-face {
 font-family:PP Editorial New;
 font-style:normal;
 font-weight:400;
 src:local("PP Editorial New Ultrabold"),
 local("PPEditorialNew-Ultrabold"),
 url(https://reeseric.ci/assets/pp-editorial-new-ultrabold.c0d067d1.woff2) format("woff2")
}
@font-face {
 font-family:PP Editorial New;
 font-style:normal;
 font-weight:400;
 src:local("PP Editorial New Ultralight"),
 local("PPEditorialNew-Ultralight"),
 url(https://reeseric.ci/assets/pp-editorial-new-ultralight.74f8d5cf.woff2) format("woff2")
}
@font-face {
 font-family:PP Editorial New;
 font-style:normal;
 font-weight:400;
 src:local("PP Editorial New Regular"),
 local("PPEditorialNew-Regular"),
 url(https://reeseric.ci/assets/pp-editorial-new-regular.2dcd2323.woff2) format("woff2")
}
@font-face {
 font-family:PP Editorial New;
 font-style:italic;
 font-weight:400;
 src:local("PP Editorial New Ultralight Italic"),
 local("PPEditorialNew-UltralightItalic"),
 url(https://reeseric.ci/assets/pp-editorial-new-ultralight-italic.fc51d9fb.woff2) format("woff2")
}
@font-face {
 font-family:PP Editorial New;
 font-style:italic;
 font-weight:400;
 src:local("PP Editorial New Italic"),
 local("PPEditorialNew-Italic"),
 url(https://reeseric.ci/assets/pp-editorial-new-italic.8feb071c.woff2) format("woff2")
}
@font-face {
 font-family:PP Editorial New;
 font-style:italic;
 font-weight:400;
 src:local("PP Editorial New Ultrabold Italic"),
 local("PPEditorialNew-UltraboldItalic"),
 url(https://reeseric.ci/assets/pp-editorial-new-ultrabold-italic.da103a0c.woff2) format("woff2")
}

/* body customization */

* {
  font-family: "PP Editorial New" !important;
}

body {
  background-color: black;
  background-image: url("https://transparenttextures.com/patterns/cartographer.png");     
}

/* nav-link customization */

.nav-link-home {
  font-weight: bold;
  color: #FFFFFF;
}


.nav-link-about {
  font-weight: bold;
  color: #FFFFFF;
}

.nav-link-github {
  font-weight: bold;
  color: #FFFFFF;
}

.nav-link-github:hover {
  color: orange;
}


a:hover {
 color: orange !important;
}

/* posts customization */

.post-attachment {
  transition: ease-in-out .15s;
}

.post-attachment:hover {
  transform: scale(1.05);
}

/* css animations */

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rainbow{
 0%{color: orange;}
 10%{color: purple;}
 20%{color: red;}
 30%{color: CadetBlue;}
 40%{color: yellow;}
 50%{color: coral;}
 60%{color: green;}
 70%{color: cyan;}
 80%{color: DeepPink;}
 90%{color: DodgerBlue;}
 100%{color: orange;}
}



/* header customization */

.header-link {
  transition: 250ms ease;
}

.header-link:hover {
  transform: scale(1.25, 1.25);
  color: orange;
}

.header-streak {
  background: linear-gradient(0.25turn, yellow, #fe8019);
}

.header-title-avatar {
  animation: rotate 5s infinite;
}
.header-title-name {
  animation: rainbow 5s infinite;
}

.header-webring-mention:hover {
 box-shadow: none;
 transform: translateY(-.25em);
 background-color: transparent;
}