/* Main player container */
.player {
    width: fit-content;
    border: #CECECE solid 2px;
    border-radius: 100px;
    background: linear-gradient(0deg, #d4f7d4 0%, #b9f2b9 50%, #a0eda0 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;
    }
 
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: pointer;
    }
 
 
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: pointer;
    }
 
    .flex {display: flex;}
 
   
 
 
    
 
/* Music display area */
#musicplayer {
    display: block;
    float: right;
    /* KEEP the original layering of padding-box + border-box to preserve shadows and images */
    background: 
        linear-gradient(0deg, #e0f9e0, #c6f4c6) 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 outer */
.wheel {
    display: block;
    justify-content: center;
    margin: auto;
    /* Keep existing borders and shadows + add green gradient behind */
    background: linear-gradient(#e6ffe6, #b9f2b9) 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;
}


/* Inner wheel */
.innerwheel {
    border-radius: 50em;
    border: 2px solid #E2E2E2;
    padding: 9px 12px;
    margin: 0;
    background: linear-gradient(#f0fff0, #d4f7d4) padding-box, 
                linear-gradient(to top, white, #A2A2A2) border-box;
    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{
  margins:0;
  padding-bottom:5px;
}

 
    .wheelcontrols {
        font-size:14px !important; /* size of controls */
        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; /* padding around song title */
        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; /* size of controls */
        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 around seeking bar */
      padding-left:0;
      padding-bottom:0px;
      color:#A3A3A3;
    }
 
    .current-time {
        padding-right:5px;
    }
 
    .total-duration {
        padding-left:5px;
    }
    
.zero {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 200px;/* controls the size */
  height: auto;   /* keeps proportions */
}
 
 
  

.textbox {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 650px;
  overflow-y: scroll;

  background: transparent;
  border: none;
  padding: 10px;

  color: black;
  font-family: 'Press Start 2P', cursive;
  font-size: 16px;
}

.textbox::-webkit-scrollbar {
  display: none;}
  


/* Camera container in top-left corner with cameraa.png as background */
.camera {
  position: relative;
  width: 400px;
  height: 530px;
  background: url('https://zoroperson.neocities.org/cameraa.png') no-repeat top left;
  background-size: contain;     /* scale the camera image inside container */
  /* top-left corner: no margin */
}

/* Photo display inside the camera screen */
.screen {
  position: absolute;
  top: 240px;   /* adjust to fit the screen area of cameraa.png */
  left: 110px;   /* center inside camera screen area */
  width: 185px; /* match the display area width */
  height: 250px; /* match the display area height */
  object-fit: cover; /* image fits nicely */
  border: 2px solid transparent; /* optional, remove if not needed */
  z-index: 2; /* above camera background */
}

/* Camera button over the lens/button area */
.cameraButton {
  position: absolute;
  bottom: 360px; /* adjust based on cameraa.png */
  left: 156px;  /* center horizontally */
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: linear-gradient(#eee, #bbb);
  border: 3px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  z-index: 3; /* above screen */
}




#contain {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 350px;  /* small rectangle */
  height: 300px;
  border-width: 7px;
  border-style: solid;
  border-image: url("https://zoroperson.neocities.org/image%20back.png") 7 fill round;
  overflow: hidden;
}

/* Selfie image covers everything initially */
.selfie {
  position: absolute;
  top: 0;
  left: 0;            /* start at left 0 so it covers buttons */
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;         /* above the buttons */
  transition: transform 0.8s ease;
}

/* Slide the image to the left on hover to reveal buttons */
#contain:hover .selfie {
  transform: translateX(-90px);  /* move left far enough to show buttons */
}

/* Name + GIF on top */
.roman {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 4;
  font-family: kitten;
  color: white;
  font-weight: bold;
  font-size: 1.2em;
  text-shadow: -1px 0 #b9f7c9, 0 1px #b9f7c9, 1px 0 #b9f7c9, 0 -1px #b9f7c9;
  text-align: center;
}


.aes {
  width: 60px;
  height: auto;
}

/* Buttons under the image initially */
.numbered {
  position: absolute;
  top: 50%;
  right: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;  /* below the image */
}

.numbered a {
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-family: sant joan;
  font-weight: bold;
  color: white;
  background-color: #333;
  border: 2px solid white;
  border-radius: 0;
  text-decoration: none !important;
  transition: 0.3s ease;
}

.numbered a:hover {
  background-color: #FAE6F0;
  color: #333;
}