:root {
    --black: black; 
    --white: white; 
}



/* Small Grey Outline Pointer - https://www.cursors-4u.com/cursor/small-grey-outline-pointer */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/small-grey-outline-pointer-6a97f823-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */

body {
    padding: 0; 
    margin: 0; 
    display: flex;
    min-height: 100vh; 
    font-family: "Pixelify Sans", sans-serif;
    background-image: url(https://64.media.tumblr.com/acd22b1c2ffe31bdd7d4f4e3f6a6d5cf/48cbafc1d5349823-0a/s400x600/3806547b5af99eef7d9d8e38df56eba1408e29db.pnj); 
    background-size: 200px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    color: #828282; 
}

  /* made by cetfen, credit appreciated, but not necessary, just dont claim this is yours.
  feel free to iterate on this bit of css, im just an amateur at the end of the day. */
  
  @-moz-keyframes marquee {

	0% {
	  transform: translateX(100%);
}

	  100% {
	transform: translateX(-100%);
}

}

@-webkit-keyframes marquee {

	0% {
	  transform: translateX(100%);
}

	100% {
	  transform: translateX(-100%);
}

}

@keyframes marquee {

	0% {
	  -moz-transform: translateX(100%);
	  -webkit-transform: translateX(100%);
	  transform: translateX(100%);
}

	100% {
	  -moz-transform: translateX(-2700%);
	  -webkit-transform: translateX(-2700%);
	  transform: translateX(-2700%);
}

}

/* im not sure which of the above is needed, but i suggest you keep them all just in case.
   Also, you might need to tweak the percentages a little depending on how long your webpage,
   and the paragraph in the divider with the marquee class is.
   I learned that the hard way. (rip kittytailwag.gif) */

  .marquee {
	overflow: hidden;
	padding: 0px;
	margin: 0px;
}

.marquee > p {
	animation: 50s linear 0s infinite marquee;
	margin: 0px;
	white-space: nowrap;
}

.marquee p:hover {
	animation-play-state: paused;
}

/* hashes i.e "#" are values you can adjust to your liking. */
  

a {
    text-decoration: none;
    color: inherit; 
}

.main-container {
    display: flex;
    gap: 10px; 
    width: 600px;
}

.sidebar, .main-content, header, .welcome-box, .two-box-row, .social-title{
    border-width: 4px;
    border-radius: 10px;
    border-style: double;
    background-color: var(--white);
    box-shadow: 0px 0px 10px #A0A0A0;
}

.sidebar {
    flex: 0 0 25%;
    min-height: 400px;
    gap: 5px; 
    padding: 5px; 
        user-drag: none; /* Disable dragging */
    user-select: none; /* Disable selection */
    -webkit-user-drag: none; /* For WebKit browsers (Chrome and Safari) */
    -webkit-user-select: none;
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For Internet Explorer */
    pointer-events: none; /* Disable right-click and long-press */
}

.main-content {
     flex: 1;
    min-height: 400px;
    width: 500px;
    padding: 8px; 
        display: flex;
    flex-direction: column;
    gap: 10px; 
    overflow-y: scroll;
}

.pfp {
    width: 100%; 
    border: 1px dotted var(--black); 
    border-radius: 5px;
}

header {
    display: flex;
    font-size: 20px;
    padding: 15px; 
    justify-content: center;
    align-items: center;
}

.welcome-box {
    display: flex;
    flex-direction: column;
    gap: 5px; 
    width: 374px;
    height: 200px;
    padding: 8px;
    overflow-y: auto;
}

.welcome-title {
    font-size: 25px;
    letter-spacing: 3px;
    background: radial-gradient(circle, #FFB8CF, #B09F9B);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.welcome-txt {
    text-align: justify;
    margin: 0; 
}


.trinkets {
    width: 130px;
    height: 100px;
    padding: 5px;
    overflow-y: auto;
}

.trinkets-display {
    width: 140px;
    border-width: 4px;
    border-radius: 10px;
    border-style: double;
    background-color: var(--white);
    box-shadow: 0px 0px 10px #A0A0A0;
}

.smaller {
    width: 130px;
    height: 65px;
    padding: 5px;
    overflow-y: auto;
}

.smaller-display {
    width: 140px;
    border-width: 4px;
    border-radius: 10px;
    border-style: double;
    background-color: var(--white);
    box-shadow: 0px 0px 10px #A0A0A0;
}

.btn-group {
  display: flex;
  flex-direction: column;
}
    
.button {
  background-color: #FFFFFF;
  border: solid 1px #A0A0A0;
  color: #A0A0A0;
  border-radius: 12px;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  margin: 5px;
}
.button2 {
  background-color: #FFFFFF;
  border: solid 1px #A0A0A0;
  color: #A0A0A0;
  border-radius: 12px;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  margin: 5px;
}
.button3 {
  background-color: #FFFFFF;
  border: solid 1px #A0A0A0;
  color: #A0A0A0;
  border-radius: 12px;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  margin: 5px;
}

.image-left {
    float: left;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 2px;
    user-drag: none; /* Disable dragging */
    user-select: none; /* Disable selection */
    -webkit-user-drag: none; /* For WebKit browsers (Chrome and Safari) */
    -webkit-user-select: none;
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For Internet Explorer */
    pointer-events: none; /* Disable right-click and long-press */
}

p {
    margin-top: 0;
}

::selection {
  background: #FFB8CF;
}

.button:hover {box-shadow:0 0px 5px 0 rgba(171, 171, 171, 0.8)}
.button2:hover {box-shadow:0 0px 5px 0 rgba(171, 171, 171, 0.8)}
.button3:hover {box-shadow:0 0px 5px 0 rgba(171, 171, 171, 0.8)}