/* CSS page for sandbox */



html { 
	font-size: 18px; /* Sets the base font size for the entire document */ 
	} 

body { 
font-family: Arial, sans-serif; /* Sets the default font family */
background:linear-gradient(to right, #380613, #000);;
}

h1 { font-size: 2.5em; } 
h2 { font-size: 2em;  } 
h3 { font-size: 1.75em;  } 
h4 { font-size: 1.5em;}

* {
    box-sizing: border-box;
}



.flex-container {
	width:90%;
    display: flex;
    flex-wrap: wrap;
	margin:0px auto;
	padding:2em;
	border:1px solid gray;
	border-radius:3em;
	background:#fff;
}

.flex-nav {
	width:90%;
    display: flex;
    flex-wrap: wrap;
	margin:0px auto;
	background:#fff;
	text-align:center;
	justify-content: center;
	align-items: center;
}

.div-left {
  flex: 1 1 25%;

 /* border:1px solid gray;*/
}

.div-right {
 flex: 1 1 75%;
  padding:10px;
}
 
.min-left {
	 flex: 1 1 50%;
  padding:10px;
}

.min-right {
	 flex: 1 1 50;
  padding:10px;
}

a {
	color:maroon;
	text-decoration:none;
}

a:hover {
	color:gray;
}

.responsive {
  width: 100%;
  height: auto;
}

    .button {
            padding: 5px 20px;
            background-color: #4A1A28;
            color: white;
            border: 1px solid gray;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
        }
		
	 .button:hover {	
	 background-color: gray;
	 }
		
.hiddens{
	width:480px;
	margin:0 auto;
	  border: 1px solid gray;
            border-radius: 2em;
			padding:1em;
	
}

.close{
	cursor:pointer;
}

.close:hover{
	font-weight:bold;
}
.footer {
	width:100%;
	margin:0px auto;
	padding:2em;
	color:white;

}

.mailto{
	position:relative; 
	height:28px; 
	width:auto; 
	top:6px; 
	left:20px;
	cursor:pointer;
}

.mailto:hover{
	left:30px;
}

@media screen and (max-width: 600px) {

.div-right, .div-left {
    flex: 100%;
  }
  
  h2{
	  font-size:1.5em;
  }

	.button {
		width:80%;
		margin:.5em;
	
	}