html, body, a { cursor:url("http://i.imgur.com/2qleX.jpg"), auto !important; }

a:hover{cursor:url("http://i.imgur.com/IepP2.jpg"), auto !important; }
* {
  box-sizing: border-box;
}

body {
  margin: 0;
font-family: 'OKASINO', sans-serif;
background-image: url('https://4.bp.blogspot.com/-KHhl4ajUQ-0/UACgFtxH-cI/AAAAAAAAE4E/lf7wUQJQ4OI/s400/cute%2Bfondo%2B%252818%2529.gif')
}
#mario {height:0;padding-bottom:103.85%;position:relative;}
#mario1 {width:260px;max-width:100%;}
iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
textarea {
  width: 300px;
  height: 400px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: var(--turquoise-blue);
  font-size: 16px;
  resize: none;
}

/* Style the side navigation */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #e8e288ff;
  overflow-x: hidden;
}


/* Side navigation links */
.sidenav a {
  color: white;
  padding: 16px;
  text-decoration: none;
  display: block;
}

/* Change color on hover */
.sidenav a:hover {
  background-color: var(--transparent);
  color: var(--softPink);
}

/* Style the content */
.content {
  margin-left: 200px;
  padding-left: 20px;
}

.content h1{ font-family: 'Calligraphy Stye', sans-serif;
color: var(--mantis);}


a{
 -webkit-transition: all 250ms ease-out;
    -moz-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    color:var(--coral);
}
 a:hover{
      letter-spacing: 0.25em;
}

.content img{
-webkit-transition: opacity 0.8s linear;
opacity: 0.60;
}
.content img:hover{
-webkit-transition: opacity 0.8s linear;
opacity: 1;
}

@use postcss-preset-env {
  stage: 0;
}

.fakelink { color:var(--coral);}

:root {
  --color-background: #000119;
  --stroke-width: calc(1em / 16);
  --font-weight: 700;
  --letter-spacing: calc(1em / 8);
  --coral: #ff8360ff;
--khaki-x-11-light-khaki: #e8e288ff;
--mantis: #7dce82ff;
--medium-turquoise: #3cdbd3ff;
--turquoise-blue: #00fff5ff;
--softPink: #F9D8D4;
--yellow: #F9A734;
--DarkYellow: #FB8B24;
--green: #36964C;
--DarkGreen: #286E38;
--transparent: rgba(255, 255, 255, 0);
}

* {
  box-sizing: border-box;
}


.sidenav {
  background-clip: text;
  background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
  color: var(--color-background);
  font-weight: var(--font-weight);
  letter-spacing: var(--letter-spacing);
  padding: calc(--stroke-width / 2);
  -webkit-text-stroke-color: var(--transparent);
  -webkit-text-stroke-width: var(--stroke-width);
}

#s-m-t-tooltip {

max-width:300px; padding:4px 4px 4px 4px; margin:20px 0px 0px 20px; background: #fff; /* change the background color you can change it to transparent too*/

border:1px solid #000; /* change the border and its color */

font-size:10px; /* change the font size */

letter-spacing:0px; /* change the letter spacing */

text-transform:lowercase; /* can be none , lowercase or even uppercase!*/ color:#000; /* change the text color */ z-index:999999999999999999999999999999999999; }

#box {border:1px solid black;width:150px;height:150px;overflow:scroll;}



/* Background styles */

#box { 
	background:
	/* Pineapple details */
	radial-gradient(circle closest-side at 50px 50px, var(--DarkYellow) 3px, transparent 0),
	radial-gradient(circle closest-side at 40px 60px, var(--DarkYellow) 3px, transparent 0),
	radial-gradient(circle closest-side at 60px 60px, var(--DarkYellow) 3px, transparent 0),
	radial-gradient(circle closest-side at 50px 70px, var(--DarkYellow) 3px, transparent 0),
	
	radial-gradient(circle closest-side at 150px 165px, var(--DarkYellow) 3px, transparent 0),
	radial-gradient(circle closest-side at 140px 175px, var(--DarkYellow) 3px, transparent 0),
	radial-gradient(circle closest-side at 160px 175px, var(--DarkYellow) 3px, transparent 0),
	radial-gradient(circle closest-side at 150px 185px, var(--DarkYellow) 3px, transparent 0),
	
	/* Pineapple base */
	radial-gradient(ellipse closest-side at 50px 60px, var(--yellow) 18px, transparent 0),
	
	radial-gradient(ellipse closest-side at 150px 175px, var(--yellow) 18px, transparent 0),
	
	/* Pineapple leafs */
	radial-gradient(circle closest-side at 30px 40px, var(--softPink) 15px, transparent 0),
	radial-gradient(circle closest-side at 40px 35px, var(--green) 15px, transparent 0),
	radial-gradient(circle closest-side at 70px 40px, var(--softPink) 15px, transparent 0),
	radial-gradient(circle closest-side at 60px 35px, var(--DarkGreen) 15px, transparent 0),
	
	radial-gradient(circle closest-side at 130px 155px, var(--softPink) 15px, transparent 0),
	radial-gradient(circle closest-side at 140px 150px, var(--green) 15px, transparent 0),
	radial-gradient(circle at 170px 155px, var(--softPink) 15px, transparent 0),
	radial-gradient(circle at 160px 150px, var(--DarkGreen) 15px, transparent 0);
	background-color: var(--softPink);
	background-size: 180px 210px;
	animation: animatedBackground .5s cubic-bezier(.61,-0.64,.58,1.46) forwards;
}


/* Animation */

@keyframes animatedBackground {
	from { background-position: 0 50%; }
	to { background-position: 0 0; }
}