body {
background-color:#02010A;
margin-left:10%;margin-right:10%;
}

/* Text */

h1 {color:black;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:black;font-size: 30px;}
h4 {font-size: 22px;background-color:#FF5E00;}
p {font-size: 22px;color:white;}
.sect p {text-indent: 20px;}
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 */
section {background-color:;margin-left:20%;margin-right:20%;max-width:60%;}

article {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;}

article.modal {border-style:none;background: rgba(76, 175, 80, 0.3);color:white;margin:0px;}
/* Issue # article */
article.issue {background-color:#FF5E00;border-width: 0px;margin-top:0px;margin-bottom:0px;}
.issue p {color:black;}

/* Journal for TCR4 */
.journal {background-color:HotPink;text-indent:20px;border-color:HotPink;border-radius: 15px;border-style:outset;}
.journal h3 {background-color:#FF389B;color:black;font-family:'Times New Roman';font-size: 20px;margin-bottom:0px;
			border-color:#FF389B;border-style:outset;
			margin-right:0px;margin-left:0px;}
.journal p {font-family:'Times New Roman';font-size: 16px;color:black;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;padding-left:10px;padding-right:10px;}
.journal a {font-family:'Times New Roman';font-size: 16px;color:blue;}

/* Warning for TCR4 */

.warning {background-color:yellow;margin:40px;padding:30px;text-align:center;}
.warning p {color:black;font-family:'Times New Roman';}



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; margin: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.entry {background-color:#FF8EC6;margin-left:30px;margin-right:30px;}

	
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;
	background-color:#FF8EC6;
  }
  
  .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;
  }