@charset "utf-8";
/* CSS Document */
 .container2 { 
            width: 70%; 
            margin: auto; 
            text-align: center; 
        } 
  
        .dice { 
            text-align: center; 
            display: inline-block; 
            margin: 10px; 
        } 
  
        body { 
            /*background-color: #042f4b; */
			background-color: #a9e1fc;
            margin: 0; 
        } 
  
        h1 { 
            margin: 30px; 
            font-family: "Lobster", cursive; 
            text-shadow: 5px 0 #232931; 
            font-size: 4.5rem; 
            color: #1DEF78; 
            text-align: center; 
        } 
		h2 { 
            margin: 30px; 
            font-family: "Lobster", cursive; 
            text-shadow: 3px 0 #6ba8c485; 
            font-size: 2.5rem; 
            color: #ff3307; 
            text-align: center; 
        } 
		h4 { 
            font-family: "Lobster", cursive; 
            text-shadow: 3px 0 #6ba8c485; 
            font-size: 1.2rem; 
            color: #ff3307; 
            text-align: center; 
        }
  
        p { 
            font-size: 1.5vw; 
            color: #099366; 
            font-family: "Indie Flower", cursive; 
        } 
		/*tr{
			height:60px;
		}
		td{
			max-width:60px;
			width:60px
		}
		.red{
			background-color:red;
		}
		.green{
			background-color:red;
		}
  */
		img2 { 
            width: 100%; 
        } 
		button{
			margin:20px;
		}
  
        .bottom { 
            padding-top: 20px; 
        } 
  
        .butn { 
            background: #4ecca3; 
            font-family: "Indie Flower", cursive; 
            border-radius: 7px; 
            color: #ffff; 
            font-size: 30px; 
            padding: 16px 25px 16px 25px; 
            text-decoration: none; 
        } 
  
        .butn:hover { 
            background: #232931; 
            text-decoration: none; 
        } 
		.pselect { 
            background: #4ecca3; 
            font-family: "Indie Flower", cursive; 
            border-radius: 7px; 
            color: #ffff; 
            font-size: 30px; 
            padding: 16px 25px 16px 25px; 
            text-decoration: none; 
        }
		.pselect:hover{
			background:#1DEF78;
			text-decoration:none;
		}
		.holder { 
            text-align: center; 
            display: block; 
            margin: 10px; 
        }

		.box{
			border:double;
			width:100%;
			border-color:#ff3307;
			border-width:5px;
			border-radius:25px;
			padding:25px;
		}
		
		.navbar{
			background-image:url(images/tilewood2.jpg);
			background-repeat: repeat-x;
		}
		.navbar a{
			font-family:Jokerman;
			font-size:1.5rem;
			text-shadow: 3px 0 #2329310d; 
			text-outline:#000;
			
		}
		.top{
			width:100%;
		}
		.bottom{
			width:100%;
		}
		.col1{
			background-color:#f6c9ba;
		}
		.col2{
			background-color:#d8baf6;
		}
		td{
			color:#ffffff;
			font-weight:bold;
			/*text-align-last:start;
			vertical-align:text-top;	*/	
		}



/* Popup container - can be anything you want */
.popup{
	display:none;
	width:600px;
	padding:0;
	position: absolute;
	top:0px;
	left:0px;
	margin-top:20px;
	z-index: 1;
	background-color:#a9e1fc;
	border:outset;
	border-radius:10px;
	border-color: #0B4C75;
}
.popuptext{
	display:inline-block;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 3s;
  animation: fadeIn 3s;
}

.modal{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%) scale(0);
	transition:200ms ease-in-out;
	border:1px solid black;
	border-radius:10px;
	z-index:10;
	background-color: white;
	width:800px;
	max-width:80%;
	height:fit-content;
}
.modal.active{
	transform:translate(-50%,-50%) scale(1);
	display:block;
}
.modal-header{
	padding:10px 15px;
	display:flex;
	align-items: center;
	border-bottom:1px solid black;
}
.modal-header .title{
	font-size:1.15rem;
	font-weight:bold;
}
.modal-header .close-button{
	cursor:pointer;
	border:none;
	outline:none;
	background:none;
	font-size:1.15rem;
	font-weight:bold;
}

.modal-body{
	padding:10px 15px;
}

#overlay{
	position:fixed;
	opacity:0;
	transition:200ms ease-in-out;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,0.5);
	pointer-events: none;
	z-index:5;
}
#overlay.active{
	pointer-events: all;
	opacity:1;
}


.modal-body p{
	font-size: 2.5vh; 
	width: fit-content;
    color: #099366; 
    font-family: "Courier New", Courier, monospace;
} 

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}