/* 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." */
   :root{
     --background-color: #1A141C;
     --background-opacity: 0.8;
     --content-background-color: #1A141C;
     --sidebar-background-color: #1A141C;
     
     --text-color: #BAC0C2;
     --border-color: #BAC0C2;
     --highlight-color: #9877C0;
     --sidebar-text-color: #BAC0C2;
     --link-color: #0DED31;
     --link-color-hover: #ADEEB8;
     --link-color-visited: #ADEEB8;
     
     --font: Agency FB, monospace;
     --heading-font: Lucida Console, monospace;
     --font-size: 20px;
     
     --margin: 40px;
     --padding: 25px;
     --border: 4px solid white;
     --round-borders: 6px;
     --sidebar-width: 250px;
   }

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("https://mildlycloudy.neocities.org/dither1.png");
  background-attachment: fixed;
  background-size: cover;
}

::selection {
  background: var(--highlight-color);
}

/*LINKS*/
a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}


/*LAYOUT*/
.layout {
  width: 100%;
  display: grid;
  grid-gap: 40px;
  grid-template:
  "header header"
  "sidebar main"
  "sidebar footer"
  /1fr 3fr
}

/*HEADER*/
header {
  grid-area: header;
  font-size: 1.2em;
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  justify-content: center;
  text-align: center;
  display: flex;
  }
  
  .header-content {
  padding: var(--padding);

}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}

.header-image img {
  width: 100%;
  height: auto;
}

/*SIDEBAR*/
aside {
  grid-area: sidebar;
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
  
  }
  
  .sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
  }
  
  .sidebar-section:not(:last-child) {
  margin-bottom: 3em;
  border-style: ridge;
  border-color: var(--border-color);
  border-width: 1px;
  padding: 10px;
  border-radius: var(--round-borders);
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

      /*NAVIGATION*/
nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* NAVIGATION IN HEADER */

header nav {
  margin-bottom: 0;
    text-align: center;
  justify-content: center;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

header nav ul li {
  position: relative;
}

header nav ul li:first-child > a {
  padding-left: 0;
}

header nav ul li:last-child > a {
  padding-right: 0;
}

/* DROP DOWN MENU */

header nav ul ul {
  background: var(--content-background-color);
  display: none;
  position: absolute;
  top: 100%;
  left: 10px;
  padding: 0.5em;
  z-index: 1;
  min-width: 100%;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

header nav ul li:hover ul,
header nav ul li:focus-within ul {
  display: block;
}

header nav ul li strong {
  color: var(--link-color);
  text-decoration: underline;
  font-weight: normal;
}

header nav ul ul li a {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

/*MAIN BODY*/
main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border-radius: var(--round-borders);
  }
  
  /*FOOTER*/
footer {
  grid-area: footer;
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: left;
  }
  
/*SKIP BUTTON*/
#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/*MOBILE*/
@media (max-width: 800px) {
  .layout {
    grid-template:
    "header"
    "sidebar"
    "main"
    "footer";
  }
  .body {
     font-size: 12px;
  }
}


/*ABOUT ME*/
/* Style the tab */
.tab {
  float: left;
  border-radius: var(--round-borders);
  background-color: var(--background-color);
  width: 200px;
  height: 750px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-color: #2A252B;
  color: var(--text-color);
  padding: 22px 16px;
  width: 100%;
  border-radius: var(--round-borders);
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--link-color-hover);
  color: white;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: var(--link-color-hover);
}

/* Style the tab content */
.tabcontent {
  float: left;
  background-color: #2A252B;
  border-radius: var(--round-borders);
  padding: 0px 12px;
  width: 70%;
  border-left: none;
  height: 600px;
  width: 300px;
}


/*CONTAINERS*/

.container {
  display: flex;
}

.element {
  padding: var(--padding);
    width: 550px;
    overflow: hidden;
}

.floatbox {
  border: dashed;
  border-color: var(--border-color);
  border-width: 1px;
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 20px;
  height: 60px;
  margin: 5px;
}

.humanmade {
  padding: 5px;
  background: #BAC0C2;
  margin: 5px;
  height: 60px;
}

.rupert {
  padding: 5px;
  margin: 5px;
}

.cover:hover{
  transition: transform 0.5s ease;
  transform: scale(1.20);
  overflow: hidden;
}