@charset "utf8";
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

:root {
	--main:         #637280;
	--main-dark:    #600;
	--main-light:   #f44;
	
	--form:         #000000;
	
	--loyal:        #ffdd00;
	--dark-loyal:   #a50;
	
	--contrast:     #2A2A2A;
	--low-contrast: #cc3;
	
	--footer-height: 80px;
/* 	#FF0000,#FFDD00,#2A2A2A,#000000,#FFFFFF */
}

* {
	font-family: 'Fredericka the Great', monospace;
}


body {
	margin:0;
	padding:0;
	height: 100%;
}

header, footer {
	background: var(--main);
	color: white;
}

h1 {
	font-variant: small-caps;
	text-align: center;
	font-weight: 500;
	color: white;
}

nav li {
	color: main(--form);
}

nav > img {
	filter: invert();
}

nav > ul {
	background-color: whitesmoke;
	border-left: 1px solid black;
}

nav > ul > li {

	color: black;
}

nav > ul a:hover {
	background: var(--contrast);
	color: white;
	}

nav > ul > li a:hover img {
	filter: invert(100%);
}

nav a {
	color: black;
}

#wrapper {
	display: flex;
  flex-wrap: wrap;
	margin-bottom: calc(var(--footer-height) + 20px);
}


#explicacion p{
		font-family: "times new roman";
		font-size: 12pt;
	  color: #555;
}


#bb{
	text-align: center;
	border: 5px solid var(--loyal);
	background: whitesmoke;
	font-size: 20pt;
	word-spacing: 0.6;
}



.unidad {color: var(--main-dark);} 
.decena {color: var(--form);}

#lista {margin: 10px; text-align: center;}
#lista span {margin-right: 10px;}

#pobjetivo {
	font-size: 80pt;
	color:var(--main);
	text-align: center; 
	padding: 0; margin: 0;
}

input {
  border: none;
	background: var(--loyal);
	color: var(--form);
	cursor: pointer;
	font-size:  16pt;
	transition: background-color 200ms;
}

#segundos {
	text-decoration: none;
	text-align: center;  
	color: black;
	padding: 12px 0;
}

input:active {
	background-color: var(--dark-loyal);
}

.blink {
	background: red;
}

.izq {
	border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.dcha {
	border-left: 1px dashed var(--main);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}


footer {
	position: fixed;
	box-sizing: border-box;
	bottom: 0;
	width: 100%;
	height: var(--footer-height);
	padding-top: 10px;
}

footer p a {
	text-decoration: none;
	color: white;
}



/**************************************************
*
*
* CAMBIO DE MEDIA
*
*
***************************************************/

@media screen and (max-width:599px){
	#wrapper {
		flex-direction: column;
	}
	
	#margen {
	display: flex;
	flex-basis: 100px;
	flex-direction: row;
	justify-content: space-between;
	margin: 10px 0;
	flex-wrap: wrap;
}


	#margen > div:first-child {
		flex: 0 0 100%;
		display: flex;
		margin-bottom: 5px;
		flex-direction: row;
	}

	#margen > div:first-child > * {
		flex: 0 0 50%;
	}
	
	#margen > *:nth-child(2) {
		flex:0 1 50%;
		margin-top: 5px;
		border-right: 1px dashed var(--dark-loyal);
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	#margen > *:nth-child(3) {
		margin-top: 5px;
		flex:0 1 50%;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	input {
		font-size: 14pt;
		}


	#pobjetivo {
		font-size: 28vw;
	}
}

















/**************************************************
*
*
* CAMBIO DE PANTALLA ANCHA
*
*
***************************************************/
	
@media screen and (min-width: 600px) {
	wrapper {
		justify-content: space-between;
	}
	#margen {
		flex: 1 1 33%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

 }


	#margen > * {
		flex: 1 1 30%;
	}

	#margen > div:first-child {
		display: flex;
		flex-direction: row;
	}

	#margen > div:first-child > * {
		flex: 0 0 50%;
	}
	
	#margen > *:nth-child(n+2){
		border-top: 1px dashed var(--dark-loyal);
	}
	#bb {
		border-left: none;
	}
	
  #juego {
		flex: 0 1 63%;
	}
	
}