/* CSS BY MIKE@CROSSWAY.NL 2023 */

/* ============================== MAIN */
body {
		background:#262628;
		color:#dfdfdf;
		font-family: "Gill Sans", "Helvetica", "Arial", "Sans-Serif";
		font-size:1.3rem;
}

nav 	{grid-area:nav}
article {grid-area:article;}
footer 	{grid-area:footer;}

main {
		display:grid;
		min-height:100vh;
		grid-template-areas:"nav"
							"article"
							"footer";
		grid-template-rows:	60px 1fr 100px;
		grid-template-columns:	95vw;
}




h1, h3, h5 {
	text-align:center;
}

h3 {
	font-weight: 100 !important;
	margin-bottom:-10px;
}


p {
	padding:40px;
}

span.nobr { white-space: nowrap; }
span.pipe { color:#888; }


/* ============================== MENU */
#menuToggle {
  display: block;
  position: relative;
  top: 50px;
  margin-left:50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}



#menuToggle a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}


#menuToggle a:hover {
  color:#333;
}


#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* Verberg de input */
  z-index: 2; /* plaats hem over de hamburger */
  -webkit-touch-callout: none;
}

/* Maak van de 3 span's een hamburger */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd; /* hamburger kleur */  
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* Verander de hamburger in een kruis */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/* Maar verberg de middelste streep van de hamburger */
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/* Roteer de laatste de andere kant op */
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/* Plaats het menu links bovenin */
#menu {
  position: absolute;
  width: 360px;
  margin: -100px 0 0 -60px;
  padding: 0 0 0 10px;
  padding-top: 125px;
  background: #666;
  
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  border-right:1px solid #000;
  border-bottom:1px solid #000;
}

#menu li {
  padding: 5px 0px 0px 15px;
  font-size: 1.2em !important;
  font-weight: 900;
  margin-top:20px;
}

#menu li a {
	  font-weight: 500 !important;
}



/* Laat het van links in glijden */
#menuToggle input:checked ~ ul {
 transform: none;
}


@media screen and (max-width:400px)     {
	#menuToggle {
	  top: 50px;
	  margin-left:50px;
      }
  }

/* ============================== GRAFIEK */

img#grafiek {
	margin-bottom:15vh;
	width:100%;
}


/* ============================== LAYOUT STATICS TABELLEN */

div#wrapper, div#distance {
	display:flex;
	justify-content:space-around;
	width:1000px;
	margin:50px auto;
}

div.blok1, div.blok2 {
	width:300px;
}

@media only screen and (max-width: 1024px), (min-device-width: 320px) and (max-device-width: 1024px)  {
		div#wrapper, div#distance {
			flex-direction:column;
			width: 100%;	
		}
		div.blok1, div.blok2 {
			margin:10px;
			align-self:center;
			width:100%;
		}
		div#distance {
			width:100%;
		}
		div#distance form {
			align-self:center;
		}
		
}




/* ============================== STATICS TABEL */


table.statics {
		border:1px solid #fff;
		width:95%;
		border-collapse: collapse;
		margin-right:auto;
		margin-left:auto; 
}
table.statics tr:nth-of-type(odd) { 
		background: #222; 
}
table.statics th { 
		background: #555; 
		color: #fff; 
		font-weight: bold; 
}
table.statics td, th { 
		padding: 6px; 
		text-align: center; 
}

/* ============================== GAMES TABEL */

table.scores {
		border:1px solid #fff;
		width:1000px;
		min-width:1000px;
		border-collapse: collapse;
		margin-left:auto;
		margin-right:auto; 
}

table.scores tr:nth-of-type(odd) { 
		background: #222; 
}
table.scores th { 
		background: #555; 
		color: #fff; 
		font-weight: bold; 
}
table.scores td, th { 
		padding: 6px; 
		text-align: center; 
}

@media only screen and (max-width: 1024px), (min-device-width: 420px) and (max-device-width: 1024px)  {
	
	table.scores {
					width:95%;
					min-width:95%;
					font-size:larger;
		}

	table.scores table, table.scores thead, table.scores tbody,table.scores th,table.scores td,table.scores tr { 
					display: block;
		}
	
	table.scores thead tr { 
					position: absolute;
					top: -9999px;
					left: -9999px;
		}
	
	table.scores tr { 
					border: 1px solid #555;
		}
	
	table.scores td { 
					border: none;
					border-bottom: 1px solid #333; 
					position: relative;
					padding-left: 50%; 
		}
	
	table.scores td:before {
					position: absolute;
					top: 6px;
					left: 6px;
					width: 45%; 
					padding-right: 10px; 
					white-space: nowrap;
		}

	/* table.scores tr td:nth-child(1), */
	table.scores tr td:nth-child(4),
	table.scores tr td:nth-child(5)
		{ 
					display:none;;
		}

	table.scores td:nth-of-type(1):before { content: "Game Nr.";}
	table.scores td:nth-of-type(2):before { content: "Date"; }
	table.scores td:nth-of-type(3):before { content: "Day"; }
	table.scores td:nth-of-type(6):before { content: "Score"; }
	table.scores td:nth-of-type(7):before { content: "Tens"; }
	table.scores td:nth-of-type(8):before { content: "Average"; }
	

} /* EINDE MEDIA QUERY */ 



/* ==================== ADD FORMULIER ===================== */


div#invoer {
	width:95%;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	justify-content:center;
}

h1.main-title {
	text-align:center;
}

table#form {
	min-width:275px;
	font-size:2rem;
}

table#form tr td {
	padding:5px 20px;
}

input#date, input#score, input#tens {
	width:80px;
}

table#form tr td:first-child {
	text-align:right;
}
table#form tr td:last-child {
	text-align:left;
}
table#form tr td#submit {
	text-align:center;
	height:2em;
}

.login-submit {
	background: transparent;
	border: 2px solid #dfdfdf;
	color: #dfdfdf;
	font-size: 1.4rem;
	padding: 6px 36px;
	border-radius: 8px;
}



/* ==================== REMOVE FORMULIER ===================== */


div#invoer-remove {
	width:95%;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
}


h2#error {
	align-self:center;
	text-align:center;
}

.remove {
	align-self:center;
}


table.remove {
	min-width:275px;
	font-size:2rem;
}

table.remove tr td {
	padding:5px 20px;
}


table.remove tr td#submit {
	text-align:center;
	height:2em;
}

@media only screen and (max-width: 1024px), (min-device-width: 420px) and (max-device-width: 1024px)  {
	
	table.remove {
					width:95%;
					min-width:95%;
		}
		
	table.remove tr td {
		display:block;
	}	
}

/* ==================== ABOUT ===================== */

div.center {
		width:100%;
		display:flex;
		justify-content:center;
}

img#blazoen {
		max-width:700px;
		width:95%;;
}


table.about {
		border:1px solid #fff;
		width:700px;
		min-width:700px;
		border-collapse: collapse;
		margin-left:auto;
		margin-right:auto;
		
}

table.about tr:nth-child(n+2):nth-child(-n+5):nth-of-type(even),
table.about tr:nth-child(n+7):nth-child(-n+7),
table.about tr:nth-child(n+9):nth-child(-n+12):nth-of-type(odd),
table.about tr:nth-child(n+14):nth-child(-n+14) {
	background:#282828;
}


table.about tr#laatste-rij td {
	background:#282828;
}

table.about tr#laatste-rij td p {
	padding:0;
	margin:0;
}


table.about td { 
		padding: 6px; 
		text-align: left; 
}

table.about tr  td ul, table.about tr td ul li {
		text-align:left;
} 


table.about td[colspan="2"] {
	background:#555;
	padding:7px;
	text-align:center;
	
}

div#img {
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin-top:40px;
}

img#satori {
	width:400px;
	align-self:center;
}

div#logo {
	display:flex;
	justify-content:space-between;
	width:500px;
	align-self:center;
	margin-top:30px;
}

img#satori-logo {
	width:200px;
	align-self:center;
} 

img#bearpaw-logo {
	height:80px;
	align-self:center
}



@media only screen and (max-width: 1024px), (min-device-width: 420px) and (max-device-width: 1024px)  {
	
	table.about {
					width:95%;
					min-width:95%;
		}

	table.about table, table.about thead, table.about tbody,table.about th,table.about td,table.about tr { 
					display: block;
		}

		table.about td[colspan="2"] {
			background:#555;
			padding:10px;
			text-align:center;
		}

		img#satori {
			width:95%;
	
		}

		div#logo {
			flex-direction:column;
		}
		
		img#bearpaw-logo {
			margin-top:30px;
		}


} /* EINDE MEDIA QUERY */ 



/* ==================== FOOTER ===================== */

footer {
	display:flex;
	justify-content:center;
}

footer p {
	font-size:1rem;
	margin-top:5rem;
}

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