body {
  background:#f8dde8;
  color: #4b2c20;
  font-family: "Comic Sans MS";
  margin: 0;
  cursor: url("assets/pictures/cursorr.png"), auto;
}


#layout {
  max-width: 1400px;
  width: 95%;
  margin: 0 auto;
  display: flex;
  gap: 15px;
  padding-top: 20px;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

#side-left,
                                                 #side-right {
  width: 180px;
  background: rgba(255, 255, 255, 0.85);
  border: 3px dotted #ffb6d5;
  border-radius: 15px;
  padding: 15px;
  text-align: left;
  font-size: 14px;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}
.box{
padding: 20px;
  color: #e0418e;
  border: 2px dashed #e0418e;
  margin: 10px 0px 10px 0px;
  border-radius: 25px;
  background: #ffffff;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}
#neighbors ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

.mini-box {
  width: 100%;
  height: 120px;
  background: #ffe6f3;
  border: 2px solid #ffb6d5;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

.mini-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

.sidebar-section {
  background: #ffeef7;
  border: 2px solid #ffc7da;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

.sidebar-section h4 {
  margin: 0 0 8px 0;
  color: #a84c68;
  font-size: 15px;
  font-weight: bold;
}

.sidebar-section ul {
  margin: 0;
  padding-left: 15px;
}

.sidebar-section li {
  margin-bottom: 6px;
}

.sidebar-section a {
  color: #c43657;
  text-decoration: none;
}

.sidebar-section a:hover {
  text-decoration: underline;
}


#content-area {
  flex: 1;
  background: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border: 3px dotted #ffb6d5;
  border-radius: 15px;
     cursor: url("assets/pictures/cursorr.png"), auto !important;

}

#stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(circle, #ffc2da 1px, transparent 1px);
  background-size: 80px 80px;
  animation: twinkle 8s infinite linear;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

@keyframes twinkle {
  0% {opacity: 0.8;}
  50% {opacity: 0.4;}
  100% {opacity: 0.8;}
}

header {
  text-align: center;
  background-color: #c981f8;
  border-bottom: 3px double #9200cc;
  padding: 15px;
  background-image: url(assets/pictures/logosite.png);
  background-repeat: no-repeat; 
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

h1 {
  font-size: 2.5em;
  color: #d12961;
  margin-bottom: 5px;
}

nav {
  text-align: center;
  background: #ffdce3;
  padding: 8px;
  border-bottom: 2px solid #ffadc6;
}

nav a {
  color: #a84c68;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
}

nav a:hover {
  color: #c43657;
}

main {
  width: 100%;
  margin: 30px auto 0 auto;
}

.float-pic {
  float: right;
  width: 120px;
  margin-left: 15px;
}

footer {
  text-align: center;
  font-size: 0.9em;
  background: #ffdce3;
  border-top: 3px double #ffb6c1;
  padding: 10px;
  color: #7a3e53;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

a, h1, h2 {
  text-shadow: 0 0 5px #fff0f5, 0 0 10px #ffc0cb;
}

#boom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 400;
  height: 400%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

#boom-img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;   
  height: auto;
  z-index: 99999;
  display: none;
  pointer-events: none;
}
#jumpscare-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 400;
  height: 400%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

#jumpscare-img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;   
  height: auto;
  z-index: 99999;
  display: none;
  pointer-events: none;
}

#yay-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 400;
  height: 400%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

#yay-img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;   
  height: auto;
  z-index: 99999;
  display: none;
  pointer-events: none;
}


@keyframes shake {
  0% { transform: translate(2px, 2px); }
  25% { transform: translate(-2px, 2px); }
  50% { transform: translate(2px, -2px); }
  75% { transform: translate(-2px, -2px); }
  100% { transform: translate(2px, 2px); }
}

#pet-chat-wrap {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin: 20px 0;
}

#pet-chat {
  width: 320px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px dashed #ffb6d5;
  border-radius: 15px;
  padding: 8px;
}

#pet-chat h4 {
  margin: 0 0 6px 0;
  text-align: center;
  font-size: 14px;
  color:
  
  #a84c68;
}

.player {
  width:fit-content;
  border: #CECECE solid 2px;
  border-radius: 100px;
  margin-left:auto;
  margin-right:auto;
background: linear-gradient(0deg, rgba(205,205,205,1) 0%, rgba(230,230,230,1) 30%, rgba(255,255,255,1) 100%); 
padding:5px;
}




.seek_slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 6px;
background: #e4d5dc;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 8px;
}

.seek_slider::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 8px;
height: 8px;
background: white;
cursor: pointer;
border-radius: 50%;
border:1px solid #cecece;
padding-top:3px;
position:relative;
bottom:3px;
}

button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Myriad Pro";font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit].vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{opacity:0.5}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{opacity:1}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}




@media (not(hover)){
button:not(:disabled):hover {
box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}


@font-face {
font-family: "Myriad Pro";
src: url("https://dl.dropbox.com/scl/fi/z8hqw29h8a9i3a3cbbxkt/MYRIADPRO-REGULAR.OTF?rlkey=begwqxljs2gzyw26h00oeovzi&st=px0mbeax&dl=0") format("woff");
}



.window, .title-bar {
font-family: "Myriad Pro";
-webkit-font-smoothing: none;
font-size: 11px;
}

.window {
padding:10px;
width:290px;
}


.window-body { 
display:block;
margin:auto; 
border-radius:0em;
}



input[type=range] {
  -webkit-appearance: none;
  appearance:none;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px; 
  cursor: pointer;
}


input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
}

.flex {display: flex;}






#musicplayer {
display:block;
background: linear-gradient(0deg, #F1E3F0, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box;
border-radius: 60em;
border: 2px solid transparent;
margin-left:8px;
padding-left:10px;
box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
}


.wheel {
display: block;
justify-content: center;
  margin:auto;
background: linear-gradient(white, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box;
border-radius: 50em;
border: 2px solid transparent;
padding-top:0px;
box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
}

.innerwheel {
border-radius: 50em;
border: 2px solid #E2E2E2;

padding:9px;
padding-left:10px;
padding-right:12px;
margin:0;
box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;

}
th{
width:20px;

margin:0;
}
.fas fa-minus{
margin:9;
padding-bottom:5px;
}


.wheelcontrols {
  font-size:14px !important;
  text-align:center;
  padding-top:2px;
color: #aaa;
opacity: 0.8;
}

.wheelcontrols button {
background: none;
border: none;
color: #aaa;
opacity: 0.6;
font-size: 14px;
padding: 2px;
cursor: pointer;
}
.wheelcontrols button:hover {
opacity: 1;
}

.controls button:hover {
opacity: 1;

}

.playpause-track button{
display:block;
color:#C1C1C1;
font-size: 20px;
margin:auto;
}

.playpause-track {
font-size: 22px !important;
padding: 3px;
}

.songtitle {
  padding:25px;
  color:#A3A3A3;
padding-bottom:0;
margin-left:15px;
margin-right:20px;
  font-size: 16px;
  display:block;
  font-family:Myriad Pro;
}

.controls button{
display:block;

margin-left:15px;
  font-size:14px !important;
  text-align:center;
  color:#ccb3be;
opacity:0.6
  
} 

button {
min-width:20px;
background:none;

text-align:center;
}
button:active {
opacity: 0.7;
}


.seeking {
  display:flex;
  justify-content: space-evenly;
  padding:10px;
padding-left:0;
padding-bottom:0px;
color:#A3A3A3;
}

.current-time {
  padding-right:5px;
}

.total-duration {
  padding-left:5px;
}


#ddlccafe {
  margin-top: 20px;
  position: relative;
  width: 100%;
}

.cafe-scene {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 280px;
}


.cafe-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cafe-girl {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 2;
}

.cafe-girl:hover {
  transform: translateX(-50%) scale(1.05);
}

#dialog-box {
  width: 100%;
  height: 100%;
  background: #1b1b1b;
  border: 3px solid #ff7fbf;
  padding: 10px;
  color: white;
  font-family: "Comic Sans MS";

  min-height: 110px;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

#dialog-text {
  height: 55px;
  font-size: 14px;
  overflow: hidden;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

#dialog-choices {
  height: auto; 
  display: flex;
  flex-direction: column;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

#dialog-choices button {
  width: 100%;
  margin-top: 4px;
  background: #ff7fbf;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: white;
  font-family: "Comic Sans MS";
  transition: 0.2s;
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

#dialog-choices button:hover {
  background: #ff4da6; 
     cursor: url("assets/pictures/cursorr.png"), auto !important;
}

.choice {
  display: block;
}

.hidden {
  display: none;
}


#clickertrain {
    -webkit-animation-name: sway;
    -webkit-animation-duration: 5s;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
}
element.style {
    position: fixed;
    height: 270px;
    right: -23px;
    bottom: 0px;
    z-index: 100000;
}

sway animation {
    transform-origin: 110.734px 243px;
    transform: rotate(0.764874deg);
}


@keyframes sway {
    0% {
    transform: rotate(-3deg);
    transform-origin: 50% 90%;
}

50% {
    transform: rotate(3deg);
    transform-origin: 50% 90%;
}

100% {
    transform: rotate(-3deg);
    transform-origin: 50% 90%;
}


}

#statuscafe {
  width: 100%;
  height: 120px;          
  border: none;
  overflow: hidden;
  display: block;
  background: transparent;
  
}
#statuscafe-username {
            font-size: .8em;
    min-height: 1em;
    margin-bottom: .5em;
}
#statuscafe-content {
     font-size: .95em;
    min-height: 2.5em;
    line-height: 1
} burda telefonlardan girince font u başka birşey yapan bir kod var ama hangisi