/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* start styling */

		:root {
			--text: white;
			--border: rgb(209, 231, 235); /* whiteish*/
			--accent: #60afbe; 
			--bg: rgba(104, 196, 196, 0.8); /* whiteish but idk where??*/
			--gradientTop: rgb(209, 231, 235); /* whiteish*/
			
	}
	
	
	header {
	   width: 100%;
    display: flex;
    justify-content: center;  /* centers the image horizontally */
    
	}
	
	header img {
    width: 600px;   /* change this number */
    height: auto;
}

* { 
	box-sizing: border-box;
}
body {
	padding: 10px;
	font-family: 'Genos', sans-serif;
	color: var(--text);

	/* page background  */
 background-image: url('windows_xp_24.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.container {
	max-width: 55rem;
	margin: 5px auto 12px auto;
	outline: 4px solid var(--gradientTop);
	outline-offset: 4px;
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;

	/* container background pattern */
		background-color: rgba(140,177,188,0.7);
	
}
/* these control the column widths */
.small { flex: 1 1 5%; 
  min-width: 120px;}

.large {
  flex: 1 1 83%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

    
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }
.other { flex: 1 1 39%; }
.third { 
 flex: 0 0 calc((100% - 10px) / 3);
  box-sizing: border-box;
 }



nav {
	border: 2px ridge var(--border);
	border-radius: 5px;
	padding: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}
nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}
nav a {
	display: block;
	margin: 5px;
	background: linear-gradient(to right,var(--bg),var(--gradientBottom));
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;
}
nav a:link, nav a:visited { 
	color: var(--text);
}
nav a:hover, nav a:focus {
	background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop));
}

/* optional button styling like in the preview */
div.small > img {
	display: block;
	margin: 5px auto;
	border:2px solid var(--border);
	border-radius: 5px;
}


section {
	border: 2px ridge var(--border);
	border-radius: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
	padding: 5px;
	 box-sizing: border-box; /* supposed to fix my 3rd box problem */
}


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
}
h4 { 
	color: var(--accent);
	letter-spacing: 2px;
	font-size: 1.4rem;
	font-weight: normal;
	text-align: center;
}

h5 { 
  color: #60afbe;
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	padding-bottom: 5px;
}
/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--accent);
}