@font-face {
  font-family: "04b03";
  src:
    local("04b03"),
    url("/fonts/04b03.ttf") format("truetype") tech(color-COLRv1);
}



html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

body{
    background-image: url(/images/redweb.gif);
    font-family: "04b03";
    font-size: 16px;
}

body{
    cursor: url(/cursor\ \(2\).cur), auto;
}



ul{
list-style-image: url(/images/pixels/redspinny.webp);
}

.container{
    width: 300px;
    height: 250px;
    padding: 12px;
    margin-top: 16px;
    overflow: scroll;
    overflow-x: hidden;
    background-color: black;
    color: white;
    float: right;

  
}

.containera{
    padding: 12px;
    margin-right: 16px;
    margin-top: 16px;
    width: 300px;
    height: 250px;
    overflow: scroll;
    overflow-x: hidden;
    background-color: black;
    color: white;
    float: right;
}

.container2{
    padding: 12px;
    margin-top: 16px;
    height: 250px;
    width: 300px;
    overflow: scroll;
    overflow-x: hidden;
    background-color: rgb(0, 0, 0);
    color: white;
    float: right;
}

.container2a{
    padding: 12px;
    margin-right: 16px;
    margin-top: 16px;
    height: 250px;
    width: 300px;
    overflow: scroll;
    overflow-x: hidden;
    background-color: rgb(0, 0, 0);
    color: white;
    float: right;
}

.container3{
    padding: 12px;
    margin-top: 16px;
    margin-bottom: 64px;
    height: 250px;
    width: 616px;
    overflow: scroll;
    overflow-x: hidden;
    background-color: black;
    color: white;
    float: right;
    text-align: center;
}

.wrapper{
    margin-top: 64px;
    margin-right: 256px;
    margin-bottom: 64px;
}

.container,.containera, .container2, .container2a, .container3{
    border-radius: 10px;
    box-shadow: 0 0 30px 1px #ff0000;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: red; 
    border-radius: 16px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .userbox{
    height: 50px;
    width: 250px;
  }

      /* Style for the draggable element */
      .draggable {
        position: absolute;
        width: 500px;
        height: 500px;
        background-color: black;
        cursor: move;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 0 30px 1px #ff0000;
        transform: translate(-50%, -50%);
left: 25%;
top: 50%;
display: grid;
place-items: center;

    }

    /* Style for the image */
    .draggable img {
        width: 300px;
        display: block;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        
    }

    /* Style for the text */
    .draggable p {
        position: absolute;
        bottom: 50px; /* Adjusted bottom position to accommodate two lines of text */
        width: 100%;
        text-align: center;
        color: white;
        margin: 0;
        padding: 10px;
    }
    
    .additional-text{
    word-spacing: 50px;
    }

    /* Style for the additional line of text */
    .draggable p.additional-text {
        bottom: 25px; /* Adjusted bottom position to separate from the first line of text */
    }

    a:link { 
      text-decoration: none; 
    } 
    a:visited { 
      text-decoration: none; 
    } 
    a:hover { 
      text-decoration: none;
      color: #ff0000; 
    } 
    a:active { 
      text-decoration: none; 
    }

    a{
      color: white;
    }