/* Includes purely formatting. 
Does NOT include coloring. */



/* Layout styles for my header */


nav {
    width: 15%;
    text-align: center;
    order: 1;
    font-family:'Courier New', Courier, monospace; /* THIS WOULD GO IN STYLING */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%; /* or 200px */
}

ul li {
    list-style-image: url(eyebulletptalt2.png);
   
}

ul {
     padding-left: 1.2rem;
}

/*
 nav ul {
 
 } 

Find color for nav in foreststyling */

/* hyperlink text */
li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}



.banner {
   order: 2;
   padding-top: 25px;

}

.blinktext {
    order: 3;
    flex-wrap: wrap;
    width: 15%;
    height: 80%;


}

.blinktext > h3 {
    text-align: center;
    padding-top: 15px;
}

.blinktext > img {
    height:100%;
    width: auto;
   
}

/* Layout styles for my whole-screen grid */

#maingrid {
    display: grid;
   /* border: 5px solid red; */
    z-index: 1;
    grid-template-columns: [left-start] 15% [left-gap] 5% [middle-start] 60% [right-start] 5% [blink-start] 15% [col-end];
    grid-template-rows: [header-start] 20% [body-start] 550px [footer-start] 100px [line-end];
                             /* can increase body-start to push footer down */
}

#header {
  /*  border: 1px dotted blue; */
    grid-column-start: left-start;
    grid-column-end: col-end;
    grid-row-start: header-start;
    grid-row-end: body-start;
}

#blinkiescontain {
   /* border: 1px dotted yellow; */
    grid-column-start: blink-start;
    grid-column-end: col-end;
    grid-row-start: body-start;
    grid-row-end: line-end;
    z-index: 2;
    
}

#midframe {
   /* border: 3px dotted green; */
    grid-column-start: middle-start;
    grid-column-end: right-start;
    grid-row-start: body-start;
    grid-row-end: footer-start;
}

#gridfooter {
   /* border: 3px dotted purple; */
    grid-column-start: left-start;
    grid-column-end: col-end;
    grid-row-start: footer-start;
    grid-row-end: line-end;
    text-align: center;

}

/* Layout styles for my flexbox containing my blinkies */

#blinkiesflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 2px;
}

/*
#blinkiesflex > div {
     border: 2px dashed blue; 
}
 */

 /* Layout styles for footer */

footer > img {
    padding: 10px;
}


/* General layout styles */

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 1;
    position: static;
}

/* body background img in foreststyling 
body {
   
}
*/

iframe {
    width: 100%;
    height: 100%;
}

h4 {
    text-align: left;
}