body  {
  background-image: url("images/letterCO.gif");
  background-color: #D2B48C;
  background-size: cover;
  background-position: center;
}
h1 {color: darkseagreen;
    text-shadow: -2px -2px 0 #000,
                2px -2px 0 #000,
                -2px 2px 0 #000,
                2px 2px 0 #000,
                -3px 0px 0 #000,
                3px 0px 0 #000,
                0px -3px 0 #000,
                0px 3px 0 #000;
}

  
    
a{
    text-decoration: none;
    font-family:courier;
    font-size:30px;
    color: darkseagreen;

    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
;

    }
    


    
a:hover{
      color: #7FFFD4;
    }
    


.button{
      /*note to self: the div is being centered by another div in the html*/
      width: 63px;
      height: 250px;
      
      margin-top: -30px;
    	margin-left: 200px;
      margin-right: 60px;
      

      border: 2px solid #d9b3ff;
      border-radius: 28px;
    	background-color: #071635;
    	
    	padding-top: 25px;

      display: inline-block;
      color: white;
      text-align: center;
      
    }
    
    
    
    
    
    
    
    
    
    /*Start of gallery css*/
    
html {
  box-sizing: border-box;
}

*::before,
*::after 
{
  box-sizing: inherit;
}





#container {
  width: 800px;
  margin: 2em auto;
}

aside p:first-of-type{
  font-weight: bold;
}

.images img {
  margin: 50px 20px;
}

.closer img {
  margin: 20px 20px;
}

.images img:first-of-type {
  margin-top: 10px;
}

/* diff boxes */

header {
  background-color: #880D1E;
  border: solid 5px #DD2D4A;
  color: bisque;
  text-align: center;
  letter-spacing: 4px;
}

.content {
  padding: 1em;
}
/*Yellow of current big page E8C773*/
main.filled {
  background-color: #E8C773;
  border: solid 3px #DD2D4A;
  padding: 2em;
}

aside {
  background-color: #73C2FB;
  border: solid 3px #DD2D4A;
  padding: 10px;
  width: 560px;
}

.title {
  background-color: sienna;
  color:bisque;
  padding: 1px;
  text-align: center;
}

.scrollbox {
  overflow-y: scroll;
  background-color: burlywood;
  padding: 1em;
  scrollbar-color: maroon darksalmon;
  height: 95%;
}

section {
  background-color: bisque;
  border: solid 3px #551122;
}

/* Non specific attribute adding */


.flex {
  display: flex;
}

.long {
  height: 400px;
}

.topspace {
  margin-top: 15px;
}

.big {
  width: 480px;
}

.small {
  width: 320px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.icon {
  float: right;
  display: inline;
}


ul {
  line-height: 1.5em;
  list-style-image: url('css/headerButton1.png');
}

.cleanlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
/* navbar specific */

nav.primary {
  width: 240px;
  background-color: #DA4167;
  border: solid 3px #551122;
  padding: 1em;
  list-style-position: inside;
  font-size: large;
  letter-spacing: 4px;
}

iframe.gallerynav {
  border: solid 4px #8FBC8F;
  background-color: #C596AA;
  width: 160px;
  height: 430px;
}



/*THESE ARE THE TWO CAT EMOJI CODES. maybe change to gifs*/
.navbar li {
  line-height: 2.5em;
  list-style-image: url('css/headerButton1.png');
}

.navbar li:hover {
  list-style-image: url('css/headerButton2.png');
}
nav ul li a {
  text-decoration: none;
}
/* This is for the gallery enlarge */
.images img:hover {
  cursor: zoom-in;
}

/* The Modal (background) */
#modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* popup image */
#focusimage {
  margin: auto;
  display: block;
  width: auto;
  max-width: 800px;
  max-height: 99%;
}

/* exit button */
#closebutton {
  background-color: sienna;
  border: outset 3px sienna;
  color: bisque;
  position: absolute;
  display: inline-block;
  top: 20px;
  right: 20px;
  height: 20px;
  width: 20px;
}