body {
background-color:black;
margin-left:10%;margin-right:10%;
}

/* Text */

h1 {color:#FFBD87;font-size:2.5vw;font-family: 'Be Vietnam Pro'}
h2 {color:#FFBD87;font-size:40px;font-family: 'Be Vietnam Pro';padding:0px;margin:0px;text-indent: 50px;}
h3 {color:#FFBD87;font-family: 'Be Vietnam Pro';font-size: 22px;}
h4 {font-family: 'Be Vietnam Pro';font-size: 22px;background-color:#FF5E00;}
p {font-family: 'Be Vietnam Pro';font-size: 22px;color:white;}

a {font-family: 'Be Vietnam Pro';font-size: 22px;color:orange;}
a:hover {color:white;}


/* Yap Text */
.modalOpenBtn
{color: yellow}
.modalOpenBtn:hover
{color: red}

/* Elements */

div {
	border-color:#FFBD87;
	border-width: 2px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: none;
	border-left-style: dotted;
	background-color:#161616;
	width:auto;
	margin:15px;
	padding:5px;
}

div.modal {
	border-style:none;
	background: rgba(76, 175, 80, 0.3);
	color:white;
	margin:0px;
}

/* Issue # Div */

div.issue {background-color:#FF5E00;border-width: 0px;margin-top:0px;margin-bottom:0px;}
.issue p {color:black;}

section {
background-color:;
}

article {
background-color:;margin-left:20%;margin-right:20%;max-width:60%;}

nav {background-color:;width:20%;min-width:20%;float:left;padding:0px;margin:0px;margin-bottom:30px;}

/* Gallery  */

img {width:100%;padding:0px;margin:0px; font-family: 'Material Symbols';font-size: 22px;}

div.gallery {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
  	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
}

div.gallery img {
  padding: 0px;
}
	
div.unit p {overflow: visible;white-space: wrap; width: 95%; max-height: 200px; overflow: auto;border-style: none;
  padding: 0px;
	margin:10px;
}

div.unit {    background-color:#161616;
  padding: 0px;
  margin:0px;
  	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width:40%;
	white-space: normal;
	display: inline-block;  vertical-align:top;
}

div.solounit {background-color: #151B1B; overflow: visible; padding: 30px; white-space: wrap; max-width: 400px; vertical-align:top;border-style: none; margin: auto;}
div.solounitwide {background-color: #151B1B; overflow: visible; padding: 30px; white-space: wrap; max-width: 800px; vertical-align:top;border-style: none; margin: auto;}

	
div.about {background-color: #232929; overflow: visible; padding: 0px; white-space: wrap; width: 95%; max-height: 200px; overflow: auto;border-style: none;}

/* Phone screen display changes */

/* Use a media query to add a break point at 800px: */


@media screen and (max-width: 800px) {
  nav {
    width: 100%;background-color: ; /* The width is 100%, when the viewport is 800px or smaller */
  }
  h1 {color:#FFBD87;font-size:6vw;}

article {
  background-color: ;
  margin-left:0%;margin-right:0%;max-width:100%;
}
 
body {
background-color:black;
margin-left:0%;margin-right:0%;
}
}



/* Modal "yaps" */

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }

  .modalContent {
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    max-width: 450px;
  }
  
  .blankmodal {
  border:none;}

  .modalClose {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .modalClose:hover,
  .modalClose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }