@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

      body {
      background-color: #000000;
      font-family: 'Verdana';
      padding: 10px;
      background-image: url(/image/NRJjSF0.gif);
    }
    
    .noto-sans-body {
      font-family: "Noto Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: 200;
      font-style: normal;
      font-variation-settings: "wdth" 100;
}

      section{
      margin: auto;
      border: dashed 2px #2d1b45;
      padding: 7px;
      -webkit-box-shadow: 5px 5px 15px 5px #8682ee;
      background: #ffffff;
      box-shadow: #9EABFF inset 0 0 5px, #ffffff 0 0 1px;
      display: flex;
      max-width: 750px;
    } 
    
      .tiny-holder {
        background: #ffffff;
        box-shadow: #9EABFF inset 0 0 5px, #ffffff 0 0 1px;
        overflow: scroll;
        height: 150px;
        border: dashed 2px #272796;
        border-radius: 4px;
        padding: 2px;
      }
     
     

      .holder {
      background-color: #ffffff;
      background-image: url(/image/plaid2.jpg);
      color: #000000;
      border: 1px solid #2d1b45;
      border-radius: 5px;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      margin: 5px;
      padding: 3px;    
      height: 490px;
      }
            #main {
      border: ridge 3px #7d7aff;
      display: flex;
      flex-direction: row;
      border-radius: 10px;
      background-color: #ffffff;
      background-image: url(/image/flannel.gif);
      } 
      

      
      .left {
        width: 30%;
        height: 100%;
      }
      
      .center {
        width: 50%;
      }
      
      .right {
        width: 30%;
      }
      
      .profile {
        display: flex;
        flex-direction: column;
      }
      
      .pfp {
        width: 100px;
        height: 100px;
        -webkit-mask-image: url(/image/tumblrmask.png);
        mask-image: url(/image/tumblrmask.png);
        mask-repeat: no-repeat;
        mask-size: contain;
      }
      
      .highlight {
        color: #ffffff;
        text-shadow:-1px 0 #385ffc, 0 1px #385ffc, 1px 0 #385ffc, 0 -1px #385ffc;
        font-weight: bold;
      }
      
      a {
        color: #385ffc;
        text-decoration: none;
        transition: 0.4s;
      }
      
      a:hover{
        letter-spacing: 3px;
      }
      
      .about {
        overflow: scroll;
        height: 490px;
        margin: 3px;
      }
      
      ul {
        list-style-image: url('/image/osiwll.png');
        font-family: 'Noto Sans', sans-serif;
      }

      
      .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            margin-right: 20px;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 100px;
            background-color: #4a5c8c;
            color: #fff;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
            text-decoration-style: dashed;
        }

        .tooltip.top .tooltiptext {
            bottom: 100%;
            top: auto;
        }

        .tooltip.bottom .tooltiptext {
            top: 100%;
            bottom: auto;
        }
        
              @media (max-width: 800px) {
        section, #main {
          flex-direction: column;
        }
        .left, .center, .right {
          width: 100%;
        }
      }