/* ROOTESSENTIALS */
html {
	border: 0.4em ridge var(--lighter);
	border-radius: 1%;
    background-color: var(--dimlight);
	font-size: 1.5em;
	scroll-behavior: smooth;
}
body {
	font-family: Calibri, Geneva, Verdana, "Segoe UI", sans-serif;
	margin: 0;
	background-color: var(--lightmax);
	color: var(--darkest);
    display: grid;
	border-radius: 0.6%;
    padding: 0.6em;
    gap: 0.6em;
    grid-template-columns: repeat(4, 4fr);
    grid-template-rows: max-content;
    grid-template-areas:
        "header header header header"
        "main main main main"
        "footer footer footer footer"
        "aside aside aside aside";
    align-items: stretch;
}
aside {
	grid-area: aside;
}
header {
	grid-area: header;
}
main {
	display: grid;
	gap: 0.6em;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	grid-template-areas: 
    "section-b section-b section-b section-b"
    "section-c section-c section-c section-d"
    "section-e section-e section-e section-e"
    "section-g section-f section-f section-f"
    "section-h section-h section-h section-h"
    "section-k section-k section-k section-i"
    "section-j section-j section-j section-j";
  grid-area: main;
}
main:has(#section-d):not(:has(#section-i)) {
  grid-template-areas: 
    "section-b section-b section-b section-b"
    "section-c section-c section-c section-d"
    "section-e section-e section-e section-e"
    "section-g section-f section-f section-f"
    "section-h section-h section-h section-h"
    "section-k section-k section-k section-k"
    "section-j section-j section-j section-j";
}
main:not(:has(#section-d)):has(#section-i) {
  grid-template-areas: 
    "section-b section-b section-b section-b"
    "section-c section-c section-c section-c"
    "section-e section-e section-e section-e"
    "section-g section-f section-f section-f"
    "section-h section-h section-h section-h"
    "section-k section-k section-k section-i"
    "section-j section-j section-j section-j";
}
main:not(:has(#section-d)):not(:has(#section-i)) {
  grid-template-areas: 
    "section-b section-b section-b section-b"
    "section-c section-c section-c section-c"
    "section-e section-e section-e section-e"
    "section-g section-f section-f section-f"
    "section-h section-h section-h section-h"
    "section-k section-k section-k section-k"
    "section-j section-j section-j section-j";
}
main:has(#section-d):has(#section-i) {
  grid-template-areas: 
    "section-b section-b section-b section-b"
    "section-c section-c section-c section-d"
    "section-e section-e section-e section-e"
    "section-g section-f section-f section-f"
    "section-h section-h section-h section-h"
    "section-k section-k section-k section-i"
    "section-j section-j section-j section-j";
}
#section-b {
	background-color: var(--lightmax);
    grid-area: section-b;
}
#section-c {
    grid-area: section-c;
}
#section-d {
    grid-area: section-d;
    align-self: center;
    justify-self: center;
	grid-template-rows: auto;
}
#section-e {
    grid-area: section-e;
}
#section-f {
    grid-area: section-f;
}
#section-g {
    grid-area: section-g;
    align-self: center;
    justify-self: center;
	justify-items: center;
	grid-template-rows: auto;
}
#section-g h2 {
	margin-top: -24px;
}
#section-h {
    grid-area: section-h;
}
#section-i {
    grid-area: section-i;
    align-self: center;
    justify-self: center;
}
#section-k {
    grid-area: section-k;
}
#section-j {
    grid-area: section-j;
}
footer {
    grid-area: footer;
}
.asidediv {
	display: grid;
    gap: 0.6em;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "aside1 aside2 aside3 aside4";
	justify-items: center;
	align-items: start;
}
.asidediv div#aside1 {
	align-self: end;
	margin-bottom: 0.8em;
}
.footerdiv {
	display: grid;
    gap: 0.6em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "footerdiv1 footerdiv2 footerdiv3";
	justify-items: center;
	align-items: stretch;
}
section {
	border-radius: 1.4%;
	background-color: var(--lightmax);
	padding: 0.6em;
}
a:link, a:visited {
	color: var(--themecolor);
	text-decoration: none;
	border: 1px solid var(--lightmax);
	padding: 0 0.1em 0 0.1em;
	font-weight: bold;
}
a:hover {
	color: var(--shoutcolor);
	background: linear-gradient(var(--mediumcolor), var(--dimlight), var(--mediumcolor));
	border: 1px solid var(--mediumcolor);
	border-radius: 5%;
	padding: 0 0.1em 0 0.1em;
}
a:active {
	color: var(--dark);
}
a:focus {
	color: var(--shoutcolor);
}
h1 {
	margin-block: 0.67em;
	font-size: 2em;
	margin: 1.4em 0 0 0;
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	color: var(--shoutcolor2);
}
h2 {
	font-size: 2em;
	margin: 0.5em 0 0.5em 0;
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	color: var(--shoutcolor2);
	text-align: left;
}
article h2 {
	font-family: Consolas, "Lucida console", Terminal, Monaco, Monospace;
	font-size: 1.2em;
	color: var(--contrast);
}
h3 {
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	color: var(--outstanding);
	font-size: 1.5em;
	letter-spacing: 3px;
}
h4 {
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	color: var(--outstanding);
	font-size: 1.2em;
	text-align: left;
	letter-spacing: 3px;
}
h5 {
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	color: var(--darkest);
	font-size: 1em;
	text-align: left;
	font-style: italic;
	letter-spacing: 3px;
}
p {
	margin-top: 0.6em;
}
p a:link {
	border: none;
}
p-subtitle {
	display: block;
	margin: 0.2em 0 0.6em 0;
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	text-align: center;
	color: var(--shoutcolor);
	font-weight: bold;
	font-style: italic;
}
nav {
	justify-items: center;
    padding: 0.8em 1em 0.6em 1em;
	border: 0.4em ridge	var(--lighter);
	border-left: inset;
	border-right: outset;
	border-radius: 3em/5em;
    background-color: var(--lighter);
}
ul {
	list-style-type: none;
}
li a:link {
	border: none;
}
nav ul li {
	margin: auto 4em auto 4em;
	border-width: 0px;
	padding: 0 0.2em 0 0.2em;
	white-space: nowrap;
}
nav ul li ul li {
	height: 2em;
	background-color: var(--dark);
	font-size: 100%;
	margin: auto;
}
nav ul li ul li:first-child {
	padding-top: 1em;
}
nav ul li ul li a:link, nav ul li ul li a:visited {
	color: var(--darkest);
}
.grad1-stop-0 {
  stop-color: var(--verylight);
  stop-opacity: 1;
}
.grad1-stop-100 {
  stop-color: var(--themecolor);
  stop-opacity: 0.7;
}
.banner {
    text-align: center;
    margin-bottom: 1em;
}
.adjust-text {
	position: relative;
	top: -0.3em;
}
.dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--verylight);
	box-shadow: 0 2px 5px var(--dark);
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 10;
	min-width: 150px;
}
.dropdown a {
	white-space: nowrap;
}
.main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 1rem;
}
.main-nav li {
	letter-spacing: 1px;
	position: relative;
}
.main-nav a {
	text-decoration: none;
	color: var(--themecolor);
	display: block;
	padding: 6px;
	border: none;
}
.main-nav a:hover {
	color: var(--darkest);
	text-shadow: 0 1px var(--shoutcolor2), -1px 0 var(--shoutcolor2), -1px -1px var(--lighter), 0 -1px var(--dimlight);
}
.main-nav li:hover .dropdown, .dropdown:hover {
	display: block;
}
.adstext {
	border: 0.2em ridge var(--lighter);
	border-radius: 10%;
	background-color: var(--lighter);
	color: var(--lighter);
	display: grid;
	grid-template-columns: [firstfontscolumn] 50% [secondfontscolumn] 50% [end];
	grid-template-rows: [twocolstworowsheaderrow] auto [firstfontsrow] auto [secondfontsrow] auto [last-line];
	gap: 0.2em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	margin: auto;
	font-size: 100%;
}
.numberofwebsites {
	position: absolute;
	top: 7.6rem;
	right: 48%;
	margin: 0px;
}
@media only screen and (max-width: 460px) {
	html { border: 0.2em ridge var(--lighter); font-size: 1em; }
	section { padding: 0.2em; }
	div#aside1 { margin-bottom: 1.1em; }
	nav ul li { margin: auto; }
	a .dropdown-toggle { margin-top: 0; text-align: start; }
	.adstext { width: 70%; font-size: 90%; }
	nav ul li ul li { height: 2em; font-size: 110%; }
	.subtitle { width: 90%; margin: auto; margin-top: 0.2em; }
	.numberofwebsites { top: 14rem; right: 38%; }
}
@media only screen and (min-width: 461px) and (max-width: 640px) {
	html { border: 0.2em ridge var(--lighter); font-size: 1.1em; }
	section { padding: 0.2em; }
	div#aside1 { margin-bottom: 1.1em; }
	nav ul li { margin: auto; }
	a .dropdown-toggle { margin-top: 0; text-align: start; }
	.adstext { width: 60%; font-size: 90%; }
	nav ul li ul li { height: 2em; font-size: 110%; }
	.subtitle { width: 90%; margin: auto; margin-top: 0.2em; }
	.numberofwebsites { top: 13rem; right: 38%; }
}
@media only screen and (min-width: 641px) and (max-width: 900px) {
	html { font-size: 1.2em; }
	.asidediv div#aside1 { margin-bottom: 1.1em; }
	nav ul li { margin: auto 1em auto 1em; }
	.adstext { font-size: 80%; }
	.numberofwebsites { right: 42%; }		
}
@media only screen and (min-width: 901px) and (max-width: 1400px) {
	html { font-size: 1.3em; }
	.asidediv div#aside1 { margin-bottom: 0.9em; }
	nav ul li { margin: auto 2em auto 2em; }
	.adstext { font-size: 80%; }
	.numberofwebsites { right: 44%; }	
}
@media only screen and (min-width: 1401px) and (max-width: 1900px) {
	html { font-size: 1.4em; }
	nav ul li { margin: auto 3em auto 3em; }
	.adstext { font-size: 100%; }
	.numberofwebsites { right: 46%; }
}