* { box-sizing: border-box; }
body { background-color: #fff;
       color: #555555; 
	   font-family: Arial, Helvetica, sans-serif;
}
#wrapper { 
           
		   background-color: #4b474a;
		   background-image: linear-gradient(to top, #424040, #b3b0b2);
		 	   
}  
header { background-color: #361346; 
         color: #FFF; 
		letter-spacing: 0.25em; 
		 text-align: center;
		 padding-top: 1em;
		 padding-bottom: 1em;

}
header a         {text-decoration: none; }
header a:link    { color: #FFFFFF; }
header a:visited { color: #FFFFFF; }
header a:hover   { color: #90C7E3; }

h1    { margin-bottom: 0; 
        margin-top: 0;
        font-family: Georgia, "Times New Roman", serif; 
}
nav   { 
        text-align: center;
        font-weight: bold;
        padding: 0;
		font-size: 120%;
}

nav ul { list-style-type: none;
         margin: 0;
		 padding-left: 0;
		 font-size: 1.2em; 
}
nav li { border-bottom: 1px solid #fff; }
nav a { text-decoration: none; }
nav a:link    { color: #a2c8ee; }
nav a:visited { color: #344873; }
nav a:hover   { color: #7c127c; }
main  { background-color: #afacb1;
        
		padding: 1px 20px 20px 30px;
        display: block;
		overflow: auto;
}

h2    { color: #9819d2; 
        text-shadow: 1px 1px  #000;
        font-family: Georgia, "Times New Roman", serif; 
}
h3    { color: #000033;
        font-family: Georgia, "Times New Roman", serif; 
}
main ul    { list-style-image: none; }
dt    { color: #56045e; }

footer { 
         background-color: #FFF;
		 font-size: 75%;
         font-style: italic;
		 text-align: center;
		 padding: 2em;
		 font-family: Georgia, "Times New Roman", serif;
}
#contact { font-size: 90%; }
#hometab { height: 300px;
            background-image: url(marshfog.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%; 
		
}
#projectstab { height: 300px;
            background-image: url(marshfog.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%; 
		
}
#certificationstab { height: 300px;
            background-image: url(marshfog.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;} 

#traveltab { height: 300px;
			background-image: url(marshfog.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;}

#contactmetab { height: 300px;
			background-image: url(marshfog.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;}

#hacktheboxtab { height: 300px;
			background-image: url(marshfog.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;}
		

table{border: 2px solid; color:#56045e; border-collapse:collapse;}
td,th{padding: 0.5em; border: 2px; color:#56045e}
td{text-align: center;}
.text{text-align: left;}
tr:nth-of-type(odd){background-color: #f5fafc;}

form{display:flex;
	flex-flow: column nowrap;}
	input textarea{margin-bottom: 0.5em;}

@media (min-width: 600px) {
			nav ul { display: flex;
			         flex-direction: row;
					 flex-wrap: nowrap;
					 justify-content: space-around; } 
			nav li { border-bottom: none; }
			section { margin-left: 2em;
					  margin-right: 2em;
                      flex: 1;
			}
			.flow { display: flex;
			        flex-direction: row; }
			form{width: 60%;
				max-width: 30 em;
				display:grid;
				gap: 1em;
				grid-template-columns: 6em 1fr;}
			input[type="submit"]{grid-column: 2/3;
				width: 9em;}			  
}

@media (min-width: 1024px) {
			#wrapper { margin: auto;
			           width: 80%;
					   border: 1px solid #000;
					   box-shadow: 3px 3px 3px #56045e;
			}
			nav { text-align: left;
				  padding-left: 1em; }
			@supports (display: grid)  {
				  nav ul { flex-direction: column;
						    padding-top: 1em; }
				  .tab  { grid-area: tab; }
				  header { grid-area: header; }
				  nav    { grid-area: nav; }
				  main   { grid-area: main; }
				  footer { grid-area: footer; }
				  #wrapper { display: grid;
				             grid-template:
							     "header header"
								 "nav   tab"
								 "nav    main"
								 "nav    footer"
								 / 180px 1fr ;
				  }
			}
}

.dropdown {
	position: relative;
	display: inline-block;
  }
  
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 12px 16px;
	z-index: 1;
  }
  
  .dropdown:hover .dropdown-content {
	display: block;
  }
  
  .spinbox {
	width: 100px;
	height: 100px;
	background: purple;
	width: 300px;
	height: 300px;
	transform: rotate(180deg);
	transition: 2s;
  }
#comments-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ccc;
}