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

body, td, p {
	background-color: white;
	color:black;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-align: center;
}

p {
		margin-top: 0;
	}

a {
	text-decoration: none;
	color:#edb745;
}

#wrapper {
	width: 96%;
	max-width: 920px;
	margin: auto;
	padding: 2%;
}

#center {
	text-align:center; 
	margin: auto;
	font-size : 20px;}

#bottom {
	font-size: 16px;
}


.item {
	background-color: #9B9898;
	padding: 5px;
	border-radius: 6px;
	display: block;
	margin: auto;
}

button {
  	background: #9B9898;
    border: 0;
    color: #fff;
    font-size: 16px;
    padding: 1em 2em;
    cursor: pointer;
    margin: 20px auto 60px;
    display: block;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
}


@media screen and (max-width: 480px) {
	#center {
		font-size: 5vw;
	}
	
	input {
		font-size: 3.5vw;
	}
	
	#bottom {
		font-size: 4vw;
	}
	
	.item {
		padding: 1vw;
	}
	
	img {
		max-width: 75%;
	}
}

@media screen and (min-width: 40.5em) {
	.item {
		width: 550px;
	}
	
	img {
		max-width: 500px;
	}
	
	#bottom {
		width: 550px;
		margin: auto;
	}
	
}




#light-dark-mode-container{
    display:flex;justify-content:center;
    font-size:1rem;font-weight:600;
    margin:0;padding:0;
    cursor:pointer
    
}
    
#light-dark-mode-container:hover{
    color:var(--blue)
    
}

.dark{
    color:#fff!important;
    background-image:none!important;
    background-color:#000!important;
    text-shadow:none!important;
    box-shadow:none;
    
}






















/* COUNTER */

.main_container {
  height: 46px;
  width: auto;
  padding: 3px;
  margin: 2px;
  max-width: 300px;
  background-color: #555555;
  align-content: center;
}
.container_inner {
  height: auto;
  border: none;
  background-color: #555555;
  max-width: 290px;
  vertical-align: center;
  padding-top: 12px;
  padding-left: 10px;
  align-content: center;
}
 .num_tiles {
  width:30px;
  height: 30px;
  background-color: #888888;
  color: #ffffff;
  font-size: 22px;
  text-align: center;
  line-height: 20px;
  padding: 3px;
  margin: 1.5px;
  font-family: verdana;
  vertical-align: center;
}