@charset "utf-8";
/* CSS Document */

html{
background-color:rgb(0, 0, 0);
}

button{
cursor:pointer;
user-select:none;
}
form{
user-select:none;
}

iframe{
	user-select:none;
}

p{
cursor:default;
user-select:none;
}

#guideText{
position:absolute;
top:400px;
font-size:20px;
color:white;
height:420px;
width:1000px;
overflow:auto;
}

img.icon{
user-select:none;
transiton:opacity 2s;
cursor:crosshair;
}
.icon:hover{opacity:0.5}

div.home{
background-color:rgb(25, 25, 25);
height:100px;
width:1320px;
position:sticky;
top:530px;
left:10px;
border:10px solid;
border-radius:20px;
border-color:rgb(35, 35, 35);
}

div.homeselector{
background-color:rgb(17, 17, 17);
height:60px;
width:220px;
border:2px solid;
border-radius:5px;
border-color:rgb(35, 35, 35);
transition:height width 0.5s;
cursor:pointer;
}.homeselector:hover{height:70px;width:240px;}

div.infopanel{
background-color:rgb(25, 25, 25);
position:absolute;
top:680px;
left:700px;
height:300px;
width:600px;
border:10px solid;
border-radius:20px;
border-color:rgb(35, 35, 35);
}

div.color{
position:absolute;
height:50px;
width:100px;
transition:height width 0.5s;
border:0.5px solid;
border-radius:100px;
border-color:transparent;
cursor:pointer;
}.color:hover{height:60px;width:110px;}

section.menuselector{
background-color:rgb(99, 99, 99);
height:150px;
width:200px;
padding:10px;
border:10px solid;
border-radius:20px;
border-color:rgb(35, 35, 35);
transition:border-color 0.5s,width 0.5s,height 0.5s;
}.menuselector:hover{border-color:red;height:160px;width:210px;}

svg.svg{
position:absolute;
top:680px;
left:10px;
background-color:transparent;
}

summary{
user-select:none;
}

iframe.guide{
position:absolute;
height:200px;
width:250px;
resize:both;
overflow:auto;
border:5px solid transparent;
transition:border-color 2s,height width 2s;
}.guide:hover{height:220px;width:270px;border-color:red;}
	
footer{
position:absolute;
top:2000px;
left:20px;
width:1300px;
height:200px;
border-width:5px;
border-radius:10px;
border-style:dashed;
border-color:black;
background-color:rgb(51, 51, 51);
}

div.animationbox{
background-color:white;
position:absolute;
top:5px;
left:10px;
width:10px;
height:10px;
border:5px solid black;
border-radius:50px;
animation:move 10s infinite;
}
@keyframes move{
 0%   {top: 5px;left:10px;background-color:white;border-color:black;}
 16%  {top: 5px;left:650px;background-color:black;border-color:white;}
 32%  {top: 5px;left:1275px;background-color:white;border-color:black;}
 48%  {top: 170px;left:1275px;background-color:black;border-color:white;}
 64%  {top: 170px;left:650px;background-color:white;border-color:black;}
 80%  {top: 170px;left:10px;background-color:black;border-color:white;}
}

a.openNewTab{
color:white;
position:absolute;
top:30px;
left:500px;
text-decoration:none;
font-size:30px;
transition:color 0.1s;
}.openNewTab:hover{color:green;}

select{
	cursor:pointer;
}

input.activateinput{
      cursor:pointer;
      position:absolute;
      top:270px;
      left:410px;
      color:white;
      border-color:transparent;
      background-color:transparent;
      font-weight:bold;
      font-size:40px;
      transition:color 0.1s;
}.activateinput:hover{color:red;}

img.spidey{
    position:absolute;
    top:400px;
    height:300px;
    width:350px;
    border:5px solid black;
}

#refresh{
    user-select:none;
    position:absolute;
    top:120px;
    left:600px;
    width:250px;
    height:250px;
    cursor:pointer;
    transition: border 0.5;
}#refresh:hover{border:5px solid green;}

#spideyVideo{
    position:absolute;
    top:0px;
    left:5px;
    width:250px;
    height:250px;
}

#BoxBackGround{
	display:none;
	background-color:rgb(214, 8, 8);
	position:fixed;
	top:0px;
	left:0px;
	opacity:0.7;
	width:0px;
	height:0px;
	
}
#Box{
	display:none;
	position:fixed;
	top:10px;
    background: url("https://media.giphy.com/media/3o7qDNfxtNRtLVv8qs/giphy.gif");
	background-color:black;
    background-repeat: no-repeat;
	background-size: 600px 200px;
	width:600px;
	height:200px;
	border: 5px solid black;
	border-radius:20px;
}

#times{
	position:absolute;
	color:white;
	top:0px;
	left:550px;
    font-weight: bold;
	font-size:40px;
    cursor:pointer;
	transition: color 0.5s;
	user-select:none;
}#times:hover{color:red;}

#BoxText{
	position:absolute;
	top:150px;
	left:300px;
	color:white;
	font-size:25px;
	user-select:none;
	cursor:default;
}

li.colorfulLi{
	user-select:none;
	transition:color 0.1s ;
}.colorfulLi:hover{color:green;}

a{
	user-select:none;
}

#StartInputText{
    position:absolute;
	top:90px;
	left:30px;
    color:white;
    border-color:transparent;
    background-color:transparent;
    font-weight:bold;
    font-size:20px;

}

#StopInputText{
	position:absolute;
	top:90px;
	left:130px;
    color:white;
    border-color:transparent;
    background-color:transparent;
    font-weight:bold;
    font-size:20px;

}