/*  UPDATES from ISSUE 3
 - new to this issue is ".sect", used for the main divs that contain all the text. .sect provides new padding and styling to the text 
 - page padding has also been moved to the previously redundant "section" element, allowing more control over backgrounds.*/

/* Page Construction */
body {background-color:green;padding:0px;margin:0px;}
section {padding-left:10%;padding-right:10%;padding-top:20px;padding-bottom:20px;}
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;}

/* Text */

h1 {color:#E1C165;font-size:2.5vw;font-family: 'Almendra'}
h2 {color:#E1C165;font-size:40px;font-family: 'Almendra';padding:0px;margin:0px;text-indent: 50px;text-shadow: 2px 2px 4px #000000;}
h3 {color:#E1C165;font-family: 'Be Vietnam Pro';font-size: 22px;}
h4 {font-family: 'Be Vietnam Pro';font-size: 22px;background-color:#FF5E00;}
p {font-family: 'Brawler';font-size: 22px;color:white;text-shadow: 2px 2px 4px #000000;}
a {font-family: 'Be Vietnam Pro';font-size: 21px;color:orange;}
a:hover {color:white;}


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

/* Elements */

div {
	border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
	background-color:#161616;
	width:auto;
	margin:15px;
	padding:5px;
}

.sect p {
padding-right:20px;padding-left:20px;margin:0px;margin-top:10px;margin-bottom:10px;text-indent: 20px;color:white;text-align: justify;text-justify: inter-word;
}
.sect2 {padding:25px;border:none;background: rgba(0, 0, 0, 0.0);margin-top:0px;}
.sect2 p {
font-family: "Times New Roman", Times, serif;font-size:15px;text-shadow:none;
}
.getinfofromstylesheet {background-color:green;border:none;}
div.modal {
	border-style:none;
	background: rgba(76, 175, 80, 0.3);
	color:white;
	margin:0px;
}

/* Issue # Div */

div.issue {background-color:#4D6B4D;border-width: 0px;margin-top:0px;margin-bottom:0px;}
.issue p {color:#E1C165;}

/* 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;
	background-image: url('https://i.imgur.com/pBk7Pmj.png');
}

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.solounit p {text-align:center;text-indent: 0px;}
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: */


/* The width is 100%, when the viewport is 800px or smaller */
@media screen and (max-width: 800px) {
nav {width: 100%;margin-left:0%;margin-right:0%;max-width:100%;padding-left:0px;padding-right:0px;}
h1 {color:#FFBD87;font-size:7vw;}
section {  margin-left:0%;margin-right:0%;max-width:100%;padding-left:0px;padding-right:0px;}
article {margin-left:0%;margin-right:0%;max-width:100%;padding-left:0px;padding-right:0px;}
body {margin-left:0%;margin-right:0%;padding-left:0px;padding-right:0px;}
div {margin-left:0%;margin-right:0%;max-width:100%;padding-left:0px;padding-right:0px;}
.sect p {font-size:4vw;}
}



/* 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;
	font-size: 22px;color:white;
  }
  


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

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