/*
 Author: greanlee pike
 Date: 9/18/24
 File Name: styles.css
 */
 
		 * {
			 margin: 0;
			 padding: 0;
			 border: 0;
		 }
		
		* {
			margin: 0 auto;
		}
		body {
			background-color: #000;
		}
		
		header {
			background-color: #000; 
			text-align: center;
			padding: 1em 0; 
			border-bottom: none; 
		}
		.logoarea {
			position: sticky;
			top: 0;
			z-index: 10; 
			max-width: 100%; 
		}
		.logoarea img {
			max-width: 200px; 
			height: auto;
		}
		
		header h1 {
			font-style: italic;
		}
		h1 {
			font-size: 2em;
		}
		h6 {
			font-size: 1.5em;
		}
		.intro img {
			max-width: 60%;
			height: auto;
			float: right;
			margin-left: 1em;
			max-width: 300px;
		}
		.intro {
			display: inline-block;
			text-align: left;
			padding: 3%;
			width: 98%;
			float: center;
			font-size: .75em;
			text-indent: 30px;
		}
		
		.links {
			display: inline-block;
			width: 90%;
		}
		
		.links h3 {
			text-align: left;
			margin-left: 4%;
		}
		
		.links img {
			max-width: 40%;
			height: auto;
		}
		
			
		
		.links p {
			text-align: right;
			font-size: .75em;
		}

	


			.tab-desk {
				display: block;
			}
			
			
			main {
				padding: 2%;
				color: #000;
				overflow: auto;
				font-family: Verdana, Arial, sans-serif;
			}
		
			main p {
				font-size: 1.25em;
			}
			.grid {
					display: grid;
					grid-template-columns: auto auto auto;
					grid-gap: 20px;
					clear: both;
					margin-top: 2em;
					width: 90%;
			}
				
			.grid2 {
					display: grid;
					grid-template-columns: auto auto auto;
					grid-gap: 20px;
					clear: both;
					margin-top: 2em;
					width: 90%;
			}
			.action {
				font-size: 1.25em;
				color: #373684;
				font-weight: bold;
				
			}
			
			article {
				background-color: #f5f5f5; 
				padding: 1.5em;           
				margin: 1em;             
				border-radius: 8px;       
			}

			article img {
				float: left;
				margin-right: 2 auto;
				padding: 0.5%;
			}
			.row {
			  display: flex;
			  padding: 0 4px;
			}

			/* Create four equal columns that sits next to each other */
			

			.column {
			  flex: 25%;
			  max-width: 25%;
			  padding: 0 4px;
			}

			.column img {
			  margin-top: 8px;
			  vertical-align: middle;
			  width: 100%;
			  float: center;
			}
			
			.bottommargin {
				margin-bottom: 8px;
			}

			/* Responsive layout - makes a two column-layout instead of four columns */
			@media screen and (max-width: 800px) {
			  .column {
				flex: 50%;
				max-width: 50%;
			  }
			}

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

			.round{
					border-radius: 8px;
				}
				
				
				
			.tooltip {
			  position: relative;
			  display: inline-block;
			}

				/* Tooltip text */
			.tooltip .tooltiptext {
			  visibility: hidden;
			  width: 120px;
			  bottom: 100%;
			  left: 50%;
			  margin-left: -60px;
			  background-color: #000;
			  opacity: 60%;
			  color: #fff;
			  text-align: center;
			  padding: 7px 0;
			  border-radius: 10px;
			 
			  /* Position the tooltip text - see examples below! */
			  position: absolute;
			  z-index: 100;
			  font-family: "Comic Sans MS", "Comic Sans", cursive;
			  
			}

			/* Show the tooltip text when you mouse over the tooltip container */
			.tooltip:hover .tooltiptext {
			  visibility: visible;
			}

		footer {
			background-color: #272727; 
			text-align: center;
			padding: 1em 0; 
			border-bottom: none;
			color: #fff;
			font-family: "Comic Sans MS", "Comic Sans", cursive;
		}