h1 {
  color: hotpink;
}

p,
li {
  color: purple;
}

@font-face {
    font-family: Courgette;
    src: url('/fonts/Hybrid.ttf');
  }	

	
	::-moz-selection {
    color: white;
    background: #fc8eac;
	}
              
  ::selection {
    color: white;
    background: #fc8eac;
  }

	body {
		font-family: 'Hybrid';
		margin: 40px auto;
		background-color: #e25098;
		color: #f77fbe;
		background-size: 1170px;
		background-repeat: repeat;
		background-attachment: fixed;
		background-image: url('https://i.pinimg.com/736x/1f/f1/fb/1ff1fbf63ed24655ee072fe9f50d82a1.jpg');
		cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="48" viewBox="0 0 24 24"><path fill="%23FF81BA" stroke="%23000" stroke-width="1" stroke-linejoin="round" d="M12 8S9.75 5 7 5a4.5 4.5 0 0 0-4.5 4.5C2.5 14.5 12 20 12 20s9.5-5.5 9.5-10.5A4.5 4.5 0 0 0 17 5c-2.75 0-5 3-5 3Z"></path></svg>'), default;   
	}
	   
	#header {
    width: 100%;
    height: 243px;
    background-size: 100%;
		background-repeat: no-repeat;
		background-image: url('/images/backgrounds/headers/Main Header.jpg');
		margin-left: -2px;
  }
	   
	#flex {
		display: flex;
	}
	
	#container {
    max-width: 1200px;
    margin: 0px auto;
  }
	
	.box {
		max-height: 4500px;
		max-width: 1100px;
		background-color: #ffffff;
		border: 4px solid #ffb3d9;
		border-radius: 30px;
		margin: 40px auto;
		padding: 20px;
	}
 
	aside {
    background-color: #ffb3d9;
		max-width: 200px;
    padding: 20px;
		border: 4px solid #fc89ac;
		border-radius: 15px;
  }

  main {
    background-color: #f77fbe;
		background-image: url('/images/backgrounds/tumblr_oaql3masBv1v8ll5wo1_500.png');
    padding: 20px;
		border: 4px solid #fc89ac;
		border-radius: 15px;
		flex: 1;
  }
	
	footer {
    background-color: #fd6c9e;
    height: 40px;
    padding: 10px;
		border: 4px solid #fc89ac;
		border-radius: 15px;
    text-align: center;
    color: #ffffff;  
  }
	
	button {
    font-family: 'Courgette';
    border: 2px outset;
    border-radius: 12px;
    background-color: #ffb3d9;
    color: #ffffff;
  }
	
	button:hover {
    border: 2px inset;
    border-radius: 12px;
    background-color: #ffb3d9;
    cursor: url('/images/hello kitty/Hello Kitty Pointer 2.png'), default;
  }
	
	.flexcenter {
	  justify-content: center;
	}
	  
	.section1 {
		width: 165px;
		height: 195px;
		background-color: #ffffff;
		border: 2px solid #ffb3d9;
		border-radius: 10px;
		overflow-x: hidden;
		scrollbar-color: #ff99cc #ffbcd9;
		scrollbar-width: auto;
	}
	
	.section2 {
		width: 165px;
		height: 220px;
		border-width: 20px;
		background-color: #ffffff;
		border: 2px solid #ffb3d9;
		border-radius: 15px;
		overflow-x: hidden;
		scrollbar-color: #ff99cc #ffbcd9;
		scrollbar-width: auto;
	}
			
	.section3 {
		width: 165px;
		height: 335px;
		background-color: #ffffff;
		border: 2px solid #ffb3d9;
		border-radius: 15px;
		overflow-x: hidden;
    overflow-y: scroll;
		scrollbar-color: #ff99cc #ffbcd9;
		scrollbar-width: none; 
	}
	
	.section4 {
		max-width: 560px;
		height: 240px;
		background-color: #ffffff;
		border-width: 30px;
		border-style: solid;
		border-image: url('/images/crescentlace.png') 40 fill round;
		border-radius: 10px;
		overflow: auto;
		scrollbar-color: #ff99cc #ffbcd9;
		scrollbar-width: auto;
	}
	
	.section5 {
		max-width: 560px;
		border-width: 20px;
		border-style: solid;
		border-image: url('/images/crescentlace.png') 40 fill round;
		background-color: #ffffff;
		border-radius: 15px;
	}
	
	.section6 {
		float: left;
		width: 43%;
		height: 395px;
		background-image: url('/images/backgrounds/whiteline.jpg');
		border-top: 5px dotted #ffb3d9;
		border-radius: 10px;
		overflow: auto;
		scrollbar-color: #ff99cc #ffbcd9;
		scrollbar-width: thin;
	}
		
	.section7 {
		max-width: 560px;
		border-width: 20px;
		border-style: solid;
		border-image: url('/images/crescentlace.png') 40 fill round;
		background-color: #ffffff;
		border-radius: 15px;
	}
	
	.section8 {
		width: 165px;
		height: 280px;
		background-color: #ffffff;
		border-width: 30px;
		border: 2px solid #ffb3d9;
		border-radius: 10px;
		overflow: auto;
		scrollbar-color: #ff99cc #ffbcd9;
		scrollbar-width: auto;
	}
	
	.section9 {
		width: 165px;
		height: 150px;
		background-color: #ffffff;
		border-width: 30px;
		border: 2px solid #ffb3d9;
		border-radius: 10px;
		overflow: auto;
		scrollbar-color: #ff99cc #ffbcd9;
		scrollbar-width: auto;
	}
		
	.section10 {
		width: 165px;
		height: 214px;
		background-color: #ffffff;
		border: 2px solid #ffb3d9;
		border-radius: 10px;
		overflow: hidden;
		scrollbar-color: #ff99cc #ffbcd9;
		scrollbar-width: auto;
	}
	
	.tooltip {
    position: relative;
    display: inline-block;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    left: 20%;
    position: absolute;
    z-index: 50;
    font-size: 1em;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  
  .tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
  }
		
	#statuscafe {
		width: 152px;
		height: 130px;
    padding: .5em;
		border: 2px solid #ffb3d9;
    background-color: #ffffff;
		font-size: 0.8125em;
		border-radius: 10px;
		color: #ff99cc;
		overflow: auto;
		scrollbar-width: thin;
  }
            
  #statuscafe-username {
    margin-bottom: .7em;
		margin-top: .3em;
  }
            
  #statuscafe-content {
    margin: 0 1em 0.5em 1em;
  }
	
	.smallerbox {
		width: 155px;
		height: 20px;
		background-color: #fd6c9e;
		border: 2px solid #ff69b4;
		border-radius: 15px;
		margin-bottom: 5px;
		margin-left: 5px;
	}
	
	.smallerbox2 {
		max-width: 540px;
		height: 20px;
		background-color: #fd6c9e;
		border: 2px solid #ff69b4;
		border-radius: 15px;
		margin-bottom: 5px;
		margin-left: 5px;
	}
	
	.smallerbox3 {
		max-width: 250px;
		width: 40%;
		height: 20px;
		background-color: #fd6c9e;
		border: 2px solid #ff69b4;
		border-radius: 15px;
		margin-bottom: 5px;
		margin-left: 5px;
	}
	
	.smallerbox4 {
		float: right;
		max-width: 265px;
		width: 49%;
		height: 20px;
		background-color: #fd6c9e;
		border: 2px solid #ff69b4;
		border-radius: 15px;
		margin-top: -426px;
		margin-bottom: 200px;
		margin-left: 220px;
	}
	
	h1 {
	  font-size: 1.3125em;
	  text-align: center;
	  margin-top: -2px;
	  color: #ffffff;  
	}
	
	p.a {
	  font-size: 1.0625em;
	  color: #ff99cc;
	  text-align: left;
	  text-indent: 15px;
	}
		
	p.b {
	  font-size: 1em;
	  color: #ff99cc;
	  text-align: center;
	}

	p.c {
	  font-size: 1.125em;
	  margin-top: 10px;
	  text-align: center;
	}

	p.d {
	  font-size: 1.125em;
	  text-align: center;
	  width: 550px;
	  color: #ff99cc;
	}
	
	p.e {
	  text-align: left;
    margin-left: 10px;
	  font-size: 0.9375em;
	  color: #ff99cc;
	}
	
	p.f {
	  font-size: 1em;
	  text-align: left;
	  color: #ff99cc;
	  margin-left: 5px;
	}
	
	ul.a {
    font-size: 1em;
	  color: #ff99cc;
    text-align: left;
    list-style-image: url('/images/hello kitty/hello-kitty-pink-bow-png-clipart-thumbnail very smol.png');
  }
  
  ul.b {
	  text-indent: 2px;
    font-size: 1em;
    margin-bottom: 15px;
	  margin-left: -15px;
    list-style: disc;
	}
	
	ul.c {
	  text-indent: 2px;
    font-size: 1em;
    margin-bottom: 15px;
	  margin-left: -15px;
    color: #f77fbe; 
    list-style: disc;
	}
  	    			  
	ul.d {
	  margin-left: 10px;
    padding: .5em;
	  font-size: 0.9375em;
    text-indent: 2px;
	  color: #f77fbe;
    list-style: disc;  
  }
  
  ul.e {
	  text-indent: 2px;
    font-size: 1em;
    margin-left: 10px;
    padding: .5em;
    color: #f77fbe; 
    list-style: disc;
	}
	
	ul.f {
	  margin-top: 20px;
    padding: 5px;
    color: #ffffff; 
    font-size: 0.8625em;
    list-style: none;
	}
	
	a:link {
    text-decoration: none;
    color: #ff99cc;
	}

	a:visited {
		text-decoration: none;
		color: #ff99cc;
	}
	
	a:hover { 
    opacity: 0.7;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="48" viewBox="0 0 24 24"><path fill="%23FF81BA" stroke="%23000" stroke-width="1" stroke-linejoin="round" d="M12 8S9.75 5 7 5a4.5 4.5 0 0 0-4.5 4.5C2.5 14.5 12 20 12 20s9.5-5.5 9.5-10.5A4.5 4.5 0 0 0 17 5c-2.75 0-5 3-5 3Z"></path></svg>'), default;
  }
  
  a.one:link {
    text-decoration: none;
    font-weight: bold;
    color: #f77fbe; 
  }
           
  a.one:visited {
    text-decoration: none;
    font-weight: bold;
    color: #f77fbe; 
  }
            
  a.one:hover {
    opacity: 0.7;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="48" viewBox="0 0 24 24"><path fill="%23FF81BA" stroke="%23000" stroke-width="1" stroke-linejoin="round" d="M12 8S9.75 5 7 5a4.5 4.5 0 0 0-4.5 4.5C2.5 14.5 12 20 12 20s9.5-5.5 9.5-10.5A4.5 4.5 0 0 0 17 5c-2.75 0-5 3-5 3Z"></path></svg>'), default;
 }
	
	@media only screen and (max-width: 1100px) {
    #flex {
      flex-wrap: wrap;
   }
				
    aside {
      width: 100%;
    }
			
		#leftSidebar {
      order: 1;
    }
			
		main {
      order: 2;
			width: 80%;
    }
				
    #rightSidebar {
      order: 3;
     }
	}