/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   
   
   @font-face {

font-family: "ButtonsnPatches";

src: url('https://lulling-coven.neocities.org/resources/buttons_patches/Buttons.ttf') format("truetype");

}






   @font-face {

font-family: "seventeen";

src: url('https://lulling-coven.neocities.org/resources/i_am_seventeen/I am Seventeen.ttf') format("truetype");

}




#title
{
  font-family:"ButtonsnPatches";
color:white;
margin:0;
left:0;
right:0;
font-size:70px;

}




body {
  

  background-image:url('resources/bg home.jpg');
  background-repeat: no-repeat;
  background-size:cover;
  top: 100vh;
	right: 100vh;
	bottom: 100vh;
	left: 100vh;
	min-height:200vh;
	width:100%;
	margin: 0;
  padding: 0;
transform:scale(.70);
 overflow: auto;
}

#branchcontain

{
  overflow:hidden;
}

#branch{
  right:-40vw;
  top:-25;
  position:absolute;
  z-index:1;
  overflow:hidden;
}
  


                                                                                          /* Main background */

	  
	  #mainbg
	  {

	   text-align: center;
  margin-left:auto;
  margin-right:auto;
  margin:0 auto;
  width:100%;
  border-radius:10%;
  position: relative;
  z-index:0;
  top:75%;
  min-height:100vh;

	  }
	  
	                                                                                         /* Main Content */
	  

#main {
  
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  margin:0 auto;
  width:100%;
  position: relative;
  z-index:0;
  top:10%;
  min-height:50vh;
background-color:#FFF;
  border: 1.25em solid transparent; 
border-image: url('resources/whitelace.png') 34 round;
background-clip: padding-box;

}


                                                                                     /* Sidebar and it's customization */

.containnavi {
   display: grid;
  grid-template-columns: 12.5em 1fr; 
  height: auto; 
}


.sidebarnavi {
  width: 12.5rem; 
  padding: 3.125rem;
  box-sizing: border-box;
 position:relative;
 z-index: 6;
 pointer-events:auto;
 height:auto;
 
}


.sidebarnavi ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


.sidebarnavi li {
  margin-bottom: 6.25em;
     font-family: "Tiny5", sans-serif;
  
 
}

.sidebarnavi a {
  display: block;
  padding: .625em;
  text-decoration: none;
  color: white;
  border-radius: .25em;
}

.sidebarnavi a:hover {
  background-color: grey;
}








                                                                                       /* Corner Image */

#corner
{
  background-image:url("resources/corner.jpg");
  float:left;
  width:25em;
  height:25em;
  z-index:99;
position:absolute;
border-radius: 50%; 
background-size:cover;
left:10%;
}


                                                                                   /* Update Paper */

#update {
  height:600px;
  width:600px;
  position:absolute;
  left:0;
  bottom:15%;

   font-family: 'Margarine', sans-serif;
   text-align: center;

  background-image:url("resources/update.png");
  background-repeat:no-repeat;
  background-size:contain;
  color: black;

 display: inline-block;
word-break:break-all;

}

#update p
{
  font-size:1em;
}


#update h1
{
  font-size:1.563em;
}

                                                                                    /* Footer */

#footer
{
  width: 1000%;
  /* Remove fixed height and large width */
  height: auto; /* let content define height */
  margin-top: .625em; /* optional spacing */
  /* Remove position: fixed or absolute if any */
}

  
                                                                                  /* Stamps */
#stamps{
  z-index:3;
  bottom:-10;
  width:4.375em;
  height:3.125em;
  display: flex; /* Aligns children side by side */
  justify-content: space-around; /* Distributes space between/around items (optional) */
  gap: 1.25em;
}



.marquee-container {
  overflow: hidden;
  width: 100%; 
  position:relative;
    z-index:0;
}

.marquee-content {
  display: flex;
  width: calc(200%); 
  animation: scroll-left 30s linear infinite;
  position:relative;
  z-index:0;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* music */
 #musicplayer {
   top:0;
   right:25%;
   width:100px;
   height:100px;
   position:absolute;
   z-index:99;
 }
 
 
 
    .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;
    }
 
    /* 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;}
 
   
 
 
    
 
    #musicplayer {
display:block;
        float:right;
      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{
  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:20px !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;
    }
    
 
 #welcome 
 {
   right:0%;
   width:500px;
   height:500px;
   text-align:center;
     position:absolute;

 }
 
 
 #welcome h3
 {
   font-family: "ButtonsnPatches";
 
   color:brown;
 }
 
 
 #welcome p
 {
   font-family:"seventeen";
   color:brown 
 }
 
 
 #vidframe
 {
   
   background-image:url('resources/home frame.png');
   background-repeat:no-repeat;
   position:absolute;
   display:flex;
   align-items:center;
   bottom:5%;
   left:0;
   width:700px;
   height:700px; 
   z-index:6;
   pointer-events: none;
   
 }
 
 #viditself
 {
 position:absolute;
 z-index:3;
 left:4%;
 bottom:28%;
 align-items:center;
 
 }
 
 
 #bubble
 {
   pointer-events: none;
   background-image:url('resources/bubble.png');
   background-size:contain;
   background-repeat:no-repeat;
   text-align:center;
   width:300px;
   height:300px;
   position:absolute;
   z-index:99;
   bottom:45%;
   left:35%;
 }
   
   
   #bubble p
   {
     color: brown;
     font-family:"seventeen";
     font-size:24px;
     position:absolute;
     margin:0;
     bottom:57%;

   }
     
 
 #kitty
 {
   
   left:0;
   bottom:-13.9%;
   position:absolute;
   width:400px;
   height:400px;
   z-index:99;
 }
 
 
 #pasture
 
 {
   bottom:0;
   margin:0;
   position:absolute;

 }