@font-face {
  font-family: Kurale;
  src: url(font/Kurale-Regular.ttf);
}




        body {
            font-family: Gill Sans, sans-serif;

            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image:url("/img/bg_main_08.png");
            background-size:512px;
            cursor: url('/img/icon1.png'), auto;
            transition: background-color 0.5s ease;
            background-color: #424242;
        }
        
        .content p {
  text-align: justify;
}
        
       .toggle-btn {
         background-image: url("/img/toggle_eye_small_light.svg");
        background-size:contain;
        background-repeat:no-repeat;
        cursor: pointer;
        display: block;
        height:64px;
        width:64px;
        position:absolute;
        left:20px;
        top:20px;
    }

        .container {
            display: flex;
            width: 700px;
            height:500px;
            box-shadow: -10px 10px 0px rgba(0, 0, 0, 0.2);
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            z-index:100;
                         cursor: url('/img/icon1.png'), auto;

        }
        
        hr {
          border-style:solid !important;
        }

        .smallcontainer {
            display: flex;
            width: 200px;
            height:300px;
            box-shadow: -10px 10px 0px rgba(0, 0, 0, 0.2);
            position:absolute;
            left:30%;
            top:10%;
            transform:translate(-200%,-10%);
            z-index:100;
            background-color:#F6F0E7;
            color:#788585;
                         cursor: url('/img/icon1.png'), auto;

        }
        
 
        .sidebar {
            width: 170px;
            background-color:#7F7176;
            color: #424242;
            padding: 20px;
                         cursor: url('/img/icon1.png'), auto;

        }
        .sidebar h1 {
          font-family: Kurale;
          
          }
        
        .buttons img {
                      box-shadow: -5px 5px 0px rgba(0, 0, 0, 0.2);

          }
          
          .alphaPNG {
            filter: drop-shadow(-5px 5px 0px rgba(0, 0, 0, 0.2));
            }
            
              
          
          .alphaPNG1 {
            filter: drop-shadow(-5px 5px 0px rgba(59, 43, 35, 0.18) );
            }

        .content {
            flex: 1;
            padding: 20px;
            background-color: #F6F0E7;
            overflow-x: hidden;
            overflow-y: auto;
            color:#788585;
            font-size:16px;
                         cursor: url('/img/icon1.png'), auto;

        }
        
        .content p {
          color:grey;
          font-size:16px;
          line-height:23px;
          letter-spacing:0.3px;
                       cursor: url('/img/icon1.png'), auto;

          }
          
        .content h1 {
          font-family: Kurale;
          font-size:38px;
          color:#878076;
          text-decoration:none;
                       cursor: url('/img/icon1.png'), auto;
                       transition: all 0.5s ease-in-out;

          }
        
        .content h4 {
          font-size:15px;
          font-style:italic;
           color:#C9BEB3;
           font-family: Kurale;
        }
        
        
        .content a {
          color:#424242;
          text-decoration:none;
          transition: all 0.5s ease-in-out;
          }
          
        .content a:hover {
          color:#7F7176;
          text-decoration:none;
                       cursor: url('/img/icon1.png'), auto;
                       

          }
          
          
          .content h1:hover {
            color: #6d675f;
            
          }
          
        h1 {
          font-size:33px;
          }
          
        h3 {
          font-weight:normal;
          font-style:italic;
          font-size:22px;
          }
          
          .content h2 {
            color:#AD718B
          }
          
        .header h1 {

          text-decoration:none;
          }
        .headLink {
          text-decoration:none;
          }

        .header {
            font-family: Kurale;
          
            background-color:#7F7176;
            color: #424242;
            padding: 10px;
            text-align: center;
            transform:translate(110px, -320px) rotate(3deg);
            width: 300px; /* Adjust the width to your preference */
            box-shadow: -10px 10px 0px rgba(0, 0, 0, 0.2);
            transition:all 0.5s ease-in-out;
            text-decoration:none;
            position:absolute;
            left:50%;
            top:50%;
            z-index:700;
                         cursor: url('/img/icon1.png'), auto;

        }
        
        .header:hover {
            background-color:#C9BEB3;
            color: #424242;
            box-shadow: -15px 15px 0px rgba(0, 0, 0, 0.1);
                         cursor: url('/img/icon1.png'), auto;

        }
        
        
        .sidebar a {
          color: #424242;
          text-decoration:none;
          transition:all 0.2s ease-in-out;
          display:block;
          height:25px;
          line-height:30px;
          padding: 5px 10px 5px 10px;
          font-size:16px;
                       cursor: url('/img/icon1.png'), auto;

          
        }
        .sidebar a:hover {
            padding: 5px 15px 5px 15px;
                         cursor: url('/img/icon1.png'), auto;

        }
        
        /* Customize the track (the area behind the thumb) */
        ::-webkit-scrollbar {
          width: 12px;
        }
        
        /* Customize the thumb (the draggable part) */
        ::-webkit-scrollbar-thumb {
          background: #7F7176;
        }

          .tape {
            background-color:#ccc4b8;
            position:absolute;
            box-shadow: -5px 5px 0px rgba(0, 0, 0, 0.2);
            left:50%;
            top:50%;
            opacity:0.7;
            pointer-events: none;
            overflow:hidden;
            z-index:600;
          }
          
          .T1 {
            transform: translate(-380px, -265px) rotate(-33deg);
            width: 110px;
            height:40px;
          }
          
          .T2 {
            transform: translate(305px, 225px) rotate(-40deg);
            width: 80px;
            height:25px;
          }
          
          .catalog-item img {
            box-shadow: -5px 5px 0px rgba(0, 0, 0, 0.2);
            width:200px;
            height:auto;
            }