/* site style */

body {
  background-image: url("images/bg.png");
  color: rgb(255, 255, 255);
  font-family: "Home Video", "Better VCR", sans-serif;
  .title {
    width: 30%;
    height: auto;
    display: block;
    margin-top: 1%;
    margin-left: 35%;
  }

  & main {
    width: 90%;
    margin-left: 5%;
    background-color: rgb(8, 0, 37);
    padding: 20px;
    border: 5px solid #ccc;
    & .first {
      display: flex;
      flex-direction: row;
      & section.boykisser {
        width: 10%;
        & img.boykisser {
          width: 90%;
          border: 2.5px solid #ccc;
        }
      }
      & section.welcome-section {
        font-family: "Better VCR", sans-serif;
        width: 70%;
        & p.question {
          font-size: 70%;
          color: #ccc;
        }
        & p.answer {
          font-size: 80%;
        }
      }
      & nav {
        width: 20%;
        background-color: rgb(8, 0, 37);
        border: 2.5px solid #ccc;
        & .file-tree {
          list-style: none;
          padding-left: 10px;
          font-family: "Home Video", "Better VCR", sans-serif;
          & li {
            margin: 5px 0;
            list-style: none;
          }
          & .folder-label {
            cursor: pointer;
            user-select: none;
          }
          & .folder-contents {
            display: none;
            padding-left: 20px;
          }
          & .folder.expanded > .folder-contents {
            display: block;
          }
          & .folder.expanded > .folder-label::before {
            content: "▼";
          }
          & .folder.collapsed > .folder-label::before {
            content: "▶";
          }
          & .file {
            cursor: pointer;
            color: #ffffff;
            text-decoration: none;
            &::before {
              content: "📄"; 
            }
            &:hover {
              color: #ff00ff;
              font-weight: bold;
            }
            /* & a {
              color: #ffffff;
              &:hover {
                color: #ff00ff;
                font-weight: bold;
              }
            } */
          }
        }
      }
    }
    & .scroll-bages {
      width: 100%;
      overflow: hidden;
      & span {
        display: inline-flex;
        gap: 10px;
        width: max-content;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }
    }
  }

  & footer.site-footer {
    background-color: #111;
    color: #ccc;
    font-size: 0.85em;
    padding: 15px 20px;
    text-align: left;
    align-items: left;
    border-top: 1px solid #333;
    margin-top: 80%;
    & a {
      color: #00ffff;
      &:hover {
        color: #ff00ff;
        font-weight: bold;
      }
    }
  }
}