webbed-site/static/css/style.css

:root,
:root.light {
  --bgColor: #FFFAFC;
  --fgColor: #6e5854;
  --metaColor: #FFEFF1;
  --headColor: #E05969;
  --linkColor: #BC2F3F;
  --hovColor: #e3868f;
  --bgSelect: #3a2930;
  --bgUrl: url("/img/pinkgrid.png") repeat;
  --sidebarUrl: url("/img/peach.jpeg") repeat;
}

:root.dark {
  --bgColor: #000040;
  --fgColor: #D8DAFF;
  --metaColor: #141C36;
  --headColor: #A0A8F4;
  --linkColor: #FF72F7;
  --hovColor: #6BB6E5;
  --bgSelect: #6c7086;
  --bgUrl: url("/img/darkgrid.png");
  --sidebarUrl: url("/img/stars.gif") repeat;
}

@font-face {
  font-family: Hez;
  src: url("/fonts/Hezaedrus.ttf")
}
@font-face {
  font-family: hylie;
  src: url("/fonts/Hylie.otf")
}
@font-face {
  font-family: obliviate;
  src: url("/fonts/Obliviate.otf")
}
@font-face {
  font-family: firstly;
  src: url("/fonts/Firstly.otf")
}

::-moz-selection {
  color: var(--metaColor);
  background: var(--hovColor)
}

::selection {
  color: var(--fgColor);
  background: var(--hovColor)
}

html {
  scrollbar-color: var(--hovColor) var(--bgColor);
  scrollbar-width: thin;
  font-size: 1em;
  font-style: normal;
  line-height: 1.2;
  margin: auto;
  overflow-wrap: break-word;
  background: var(--bgUrl);
  color: var(--fgColor);
  font-family: 'Hez', monospace;
}

p {
  margin: 0.5vw 1.5vw 0.3vw 1.5vw;
}

a {
  text-decoration: none;
  color: var(--linkColor)
}

a:hover {
  text-decoration: underline dashed 2px;
  color: var(--hovColor)
}

h1 {
  color: var(--headColor);
  font: 4em hylie, cursive;
  line-height: .8em;
  margin: 2vw 0.1vw 0.1vw;
  padding: 0.1vw;
  text-align: center;
}

h2 {
  color: var(--headColor);
  font: 4em firstly, cursive;
  font-weight: bold;
  line-height: .7em;
  margin: 0.1vw 0.1vw 0.1vw 1.5vw;
  padding: .1rem 0;
}

h3 {
  color: var(--headColor);
  font: 2.6em obliviate, cursive;
  line-height: 2rem;
  margin: 0.1vw 0.1vw 0.1vw 1.5vw;
  padding: .4rem 0 .2rem;
}

h4 {
  color: var(--headColor);
  font: bold 2em firstly, cursive;
  margin: 0.1vw 0.1vw 0.1vw 1.5vw;
}

ul {
  list-style-image: url("/img/kingluludeer_peach.png");
  font-size: 1em;
  line-height: 1.3em;
  margin: 0.1vw 0.1vw 0.1vw 1vw;
  padding-left: 1.75vw;
}

ul p, ol p {
  margin-left: 0
}

.fave ul {
  list-style-image: url("/img/heart.png");
  font-size: 1em;
  line-height: 1.2em;
}

ol {
  list-style: none;
  font-size: 1em;
  line-height: 1.2em;
  margin: 0.1vw 0.1vw 0.1vw 1.5vw;
  padding-left: 0;
}

pre {
  border: 1px solid var(--bgSelect);
  padding: 1rem;
  margin: 0 2vw;
  overflow-x: auto;
  font-family: monospace;
  font-size: 1.1em;
  white-space: pre-wrap;
  word-break: break-word;
}

.smoltitle {
  text-align: center;
  margin: auto;
  font: bold 3em firstly, cursive;
  line-height: .8em;
  color: var(--headColor);
}

.navtoc {
  text-align: center;
}

.navtoc img {
  padding: 0 .5em;
}

.navtoc p {
  margin: 0;
}

p.bottomnav {
  text-align: right;
  margin: auto;
  position:sticky;
  bottom: 15px;
}

.center {
  text-align: center;
}

.QandA ol {
  list-style: decimal;
  margin-left: 3em;
}

.QandA ul {
  list-style: none;
  margin: .6rem 0;
  font-size: 1em;
}

.webcore, .emotes, .blinkies, .web-stamps, .userbox {
  display: block;
  margin: auto;
  text-align: center;
  justify-content: space-around;
}

.webcore img {
  vertical-align: middle;
  padding: .05rem 0 .05rem 0;
}

.webcore > * {
  line-height: 0;
}

.webcoresmol {
  margin: 0.1vw 0.1vw 0.1vw 1.5vw;
}
.webcoresmol > * {
  display: flex;
  text-align: center;
  line-height: 1.3em;
  justify-content: space-around;
}

.web-stamps img {
  max-width: 100px;
  max-height: 60px;
}

.blinkies img {
  max-width: 150px;
}

.userbox img {
  max-width: 239px;
  vertical-align: middle;
  margin: .1rem;
}

.emotes {
  justify-content: space-between;
  margin: 0;
}

.emotes img {
  max-width: 50px;
}

.kaomoji {
  background-color: var(--metaColor);
  border-radius: 1em;
  padding: 0.3em;
  display: inline-flex;
  vertical-align: center;
  margin: 0.3em;
}

.kaomoji:hover {
  background-color: var(--hovColor)
}

address {
  margin-left: 1.5vw;
  font-size: 0.9em;
}

time {
  font-size: 0.9em;
}

.tagsData {
  font-size: 0.9em;
}

.tag {
  list-style: none;
  padding-left: 0;
  line-height: 2.5rem;
  text-align: center;
}
.tag ol {
  justify-content: center;
}

.tag li {
  display: inline-block;
  font-family: firstly, cursive;
  font-size: 1.5em;
  padding: 0.125rem 0.25rem;
  text-decoration: none;
}

.tagcloud {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 2.5rem;
}

.tagcloud a {
  display:block;
  font-family: firstly, cursive;
  --size: 4;
  font-size: calc(var(--size) * 0.5rem + 1.5rem);
  padding: 0.125rem 0.25rem;
  text-decoration: none;
  position: relative;
}

.tagcloud a[data-weight="1"] { --size: 1; }
.tagcloud a[data-weight="2"] { --size: 2; }
.tagcloud a[data-weight="3"] { --size: 3; }
.tagcloud a[data-weight="4"] { --size: 4; }
.tagcloud a[data-weight="5"] { --size: 5; }
.tagcloud a[data-weight="6"] { --size: 6; }
.tagcloud a[data-weight="7"] { --size: 7; }
.tagcloud a[data-weight="8"] { --size: 8; }
.tagcloud a[data-weight="9"] { --size: 9; }

.tagcloud li:nth-child(2n+1) a { --color: var(--headColor); }
.tagcloud li:nth-child(3n+1) a { --color: var(--hovColor); }
.tagcloud li:nth-child(4n+1) a { --color: var(--linkColor); }


dt {
  font-weight:bold;
  margin-left: 3em;
}

dt::before {
  content: "・"
}

dd {
  font-style:italic;
  margin-left: 5em;
  padding-bottom: .7em;
}

figure img {
  border-radius: 1em;
  max-width: 100%;
}

figure {
  text-align: center;
  align-content: center;
}

figcaption {
  font-size: .9em;
  font-style: italic;
  line-height: 1em;
  margin: auto;
  max-width: 550px;
}

hr {
  border: dashed 1px;
  color: var(--hovColor);
  width: 93%;
  margin: 1em auto;
}

.dotbox {
  max-width: 85%;
  flex: 1 1 auto;
  margin: 10px auto;
  padding: .5rem 0;
  border: var(--hovColor) dotted 2px;
  border-radius: 2.5em;
  background-color: var(--bgColor);
}

.two-column {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.two-column > * {
  padding: 1rem;
}

.two-column img {
  max-width: 500px;
  vertical-align: middle;
}

@media (min-width:768px) {
  .two-column, .two-column-dotted {
      display: grid;
      grid-template-columns: 1fr 1fr;
  }
}

.four-column {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
  gap: 10px;
  padding: 10px;
  text-align: center;
}

.four-column > * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.four-column a {
  position: relative;
}

.four-column img {
  width: 100%;
  height: auto;
  display: block;
  justify-content: space-evenly;
}

.four-column p {
  margin: 0;
}

@media (max-width:768px) {
  .four-column > * {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}


.masonry-container {
  column-count: 3; /* Number of columns */
  column-gap: .1rem; /* Spacing between columns */
  padding: .1rem;
}

.masonry-container > * {
  break-inside: avoid; /* Prevents items from breaking inside columns */
  margin-bottom: 10px; /* Space between items */
}

.masonry-item img {
  width: auto;
  height: auto; /* Maintains aspect ratio */
  display: block;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .masonry-container {
      column-count: 3; /* 3 columns on medium screens */
  }
}

@media (max-width: 900px) {
  .masonry-container {
      column-count: 2; /* 2 columns on smaller screens */
  }
}

@media (max-width: 640px) {
  .masonry-container {
      column-count: 1; /* 1 column on very small screens */
  }
  .masonry-container p {
    padding: 0;
    margin: 0;
  }
  .masonry-container img {
    width: calc(100% - .2rem);
  }
}

.light .last {
  max-width: 70vw;
  margin: auto;
  content: url(https://lastfm-profile-readme.vercel.app/api/ameiro?color=FFF9FA&textColor=EF626E&isRounded=true)
}

.dark .last {
  max-width: 70vw;
  margin: auto;
  content: url(https://lastfm-profile-readme.vercel.app/api/ameiro?color=000040&textColor=FFFFC8&isRounded=true)
}

#smolbox {
  padding: 0.5em;
  background-color: var(--metaColor);
  border: 1px dashed var(--hovColor);
  border-radius: 1em;
  max-width: fit-content;
  text-align: left;
  margin: auto
}

#smolbox p {
  margin: 0 1.5em;
}

#statuscafe-username {
  margin-bottom: 0.5em
}

#statuscafe-content {
  margin: 0 1em 0.25em
}

.themeButton {
  cursor: pointer;
  border: none;
  font-size: 1.2em;
  background-color: transparent;
  padding: 0px;
}

.dark .themeButton.dark,
.themeButton.light {
  display: none;
}

.dark .themeButton.light {
  display: block;
}

.ph {
  font-size: 1.25em;
  color: var(--linkColor);
  fill: var(--fgColor);
  background-color: transparent;
}

profile-img img {
  max-width: 200px;
  text-align: center;
  border-radius: 100%;
}

.left-sidebar {
  margin: 0;
  padding: 16px;
  width: 200px;
  background: var(--sidebarUrl);
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  overflow: auto;
  align-content: center;
}

.left-sidebar a {
  display:block;
  color: var(--linkColor);
  text-decoration: none;
  text-align: center;
  padding: .4rem .25rem;
}
.left-sidebar a.active {
  color: var(--hovColor);
}
.left-sidebar a:hover:not(.active) {
  color: var(--hovColor);
}

.page-content {
  display:inline-block;
  margin-left: 220px;
  padding: 1px 20px;
  height: 100%;
  width: calc(100% - 270px);
}
@media screen and (max-width: 700px) {
  .left-sidebar {
    width: 100%;
    height: fit-content;
    position: relative;
    justify-items: center;
    background-color: var(--metaColor);
  }
  .left-sidebar a {
    text-align: center;
    float: none;
  }
  .page-content {margin-left: 0; width: 94%;}
}

nav-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:center;
}

nav-icon img {
  padding: 8px;
}

@media screen and (max-width: 700px) {
  nav-icon {
    width: 100%;
    height: auto;
    position: relative;
  }
}
.topnav {
  padding: 0;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 @media screen and (max-width: 700px) {
  .topnav #myLinks {
    display: none;
  }
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a {
    clear: both;
    display: block;
  }
}