/*style.css*/
body {
    font-family: Courier New;
    padding: 20px;
    text-align: center;
}
h1, h2 {
    justify-content: center;
}
input, button {
    margin: 5px;
}
button {
	transition: all 0.2s ease;
}
button:hover{
	cursor: pointer;
	filter: brightness(1.1);
	transform: scale(1.05);
}
.section {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 15px auto;
    max-width: 600px;
}
.box-section {
	border: 2px solid #840505;
	padding: 10px;
	margin: 15px auto;
	max-width: 600px;
}
.box-section .itemIcon {
	font-size: 65px;
}
#cashTotal {
	font-size: 60px;
}
#cardTotal {
	font-size: 60px;
}
#qrTotal {
	font-size: 60px;
}
h3 {
    margin-bottom: 5px;
}
ul {
    max-height: 200px;
    overflow: auto;
    text-align: left;
}

.done {
    text-decoration: line-through;
    color: gray;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }
input[type=number] { -moz-appearance:textfield; }
input[type="number"] {
	width: 50px;
	text-align: center;
}

#deleteMoney:hover {
    background-color: red;
    color: white;
}
#deleteAllNotes:hover {
	background-color: red;
    color: white;
}

#newTurn:hover {
	background-color: blue;
    color: white;
}

/*	====	MODO OSCURO	====	*/

body.dark {
	background-color: #121212;
	color: #f1f1f1;
}

body.dark input,
body.dark select,
body.dark button {
	background-color: #1e1e1e;
	color: white;
	border: 1px solid #444;
}
body.dark button:hover{
	background-color: #333;
	color: #fff;
	border-color: #888;
}
body.dark .section,
body.dark .box-section {
	background-color: #1a1a1a;
}


/*	====	MODO ARAÑA	====	*/

body.spider-mode{
	background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("./spidermode/img/spider.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    text-shadow: 1px 1px 0 black;
    font-family: "Bangers", cursive;
    font-size:18px;
}
body.spider-mode h1{
	color:#ff0000;
}
body.spider-mode h1,
body.spider-mode h2,
body.spider-mode h3{
	font-size:1.5em;
	text-shadow: 2px 2px 0 black, 0 0 8px red;
}
/* secciones */

body.spider-mode .section{
    background: rgba(0,0,0,0.75);
    border: 2px solid red;
    box-shadow: 0 0 10px red;
}

/* botones */
#spiderButton{
	font-size:18px;
	background:#cc0000;
	border:2px solid black;
}
body.spider-mode button{
    background:#b30000;
    color: white;
    border: 2px solid black;
    box-shadow: inset 0 0 8px rgba(255,255,255,0.3), 0 0 6px rgba(0,0,0,0.8);
    font-weight: bold;
    font-size:16px;
}

body.spider-mode button:hover{
    background: #000;
    color: red;
}

/* inputs */

body.spider-mode input,
body.spider-mode select{
    background: #111;
    color: white;
    border: 1px solid red;
}

body.spider-mode button{
    background: radial-gradient(circle at center, transparent 30%, rgba(255,255,255,0.15) 31%), radial-gradient(circle at center, transparent 60%, rgba(255,255,255,0.15) 61%);
    background-color:#b30000;
    color:white;
    border:2px solid black;
}
/*	CURSORS:	*/

body.spider-mode{
	cursor: url("./spidermode/cursors/normal.cur"), auto;
}
body.spider-mode button:hover{
	cursor: url("./spidermode/cursors/link.cur"), pointer;
}
body.spider-mode input{
	cursor: url("./spidermode/cursors/texto.cur"), text;
}
body.spider-mode select{
	cursor: url("./spidermode/cursors/method.cur"), auto;
}

/*SPIDER ANIMATIONS*/
body.spider-mode .spider-drop{
    display:block;
}
.spider-drop{
    position:fixed;
    top:0;
    left:15%;
    transform:translateX(-50%);
    pointer-events:none;
    display:none;
}
.spider-line{
    width:2px;
    height:140px;
    background:white;
    margin:auto;
    
    animation:spiderLineMove 4s ease-in-out infinite;
}
.spider{

    font-size:28px;
	
    text-align:center;
	
    animation:spiderMove 4s ease-in-out infinite;
    
    
}
.click-web{

    position:fixed;

    width:60px;
    height:60px;

    pointer-events:none;

    transform:translate(-50%,-50%);

    background:
        repeating-radial-gradient(
            circle,
            rgba(255,255,255,0.7) 0px,
            rgba(255,255,255,0.7) 2px,
            transparent 2px,
            transparent 10px
        ),
        repeating-conic-gradient(
            rgba(255,255,255,0.7) 0deg 2deg,
            transparent 2deg 15deg
        );

    border-radius:50%;

    animation:webFade 1s forwards;

}
@keyframes webFade{

    from{
        transform:translate(-50%,-50%) scale(0.2);
        opacity:1;
    }

    to{
        transform:translate(-50%,-50%) scale(1.2);
        opacity:0;
    }

}

@keyframes spiderLineMove{
	0%{
		height:0;
	}
	
	40%{
		height:140px;
	}
	60%{
		height:140px;
	}
	100%{
		height:0;
	}
}
@keyframes spiderMove{
	0%{
		transform:translateY(0);
	}
	40%{
		transform:translateY(140px);
	}
	60%{
		transform:translateY(140px);
	}
	100%{
		transform:translateY(0);
	}
}
/*	===	RESPONSIVE ===	*/
@media (max-width: 600px) {
	input, select, button {
	width: 100%;
	margin-top: 5px;
	}
}