/* 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." */
body:has(#light:checked) {
  color: black;
  background: white;
  background-image:url('backgroundbeach.jpg');
   background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;}
  
body:has(#dark:checked) {
  color: white;
  background: black;
  background-image:url('scenebg.jpg');
   background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;}
body {
 background-image:url('backgroundbeach.jpg');
   background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  
  /* The sidebar menu */
.sidenav {
  height: 20%; /* Full-height: remove this if you want "auto" height */
  width: 13vh; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color:  azure; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 2vh;
  max-width: 13vh;
  min-width: 13vh;
  
}

/* The navigation menu links */
.sidenav a {
  padding: 0.6vh 0.8vh 0.6vh 1.6vh;
  text-decoration: none;
  font-size: 1em;
  color: darkcyan;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: DarkBlue;
}
/*Tabs Start*/
#linkity {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    border-bottom: 1px solid transparent;
    top: 10px;
    margin-top: 20vh;
    /* left: -51px; */
}

#linkity a, button{
    width: 15%;
    display:inline-block;
    margin-right:-3px;
    background-color: azure;
    color: darkcyan;
    padding-top: 5px;
    border-top: 2px dashed #f4a1b6;
    border-left: 2px dashed #f4a1b6;
    border-right: 2px dashed #f4a1b6;
    border-bottom: none;
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-radius:10px 10px 0px 0px;
    border-radius:10px 10px 0px 0px;
    letter-spacing:2px;
    margin: 0px 0px 0px 3px;
    transition:.4s;
}

#linkity a, button:hover{
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
      text-shadow: -.25px -.25px 0 rgba(98, 96, 210, 1), 
                    .25px .25px rgba(98, 96, 210, 1);
    color: rgba(98, 96, 210, 1);
}

.tabcontent {  
   padding: 10px;
   transition: 2s;
}

.tabcontent.on {
    -webkit-animation: fadein 0.6s 1 linear alternate;
    -moz-animation: fadein 0.6s 1 linear alternate;
    -ms-animation: fadein 0.6s 1 linear alternate;
    -o-animation: fadein 0.6s 1 linear alternate;
    animation: fadein 0.6s 1 linear alternate;
}
	
@keyframes fadein {
    0% { opacity: 0%; transform: translate(-7px); 
      }
    30% { opacity: 0%; transform: translate(-7px); 
      }
    100% { opacity: 100%; transform: translate(0px);
      }
}
/*Tabs End*/


  
    #MainBody {
      background-color: azure;
      color: darkcyan;
    width: 50vh;
    height: 50vh;
    margin-right: 50vh;
    margin-top: 10vh;
    max-width: 500px;
    min-width: 500px;
    text-align: center;
    border: 7vh solid transparent;
    float: right;
      overflow: auto;
      border-image: url('marineborder.png') 40% stretch;
    }
    
    #Blinkies {
      min-width: 100px;
position: relative;
    }
    #goals {
      background-color: azure;
      color: darkcyan;
      width: 20vh;
      float: left;
      margin-left: 100vh;
      margin-top: 1vh;
      border: 7vh solid transparent;
      max-width: 20vh;
    min-width: 20vh;
      border-image: url('waveborder.png') 20% round;
     overflow: auto;
      
    }
    
    #Aboutme {
      overflow: scroll;
      background-color: peachpuff;
      color: darkcyan;
    width: 70vh;
    height: 30vh;
    margin-left: 60vh;
    margin-top: 22vh;
    text-align: center;
    border: 7vh solid transparent;
      max-width: 70vh;
    min-width: 70vh;
      border-image: url('marineborder.png') 40% stretch;
    }
    
    #notfound {
      color: mediumorchid;
      text-align: center;
    }
    
    
    
    #main1 {
     background-color: lightblue; opacity: 0.6;
     color: hotpink;
     width: 50vh;
     height: 90vh;
     padding 1.5vh;
     border: 6vh solid transparent;
     border-image: url('neonborder.png') 30% stretch;
     border-image-outset: 0.5 0.8;
     margin-left: 70vh;
    margin-top: 20vh;
    text-align: center;
     max-width: 500px;
    min-width: 500px;
    overflow: auto;
    }
      
      #warning {
        background-image: url('pattern3.png');
        color: black;
         width: 40vh;
    height: 30vh;
    margin-left: 80vh;
    margin-top: 20vh;
    text-align: center;
    border: 7vh solid transparent;
    border-image: url('wavyborder.jpg') 20% round;
    max-width: 40vh;
    min-width: 40vh;
    overflow: auto;
      }
      #warningblinks {
    margin-right: 7.5vh;
    margin-left: 80vh;
    text-align: center;
    max-width: 500px;
    min-width: 500px;
    }
      
#xat {
  width: 40vh;
  color: hotpink;
    height: 25vh;
    margin-left: 10vh;
    margin-right: 50vh;
    margin-bottom: 10vh;
    float: none;
    max-width: 500px;
    min-width: 500px;
    
}
      
  #music {
    background-image: url('pattern3.png');
        color: black;
         width: 50vh;
    height: 50vh;
  margin-left: 15vh;
    margin-top: 5vh;
    text-align: center;
    border: 2.5vh solid transparent;
    border-image: url('wavyborder.jpg') 20% round;
    margin-bottom: 10vh;
   float: left;
    max-width: 500px;
    min-width: 500px;
    overflow: auto;
  }
    
    #shrineslist {
      overflow: scroll;
  background-color: peachpuff;
      color: darkcyan;
    width: 70vh;
    height: 30vh;
    margin-left: 60vh;
    margin-top: 22vh;
    text-align: center;
    border: 7vh solid transparent;
   max-width: 70vh;
    min-width: 70vh;
    }
    
    #pokemon {
      background-image: url('pokebackground.png');
      width: 70vh;
      margin-left: 45vh;
      background-repeat: no-repeat;
    }
    #beattime {
      background-color: lightblue;
      color: white;
      width: 30vh;
      max-width: 500px;
    min-width: 500px;
    }
    #luxrayinfo {
      color: white;
     font-size: 2.5em;
      margin-right: 80vh;
      text-align: center;
      float:left;
      position: relative;
    }
    #gengarinfo {
      color: white;
     font-size: 2.5em;
      margin-right: 80vh;
      text-align: center;
      float:left;
      position: relative;
    }
    #walkingwakeinfo {
      color: white;
     font-size: 2.5em;
      margin-right: 80vh;
      text-align: center;
      float:left;
      position: relative;
    }
    #pokemonlinks {
      color: white;
      font-size: 1.8em;
    }
    #altfashion {
      color: white;
    }
    
#tab1 {
  overflow: scroll;
  background-color: peachpuff;
      color: darkcyan;
    width: 70vh;
    height: 30vh;
    margin-left: 60vh;
    margin-top: 22vh;
    text-align: center;
    border: 7vh solid transparent;
   max-width: 70vh;
    min-width: 70vh;
}
#tab2 {
  overflow: scroll;
  background-color: peachpuff;
      color: darkcyan;
    width: 70vh;
    height: 30vh;
    margin-left: 60vh;
    margin-top: 22vh;
    text-align: center;
    border: 7vh solid transparent;
    max-width: 70vh;
    min-width: 70vh;
}
#tab3 {
  overflow: scroll;
  background-color: peachpuff;
      color: darkcyan;
    width: 70vh;
    height: 30vh;
    margin-left: 60vh;
    margin-top: 22vh;
    text-align: center;
    border: 7vh solid transparent;
    max-width: 70vh;
    min-width: 70vh;
}
#luxraypics {
      color: white;
     font-size: 2.5em;
      margin-right: 60vh;
      text-align: center;
      
      position: relative;
    }
    
  #gengarpics {
      color: white;
     font-size: 2.5em;
      margin-right: 60vh;
      text-align: center;
      
      position: relative;
    }
    #walkingwakepics {
      color: white;
     font-size: 2.5em;
      margin-right: 60vh;
      text-align: center;
      
      position: relative;
    }
#recentchanges {
      background-color: azure;
      color: darkcyan;
      width: 20vh;
      height: 20vh;
      margin-left: 100vh;
      margin-top: 1vh;
      border: 7vh solid transparent;
      
      border-image: url('waveborder.png') 20% round;
     
      overflow: scroll;
      min-width: 20vh;
     max-width: 20vh;
    }
    #bloglist {
      margin-left: 13vh;
      margin-top: 5vh;
      line-height:30px;
    }
    #blogging {
      margin-left: 15vh;
      margin-top: 8vh;
      line-height:30px;
    }
    #guestbook {
      background-image: url('pattern3.png');
        color: black;
         width: 50vh;
    height: 50vh;
  margin-left: 15vh;
    margin-top: 5vh;
    text-align: center;
    border: 2.5vh solid transparent;
    border-image: url('wavyborder.jpg') 20% round;
    margin-bottom: 10vh;
   float: left;
    max-width: 500px;
    min-width: 500px;
    overflow: auto;
    }
    #trinkets {  overflow: scroll;
  background-color: teal;
      color: pink;
    width: 70vh;
    height: 30vh;
    margin-left: 60vh;
    margin-top: 22vh;
    text-align: center;
    border: 7vh solid transparent;
    max-width: 70vh;
    min-width: 70vh; }
      
     #wikilinks {  overflow: scroll;
  background-color: teal;
      color: pink;
    width: 70vh;
    height: 30vh;
    margin-left: 60vh;
    margin-top: 22vh;
    text-align: center;
    border: 7vh solid transparent;
    max-width: 70vh;
    min-width: 70vh; } 

@media all {

#pokedex
	{
		width: 75vh;
		margin: 5vh auto 0 auto;
	}
#left
	{
		width: 40vh;
		height: 50vh;
		float: left;
		position: relative;
		z-index: 1;
	}

	#right
	{
		width: 35vh;
		height: 50vh;
		float: left;
		position: relative;
	}



	/* //// LEFT PART //// */

	#curve1_left
	{
		width: 201px;
		height: 85px;
		background-color: #8b0000;
		float: left;
		padding: 15px 0 0 15px;

		position: absolute;
		top: 0;
		left: 0;

		box-shadow: -10px 9px #5e0000;
		-webkit-box-shadow: -10px 9px #5e0000;
		-moz-box-shadow: -10px 9px #5e0000;
		-o-box-shadow: -10px 9px #5e0000;

		border-bottom-right-radius: 85px 60px;
		-webkit-border-bottom-right-radius: 85px 60px;
		-moz-border-bottom-right-radius: 85px 60px;
		-o-border-bottom-right-radius: 85px 60px;

		border-top-left-radius: 30px;
		-webkit-border-top-left-radius: 30px;
		-moz-border-top-left-radius: 30px;
		-o-border-top-left-radius: 30px;
	}


	#bg_curve1_left
	{
		width: 400px;
		height: 80px;
		background-color: #8b0000;

		border-top-left-radius: 30px;
		-webkit-border-top-left-radius: 30px;
		-moz-border-top-left-radius: 30px;
		-o-border-top-left-radius: 30px;
	}

	#curve2_left
	{
		width: 216px;
		height: 451px;
		background-color: #c00d0d;
		float: right;

		position: absolute;
		bottom: 0;
		right: 0;

		border-top-left-radius:85px 60px;
		-webkit-border-top-left-radius: 85px 60px;
		-moz-border-top-left-radius: 85px 60px;
		-o-border-top-left-radius: 85px 60px;
	}

	#bg_curve2_left
	{
		width: 400px;
		height: 420px;
		background-color: #c00d0d;

		box-shadow: -10px 9px #5e0000;
		-webkit-box-shadow: -10px 9px #5e0000;
		-moz-box-shadow: -10px 9px #5e0000;
		-o-box-shadow: -10px 9px #5e0000;

		border-bottom-left-radius: 30px;
		-webkit-border-bottom-left-radius: 30px;
		-moz-border-bottom-left-radius: 30px;
		-o-border-bottom-left-radius: 30px;
	}

	#buttonGlass
	{
		width: 60px;
		height: 60px;
		margin-right: 15px;
		border: 5px solid #fff;
		float: left;

		box-shadow: 0 0 10px #490000;
		-webkit-box-shadow: 0 0 10px #490000;
		-moz-box-shadow: 0 0 10px #490000;
		-o-box-shadow: 0 0 10px #490000;
		
		background: radial-gradient(#05fbfb, #29abe3);
		background: -webkit-radial-gradient(#05fbfb, #29abe3);
		background: -moz-radial-gradient(#05fbfb, #29abe3);
		background: -o-radial-gradient(#05fbfb, #29abe3);
		
		border-radius: 35px;
		-webkit-border-radius: 35px;
		-moz-border-radius: 35px;
	   	-o-border-radius: 35px;
	}

	#reflect
	{
		width: 30px;
		height: 18px;
		margin: 3px 0 0 15px;
		background: #fff;
		opacity: 0.6;

		border-radius: 15px 9px;
		-webkit-border-radius: 15px 9px;
		-moz-border-radius: 15px 9px;
	   	-o-border-radius: 15px 9px;
		        
	}

	#miniButtonGlass1
	{
		width: 20px;
		height: 20px;
		margin-right: 10px;
		float: left;

		box-shadow: 0 0 10px #490000;
		-webkit-box-shadow: 0 0 10px #490000;
		-moz-box-shadow: 0 0 10px #490000;
		-o-box-shadow: 0 0 10px #490000;

		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-o-border-radius: 20px;
		
		background: radial-gradient(#fb7b7b, #fb0505);
		background: -webkit-radial-gradient(#fb7b7b, #fb0505);
		background: -moz-radial-gradient(#fb7b7b, #fb0505);
		background: -o-radial-gradient(#fb7b7b, #fb0505);
	}

	#miniButtonGlass2
	{
		width: 20px;
		height: 20px;
		margin-right: 10px;
		float: left;

		box-shadow: 0 0 10px #490000;
		-webkit-box-shadow: 0 0 10px #490000;
		-moz-box-shadow: 0 0 10px #490000;
		-o-box-shadow: 0 0 10px #490000;

		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-o-border-radius: 20px;
		
		background: radial-gradient(#fbfb9b, #fbfb05);
		background: -webkit-radial-gradient(#fbfb9b, #fbfb05);
		background: -moz-radial-gradient(#fbfb9b, #fbfb05);
		background: -o-radial-gradient(#fbfb9b, #fbfb05);
	}

	#miniButtonGlass3
	{
		width: 20px;
		height: 20px;
		margin-right: 10px;
		float: left;

		box-shadow: 0 0 10px #490000;
		-webkit-box-shadow: 0 0 10px #490000;
		-moz-box-shadow: 0 0 10px #490000;
		-o-box-shadow: 0 0 10px #490000;

		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-o-border-radius: 20px;
		
		background: radial-gradient(#b0fb7b, #50fb05);
		background: -webkit-radial-gradient(#b0fb7b, #50fb05);
		background: -moz-radial-gradient(#b0fb7b, #50fb05);
		background: -o-radial-gradient(#b0fb7b, #50fb05);
	}

	#junction
	{
		width: 60px;
		height: 451px;
		float: right;
		
		background: linear-gradient(left, #8b0000 0%, #c00d0d 50%, #8b0000 100%);	
		background: -webkit-linear-gradient(left, #8b0000 0%, #c00d0d 50%, #8b0000 100%);
		background: -moz-linear-gradient(left, #8b0000 0%, #c00d0d 50%, #8b0000 100%);
		background: -o-linear-gradient(left, #8b0000 0%, #c00d0d 50%, #8b0000 100%);
	}

	#junction1
	{
		height: 40px;
		background-color: #5e0000;
		opacity: 0.3;
		margin-top: 50px;
		margin-bottom: 262px;

		border-top: 2px solid #330000;
		border-bottom: 2px solid #330000;
	}

	#junction2
	{
		height: 40px;
		background-color: #5e0000;
		opacity: 0.3;

		border-top: 2px solid #330000;
		border-bottom: 2px solid #330000;
	}

	#screen
	{
		height: 245px;
		width: 260px;
		padding: 0 20px;
		background-color: #b0b0b0;
		float:left;

		position: absolute;
		top: 130px;
		left: 19px;

		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-o-border-radius: 15px;
	}

	#screen:after
	{
		content: "";
		border-top: 40px solid #b0b0b0;
		border-left: 40px solid #c00d0d;
		height: 0;

		position: absolute;
		bottom: 0;
		left: 0;
	}

	#picture
	{
		height: 175px;
		width: 254px;
		margin-top: 20px;
		margin-bottom: 9px;
		background-color: #fff;
		border: 3px solid #494949;
		clear: both;

		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-o-border-radius: 15px;
	}

	#picture img
	{
		display: block;
		margin: 0 auto;
	}

	#topPicture
	{
		margin: 6px auto;
		width: 40px;
	}

	#buttontopPicture1, #buttontopPicture2
	{
		height: 8px;
		width: 8px;
		background-color: #c00d0d;
		border: 1px solid #000;
		float: left;

		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-o-border-radius: 15px;
	}

	#buttontopPicture1
	{
		margin-right: 20px;
	}

	#buttonbottomPicture
	{
		height: 26px;
		width: 26px;
		background-color: #c00d0d;
		margin-left: 35px;
		float: left;

		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-o-border-radius: 30px;

		box-shadow: -2px 1px #5e0000;
		-webkit-box-shadow: -2px 1px #5e0000;
		-moz-box-shadow: -2px 1px #5e0000;
		-o-box-shadow: -2px 1px #5e0000;

		background: linear-gradient(top, #c00d0d 0%, #8b0000 80%);	
		background: -webkit-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
		background: -moz-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
		background: -o-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
	}

	#speakers
	{
		float: right;
		width: 75px;
		height: 25px;
		margin-right: 20px;
	}

	.sp
	{
		height: 3px;
		margin-bottom: 5px;
		background-color: #494949;

		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-o-border-radius: 30px;
	}

	#bigbluebutton
	{
		height: 50px;
		width: 50px;
		background-color: #000;

		position: absolute;
		top: 395px;
		left: 30px;

		border-radius: 100px;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		-o-border-radius: 100px;

		background: linear-gradient(top, #307bfb 0%, #0530e5 80%);	
		background: -webkit-linear-gradient(top, #307bfb 0%, #0530e5 80%);
		background: -moz-linear-gradient(top, #307bfb 0%, #0530e5 80%);
		background: -o-linear-gradient(top, #307bfb 0%, #0530e5 80%);

		box-shadow: -3px 2px #001c91;
		-webkit-box-shadow: -3px 2px #001c91;
		-moz-box-shadow: -3px 2px #001c91;
		-o-box-shadow: -3px 2px #001c91;
	}

	#barbutton1
	{
		height: 13px;
		width: 50px;

		position: absolute;
		top: 405px;
		left: 100px;

		border-radius: 100px;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		-o-border-radius: 100px;

		background: linear-gradient(top, #50fb05 0%, #057b05 100%);	
		background: -webkit-linear-gradient(top, #50fb05 0%, #057b05 100%);
		background: -moz-linear-gradient(top, #50fb05 0%, #057b05 100%);
		background: -o-linear-gradient(top, #50fb05 0%, #057b05 100%);

		box-shadow: -1px 2px #004200;
		-webkit-box-shadow: -1px 2px #004200;
		-moz-box-shadow: -1px 2px #004200;
		-o-box-shadow: -1px 2px #004200;
	}

	#barbutton2
	{
		height: 13px;
		width: 50px;

		position: absolute;
		top: 405px;
		left: 165px;

		border-radius: 100px;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		-o-border-radius: 100px;

		background: linear-gradient(top, #fb6505 0%, #bb0505 100%);	
		background: -webkit-linear-gradient(top, #fb6505 0%, #bb0505 100%);
		background: -moz-linear-gradient(top, #fb6505 0%, #bb0505 100%);
		background: -o-linear-gradient(top, #fb6505 0%, #bb0505 100%);

		box-shadow: -1px 2px #7b0000;
		-webkit-box-shadow: -1px 2px #7b0000;
		-moz-box-shadow: -1px 2px #7b0000;
		-o-box-shadow: -1px 2px #7b0000;
	}

	#cross
	{
		width: 90px;
		height: 90px;

		position: absolute;
		top: 394px;
		left: 230px;
	}

	#topcross
	{
		width: 30px;
		height: 30px;
		background-color: #222;

		position: absolute;
		top: 0;
		left: 30px;

		box-shadow: -3px 2px #010101;
		-webkit-box-shadow: -3px 2px #010101;
		-moz-box-shadow: -3px 2px #010101;
		-o-box-shadow: -3px 2px #010101;

		border-top-left-radius: 5px;
		-webkit-border-top-left-radius: 5px;
		-moz-border-top-left-radius: 5px;
		-o-border-top-left-radius: 5px;

		border-top-right-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-top-right-radius: 5px;
		-o-border-top-right-radius: 5px;
	}

	#leftcross
	{
		width: 30px;
		height: 30px;
		background-color: #222;
		z-index: 1;

		position: absolute;
		left: 0;
		top: 30px;

		box-shadow: -3px 2px #010101;
		-webkit-box-shadow: -3px 2px #010101;
		-moz-box-shadow: -3px 2px #010101;
		-o-box-shadow: -3px 2px #010101;

		border-top-left-radius: 5px;
		-webkit-border-top-left-radius: 5px;
		-moz-border-top-left-radius: 5px;
		-o-border-top-left-radius: 5px;

		border-bottom-left-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-bottom-left-radius: 5px;
		-o-border-bottom-left-radius: 5px;
	}

	#midcross
	{
		width: 30px;
		height: 30px;
		background-color: #222;

		position: absolute;
		top: 30px;
		left: 30px;

		box-shadow: -3px 2px #010101;
		-webkit-box-shadow: -3px 2px #010101;
		-moz-box-shadow: -3px 2px #010101;
		-o-box-shadow: -3px 2px #010101;
	}

	#rightcross
	{
		width: 30px;
		height: 30px;
		background-color: #222;

		position: absolute;
		top: 30px;
		right: 0;

		box-shadow: -3px 2px #010101;
		-webkit-box-shadow: -3px 2px #010101;
		-moz-box-shadow: -3px 2px #010101;
		-o-box-shadow: -3px 2px #010101;

		border-top-right-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-top-right-radius: 5px;
		-o-border-top-right-radius: 5px;

		border-bottom-right-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		-moz-border-bottom-right-radius: 5px;
		-o-border-bottom-right-radius: 5px;
	}

	#botcross
	{
		width: 30px;
		height: 30px;
		background-color: #222;

		position: absolute;
		bottom: 0;
		left: 30px;

		box-shadow: -3px 2px #010101;
		-webkit-box-shadow: -3px 2px #010101;
		-moz-box-shadow: -3px 2px #010101;
		-o-box-shadow: -3px 2px #010101;

		border-bottom-left-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-bottom-left-radius: 5px;
		-o-border-bottom-left-radius: 5px;

		border-bottom-right-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		-moz-border-bottom-right-radius: 5px;
		-o-border-bottom-right-radius: 5px;
	}

	#upT
	{
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #111;

		position: absolute;
		top: 5px;
		left: 4px;
	}

	#downT
	{
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #111;

		position: absolute;
		bottom: 5px;
		left: 4px;
	}

	#leftT
	{
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-right: 10px solid #111;
		border-bottom: 10px solid transparent;

		position: absolute;
		top: 5px;
		left: 4px;
	}

	#rightT
	{
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-left: 10px solid #111;
		border-bottom: 10px solid transparent;

		position: absolute;
		top: 5px;
		right: 5px;
	}

	#midCircle
	{
		width: 20px;
		height: 20px;

		position: absolute;
		top: 5px;
		left: 4px;

		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-o-border-radius: 30px;

		background: radial-gradient(#111, #222);
		background: -webkit-radial-gradient(#111, #222);
		background: -moz-radial-gradient(#111, #222);
		background: -o-radial-gradient(#111, #222);
	} 



	/* //// RIGHT PART //// */

	#curve1_right
	{
		width: 166px;
		height: 451px;
		background-color: #c00d0d;
		float: right;

		position: absolute;
		bottom: 0;
		left: 0;

		border-top-right-radius:85px 60px;
		-webkit-border-right-left-radius: 85px 60px;
		-moz-border-right-left-radius: 85px 60px;
		-o-border-right-left-radius: 85px 60px;
	}


	#bg_curve1_right
	{
		width: 350px;
		height: 80px;
		background-color: #fff;

		border-top-right-radius: 30px;
		-webkit-border-top-right-radius: 30px;
		-moz-border-top-right-radius: 30px;
		-o-border-top-right-radius: 30px;
	}

	#curve2_right
	{
		width: 216px;
		height: 100px;
		background-color: #fff;
		float: left;

		position: absolute;
		top: 0;
		right: 0;

		border-bottom-left-radius: 85px 60px;
		-webkit-border-bottom-left-radius: 85px 60px;
		-moz-border-bottom-left-radius: 85px 60px;
		-o-border-bottom-left-radius: 85px 60px;
	}

	#bg_curve2_right
	{
		width: 350px;
		height: 420px;
		background-color: #c00d0d;

		border-bottom-right-radius: 30px;
		-webkit-border-bottom-right-radius: 30px;
		-moz-border-bottom-right-radius: 30px;
		-o-border-bottom-right-radius: 30px;

		box-shadow: -10px 9px #5e0000;
		-webkit-box-shadow: -10px 9px #5e0000;
		-moz-box-shadow: -10px 9px #5e0000;
		-o-box-shadow: -10px 9px #5e0000;
	}

	#stats
	{
		height: 130px;
		width: 280px;
		padding: 10px;
		background-color: #30da0c;
		z-index: 1;
		font-size: 13px;
		font-family: arial, sans-serif;

		position: absolute;
		top: 130px;
		left: 25px;

		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-o-border-radius: 15px;

		box-shadow: 0 0 20px #003300 inset;
		-webkit-box-shadow: 0 0 20px #003300 inset;
		-moz-box-shadow: 0 0 20px #003300 inset;
		-o-box-shadow: 0 0 20px #003300 inset;
	}

	#blueButtons1
	{
		z-index: 1;

		position: absolute;
		top: 295px;
		left: 49px;
	}

	#blueButtons2
	{
		z-index: 1;

		position: absolute;
		top: 335px;
		left: 49px;
	}

	.blueButton
	{
		height: 35px;
		width : 45px;
		background-color: #003300;
		float: left;
		margin-right: 7px;

		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-o-border-radius: 10px;

		background: linear-gradient(top, #307bfb 0%, #0530e5 80%);	
		background: -webkit-linear-gradient(top, #307bfb 0%, #0530e5 80%);
		background: -moz-linear-gradient(top, #307bfb 0%, #0530e5 80%);
		background: -o-linear-gradient(top, #307bfb 0%, #0530e5 80%);

		box-shadow: -1px 2px #001c91;
		-webkit-box-shadow: -1px 2px #001c91;
		-moz-box-shadow: -1px 2px #001c91;
		-o-box-shadow: -1px 2px #001c91;
	}

	#barbutton3
	{
		height: 13px;
		width: 50px;
		z-index: 1;

		position: absolute;
		top: 385px;
		left: 210px;

		border-radius: 100px;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		-o-border-radius: 100px;

		background: linear-gradient(top, #50fb05 0%, #057b05 100%);	
		background: -webkit-linear-gradient(top, #50fb05 0%, #057b05 100%);
		background: -moz-linear-gradient(top, #50fb05 0%, #057b05 100%);
		background: -o-linear-gradient(top, #50fb05 0%, #057b05 100%);

		box-shadow: -1px 2px #004200;
		-webkit-box-shadow: -1px 2px #004200;
		-moz-box-shadow: -1px 2px #004200;
		-o-box-shadow: -1px 2px #004200;
	}

	#barbutton4
	{
		height: 13px;
		width: 50px;
		z-index: 1;

		position: absolute;
		top: 385px;
		left: 270px;

		border-radius: 100px;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		-o-border-radius: 100px;

		background: linear-gradient(top, #fb6505 0%, #bb0505 100%);	
		background: -webkit-linear-gradient(top, #fb6505 0%, #bb0505 100%);
		background: -moz-linear-gradient(top, #fb6505 0%, #bb0505 100%);
		background: -o-linear-gradient(top, #fb6505 0%, #bb0505 100%);

		box-shadow: -1px 2px #7b0000;
		-webkit-box-shadow: -1px 2px #7b0000;
		-moz-box-shadow: -1px 2px #7b0000;
		-o-box-shadow: -1px 2px #7b0000;
	}

	#miniButtonGlass4
	{
		width: 15px;
		height: 15px;
		float: left;
		z-index: 1;

		position: absolute;
		top: 383px;
		left: 25px;

		box-shadow: 0 0 10px #490000;
		-webkit-box-shadow: 0 0 10px #490000;
		-moz-box-shadow: 0 0 10px #490000;
		-o-box-shadow: 0 0 10px #490000;

		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-o-border-radius: 20px;
		
		background: radial-gradient(#ff9b5b, #fb6505);
		background: -webkit-radial-gradient(#ff9b5b, #fb6505);
		background: -moz-radial-gradient(#ff9b5b, #fb6505);
		background: -o-radial-gradient(#ff9b5b, #fb6505);
	}

	#miniButtonGlass5
	{
		width: 15px;
		height: 15px;
		float: left;
		z-index: 1;

		position: absolute;
		top: 383px;
		left: 51px;

		box-shadow: 0 0 10px #490000;
		-webkit-box-shadow: 0 0 10px #490000;
		-moz-box-shadow: 0 0 10px #490000;
		-o-box-shadow: 0 0 10px #490000;

		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-o-border-radius: 20px;
		
		background: radial-gradient(#0abd0a, #057b05);
		background: -webkit-radial-gradient(#0abd0a, #057b05);
		background: -moz-radial-gradient(#0abd0a, #057b05);
		background: -o-radial-gradient(#0abd0a, #057b05);
	}

	#yellowBox1
	{
		width: 140px;
		height: 70px;
		z-index: 1;
		background-color: #ffff00;

		position: absolute;
		top: 415px;
		left: 25px;

		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-o-border-radius: 15px;

		box-shadow: 0 0 20px #ff6600 inset;
		-webkit-box-shadow: 0 0 20px #ff6600 inset;
		-moz-box-shadow: 0 0 20px #ff6600 inset;
		-o-box-shadow: 0 0 20px #ff6600 inset;
	}

	#yellowBox2
	{
		width: 140px;
		height: 70px;
		z-index: 1;
		background-color: #ffff00;

		position: absolute;
		top: 415px;
		left: 185px;

		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-o-border-radius: 15px;

		box-shadow: 0 0 20px #ff6600 inset;
		-webkit-box-shadow: 0 0 20px #ff6600 inset;
		-moz-box-shadow: 0 0 20px #ff6600 inset;
		-o-box-shadow: 0 0 20px #ff6600 inset;
	}

}

@media handheld and (orientation:portrait), (max-width:768px) {

	#pokedex
	{
		width: 400px;
	}

	#logo
	{
		width: 281px;
		height: 99px;
		background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/200653/logo.png') no-repeat left top;
		z-index: 1;

		position: absolute;
		top: 220px;
		left: 30px;
	}

	#left
	{
		width: 400px;
		height: 500px;
		float: left;
		position: relative;
		z-index: 1;
		margin: 0 auto;
	}

	#curve1_left
	{
		width: 201px;
		height: 85px;
		background-color: #8b0000;
		float: left;
		padding: 15px 0 0 15px;

		position: absolute;
		top: 0;
		left: 0;

		box-shadow: 0 0 #5e0000;
		-webkit-box-shadow: 0 0 #5e0000;
		-moz-box-shadow: 0 0 #5e0000;
		-o-box-shadow: 0 0 #5e0000;

		border-bottom-right-radius: 85px 60px;
		-webkit-border-bottom-right-radius: 85px 60px;
		-moz-border-bottom-right-radius: 85px 60px;
		-o-border-bottom-right-radius: 85px 60px;

		border-top-left-radius: 30px;
		-webkit-border-top-left-radius: 30px;
		-moz-border-top-left-radius: 30px;
		-o-border-top-left-radius: 30px;
	}

	#bg_curve1_left
	{
		width: 400px;
		height: 80px;
		background-color: #8b0000;

		box-shadow: -10px 9px #5e0000;
		-webkit-box-shadow: -10px 9px #5e0000;
		-moz-box-shadow: -10px 9px #5e0000;
		-o-box-shadow: -10px 9px #5e0000;

		border-top-left-radius: 30px;
		-webkit-border-top-left-radius: 30px;
		-moz-border-top-left-radius: 30px;
		-o-border-top-left-radius: 30px;
	}

	#right, #screen, #bigbluebutton, #barbutton1, #barbutton2, #cross
	{
		display: none;
	}

}
    
    
    
    
    
    
    
    
    
    
    
    
      .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.10626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.10626;
  }
  30% {
  opacity: 0.18128;
  }
  35% {
  opacity: 0.23604;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
}
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/sports/spo-8/spo718.cur), auto !important;} /* End https://www.cursors-4u.com */