@charset "utf-8";
/* CSS Document */
 
 * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;		
}

        :root {
            --primary-grey: #e5e7eb;
            --primary-orange: #f97316;
            --primary-purple: #7c3aed;
            --secondary-amber: #fbbf24;
            --dark-bg: #1a0b2e;
            --darker-bg: #111111;
            --card-bg: rgba(229, 231, 235, 0.03);
            --border-color: rgba(229, 231, 235, 0.2);
            --text-primary: #ffffff;
            --text-secondary: #a1a1aa;
            --primary-cyan: #00ffff;
            --primary-pink: #ff00ff;
			

        }

        body {
			font-family: 'JetBrains Mono', 'Fira Code', monospace;
			src: url('fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2'),
			url('fonts/webfonts/JetBrainsMono-bold.woff2') format('woff2');
            background: var(--darker-bg);
            color: var(--text-primary);
            overflow-x: hidden;
        }
h1 {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--primary-cyan);
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}
h2 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--primary-cyan);
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}
h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-cyan);
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}
a{
	color:var(--text-primary);
	font-size: 0.7rem;
}
a:hover{
	color:var(--text-secondary);
}
a:active{
	color:var(--primary-cyan);
}
p{
	
	text-align:left;
}
img{
	height: auto;
	
}
.logo{
	width:160px;
	height: 60px;
	
}
.text{
	max-width:640px;
	font-size:10px;
	
	
}
.button {
	width: 75px;
	height:60px;
    color: #33ffcc;
	background-color:#000;
	
    float: right;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.button:hover,
.button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}
.textbox {
	width: 320px;
	height:60px;
    color: #fff;
	background-color:#222;
	
    float: right;
    font-size: 1rem;
    font-weight: bold;
}
.main-container{
	max-width:960px;
	margin:0 auto;
	
}
.header-container{
	max-width:960px;
	background: #000;
	height:auto;
	
	
}
.header-flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: left;
  height: 60px;
  
}
.scores-flex-container {
 
  width:340px;
  height:300px;
  padding-left:20px;
  float:left;
  
}
.nametag{
	
  background:#006699;
  background-color:#006699;
  justify-content: left;
  width:340px;
  float:left;
	
	
}
.highscores-container-small{
	display: inline;
	max-width:100%;
	height:100%;
	margin:0 auto;
	padding:5px;
}
.block-container{
	max-width:100%;
	height:100%;
	margin:0 auto;
	
}
.flex-container {
	
	width:960px;
	height:auto;
	margin:0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  vertical-align:top;
  
  
}

.flex-item {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;  
  font-size: 30px;
  flex: 33.3%;
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
	.flex-item {
		flex: 100%;
	}
	#map-container{
		width:100%;
		height:360px;
	}
	.main-container{
		max-width:100%;
		margin:0 auto;
	}
}



.modal-container {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #000000;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 500px;
    position: relative;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}