/* --------------------------------------- Fonts --------------------------------------- */

/* Font by Cinni https://cinni.net/ */
@font-face {
  font-family: basiic;
  src: url(basiic.ttf)
}

/* Font by CTFonts https://fontstruct.com/fontstructions/show/2096374/ms-sans-serif-2-1 */
@font-face {
  font-family: pixel-sans-serif;
  src: url(ms-sans-serif-2.otf)
}

/* --------------------------------------- Universal --------------------------------------- */

body {
  background-image: url(../images/shibuya_dithered_background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgb(201, 53, 105);
  font-family: pixel-sans-serif, basiic, Verdana, Geneva, Tahoma, sans-serif;
  width: 60em;
  margin: auto;
  image-rendering: pixelated;
}

/* Subheadings */
h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 20px;
  font-weight: bold;
  color: rgb(201, 53, 105);
}

a {
  text-decoration: none;

  p {
    color: rgb(223, 105, 152);
  }

  :hover {
    color: rgb(201, 53, 105);
  }
  :active {
    text-decoration: underline;
  }
}

p {
  display: inline;
  font-size: 16px;
  color: rgb(245, 214, 227);
}

.subtext {
  font-style: italic;
}

.emoji {
  height: 14px;
  width: 14px;
  padding-left: 2px;
}

/* --------------------------------------- Major sections --------------------------------------- */

/* Page container */
.container {
  padding-top: 5em;
  padding-left: 5em;
  padding-right: 5em;
  padding-bottom: 5em;
  background-color: rgba(255, 255, 255, 0);
  background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0.6) 90%, transparent)
}

/* Main site colors and spacing in sections */
.section {
  background-color: rgba(47, 36, 44, 0.703);
  border-width: 0.1em;
  border-style: solid;
  border-color: rgb(117, 55, 72);
  padding: 1em;
  /* Background styling */
  background-image: url(../images/bubble_background.png);
  background-repeat: no-repeat;
}

/* First section of the page */
.section-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 2em;
}

/* --------------------------------------- Navigation --------------------------------------- */

/* Navigation bar */
nav {
  width: 11.5em;
  display: inline-block;

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li {
    border-bottom: 0.10em solid;
    border-color: rgb(201, 53, 105);
    margin-bottom: 0.5em;

    a {
      display: block;
  
      p, img {
        vertical-align: middle;
        padding-right: 0.2em;
        font-weight: bold;
      }
    }
  }

}

/* Navigation animated hover images */
.nav-about:hover {
  img {
    content: url(../images/nav_icon_about.gif);
    height: 2em;
  }
}

.nav-blog:hover {
  img {
    content: url(../images/nav_icon_blog.gif);
    height: 2em;
  }
}

.nav-new-tab:hover {
  img {
    content: url(../images/nav_icon_new_tab.gif);
    height: 2em;
  }
}

.nav-fumo:hover {
  img {
    content: url(../images/nav_icon_fumo.gif);
    height: 2em;
  }
}

.nav-credits:hover {
  img {
    content: url(../images/nav_icon_credits.gif);
    height: 2em;
  }
}

/* --------------------------------------- Top right section --------------------------------------- */

/* Right top section */
.content-right {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 32em;
}

/* Introduction */
.introduction {
  display: inline-block;
  padding-top: 0.5em;

  > p {
    display: block;
  }
}

/* Guestbook and Tips */
.guestbook-and-tips {
  margin-top: 2em;
  display: flex;
  align-items: center;
  /* Inline elements */
  > a {
    width: 50%;
  }
}

.tips {
  display: flex;
}

.tip-container {
  position: relative;
  display: inline-block;
  background-color: white;
  width: 7em;
  max-height: max-content;
  border: rgb(255, 255, 255) 0.1em solid;
  border-radius: 1em 1em 1em 1em;
  margin-top: 1em;
  margin-left: 0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;

  :after {
    content: '';
    position: absolute;
    left: 0;
    top: 40%;
    border: 0.9em solid transparent;
    border-right-color: #ffffff;
    border-left: 0;
    border-bottom: 0;
    margin-top: -0.4em;
    margin-left: -0.9em;
  }

  p {
    color: black;
  }
}

.tip-heading {
  display: block;
  margin-bottom: 0.2em;
  margin-top: 0.5em;
  font-weight: bold;
}

#tip {
  display: block;
  margin-top: 0.5em;
}

/* --------------------------------------- Middle section --------------------------------------- */

/* Second section of the page */
.section-middle {
  margin-bottom: 2em;
  display: flex;
  width: 100%;
  gap: 4.4em;
}

.advert-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.status {
  width: 11em
}

.status-image {
  float: left;
  margin-right: 1em;
  width: 32px;
}

#statuscafe-username {
  padding-bottom: 0.5em;
}

/* --------------------------------------- Bottom section --------------------------------------- */

/* The bottom section of the page */
.section-bottom {
  display: flex;
  padding: 0;
  border: none;
}

.information-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-right: 1em;
  border-style: solid;
  border-width: 0.1em;
  border-color: rgb(117, 55, 72);
  padding: 1em;
}

.information-iframe {
  height: 100%;
}

.social-links {
  border-style: solid;
  border-width: 0.1em;
  border-color: rgb(117, 55, 72);
  padding: 1em;
  width: 12em;
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}

.social-container {
  margin-bottom: 0.2em;
  display: block;
}

.social-link {
  width: 190px;
  height: 50px;
}

/* --------------------------------------- Images --------------------------------------- */

/* Note: all pixel art images are multiplied by 2 */
.image-title {
  width: 50em;
  margin-bottom: 2em;
}
.image-nav {
  width: 2em;
}
.image-guestbook {
  width: 15.5em;
  cursor: url(../images/Cursor/ds-stylus.png), auto;
}
.image-little-guy {
  width: 8em;
  height: 8em;
}
.image-ad {
  width: 32.5em;
  height: 100px;
}

/* WIP Images */
.image-wip-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.image-wip-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width:100%;
  pointer-events: none;
}

/* --------------------------------------- Other --------------------------------------- */

.version-number {
  position: fixed;
  bottom: 0;
  right: 0.5em;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 1em;
  color: black;
}