@import url('https://fonts.googleapis.com/css?family=Comfortaa|Work+Sans&display=swap');
		
body {font-family: 'Work Sans',sans-serif;
			font-size: 16px;
            line-height: 1.5;
		}
        
      

        #content{
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-auto-rows: minmax(100px, auto);
            grid-gap: 2px;
            max-width: 960px;
            margin: 0 auto;
            grid-template-areas:
            "main main main main main main main main"
            
              ;


        }
        /* desktop grid */
        @media screen and (min-width: 760px){
    		#content{
    			display: grid;
    			grid-template-columns: repeat(8, 1fr);
    			grid-auto-rows: minmax(100px, auto);
    			grid-gap: 0px;
    			max-width: 960px;
    			margin: 0 auto;
                grid-template-areas:
               "main main main main main main main main"
              ;   
                
    		}
        }
		#content > *{
			padding: 10px;
		}

        
        main{
            grid-area: main;
            background:transparent;
            border: 5px solid transparent;
            padding: 0px;
            margin: 0px;
           
        }


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}



ul {
  list-style-type:none;
  margin: 0;
    padding: 2;
}
  
ul.b { list-style-type:square;}

ul li a {
  display:block;
  
}

ul li a:hover:not(.active){
  background-color: whitesmoke;
    color:black;
}

ul li a:active:{
  background-color:rgb(244, 237, 164);
  color: black;
    text-shadow: 0 0 3px #FF0000;
}
a.external:link {color: white; font-weight: bold; }
a.external:visited {color: floralwhite; font-weight: bold; }
a.external:hover {text-decoration: overline;}
a.external:active {color: black; }

a:link {
  color: #e33434;
}

a:visited {
  color: #0b6a0b;
}


a:hover {
  color: #a2165c;
    text-decoration: overline;
}


a:active {
  color: #10109f;
}

img {
    max-width: 100%;
    height: auto;
}

h1 { font-family: 'Work Sans', sans-serif;
text-align: center;
    font-size: 21px;
    margin: 20px;
}

h3 { font-family: 'Work Sans', sans-serif;
text-align: center;
    font-size: 21px;
    margin: 5px;
}

h4 { font-family: 'Work Sans', sans-serif;
float: right;
}


iframe {
width: 100%;
    height: 100%;
    border: none;
    
    

} 


img {
    max-width: 100%;
  height: auto;
}














/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}