:root {
  --text-color:#f8ffda;
  --background:#020301;
  --dark-green:#0e240a;
  --medium-green:#3e5c0f;
  --light-green:#81944b;
}
:root {
 box-sizing: border-box;
}


a {
  color: var(--text-color);
}

a :hover {
  color: gray;
}

hr {
 color:var(--text-color); 
}  

body { 
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
line-height: 1.2; 
background-image: url("https://images.pexels.com/photos/28126055/pexels-photo-28126055.jpeg");
background-size: cover;
}

.structure {
display: grid;
width: 1500px;
grid-gap: 10px;
grid-template: 
  "header header"
  "sidebar main"
  "sidebar footer"
  / 1fr 3fr
}

@media (max-width: 800px) {
  .structure { 
    grid-template:
    "header"
    "sidebar"
    "main"
    "footer"
  }
}

header { 
  grid-area: header;
  margin:10px;
  padding: 0px;
  font-family:'cantarell'; 
  font-size: 15px;
  color: var(--background);
}

header a:link {
  color: var(--background);
}

header a:visited {
  color: var(--background)
}

.header-banner img {
  width: 100%;
  height: auto;
  border: 1px solid var(--background);
  background-color:#FDFFD9;
}

.header-content {
  position: absolute;
  top: 12%;
  padding-left:40px;
  font-size: 20px;
}

header nav ul {
  position: absolute;
  padding-left: 60px;
  top: 20%;
  display: flex;
  justify-content: flex start;
  list-style-type: none;
}

.navigation-elements {
 padding: 5px 10px 10px 10px;
 font-size:16px;
}

header nav ul ul {
  background: var(--text-color);
  display: none;
  position: absolute;
  padding: 1.5em;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
  border:1px solid var(--background);
  z-index: 1;
  min-width: 100px;
  list-style-type: none;
}
.dropdown-about {
  top: 100%;
  left: 135px;
}


.dropdown-gallery {
  top: 100%;
  left: 200px;
}

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

header nav ul li strong {
  text-decoration: underline;
  font-weight:normal;
}

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


aside { 
  grid-area: sidebar;
  padding: 1.5em;
  margin: 10px;
  font-size: 20px;
  background-image: url(https://thubandraconis.neocities.org/decorations/IMG_0849.jpeg);
  background-color:#FDFFD9;
  background-size:700px,200px;
  border: 1px solid  var(--background);
  color:  var(--background);
  font-family: 'Cantarell';
}

.sidebar.title {
  color: var(--background);
  background: white;
}

.sidebar-section {
  padding: 10px;
  margin: 10px;
  border: 1px dashed var(--background);
}

.adds {
  border:1px solid var(--background);
  box-shadow: 7px 7px 0px 0px var(--background);
}

main { 
  grid-area: main;
  border:1px solid var(--text-color);
  margin: 10px;
  color: var(--text-color);
  padding: 20px;
  font-family: "cantarell";
background: linear-gradient(45deg, #020301 0%, #020301 5%,transparent 5%, transparent 10%, #020301 10%, #020301 15%,transparent 15%,transparent 20%, #020301 20%, #020301 25%,transparent 25%,transparent 30%, #020301 30%, #020301 35%,transparent 35%,transparent 40%, #020301 40%, #020301 45%,transparent 45%,transparent 50%, #020301 50%, #020301 100%,transparent 55%,transparent 60%, #020301 60%, #020301 65%,transparent 65%,transparent 70%, #020301 70%, #020301 75%,transparent 70%,transparent 80%, #020301 80%, #020301 85%,transparent 85%,transparent 90%, #020301 90%, #020301 95%,transparent 95%), linear-gradient(135deg, #020301 0%, #020301 5%,transparent 5%, transparent 10%, #020301 10%, #020301 15%,transparent 15%,transparent 20%, #020301 20%, #020301 25%,transparent 25%,transparent 30%, #020301 30%, #020301 35%,transparent 35%,transparent 40%, #020301 40%, #020301 45%,transparent 45%,transparent 50%, #020301 50%, #020301 55%,transparent 55%,transparent 60%, #020301 60%, #020301 65%,transparent 65%,transparent 70%, #020301 70%, #020301 75%,transparent 70%,transparent 80%, #020301 80%, #020301 85%,transparent 85%,transparent 90%, #020301 90%, #020301 95%,transparent 95%);
background-size: 3em 3em;
background-color: #0E240A;
opacity: 1;
  }
  
  .button-row {
   display: flex;
   justify-content: space-evenly; 
  }  
  
  .button-row :hover {
   transform: scale(1.2) 
  }  
    
  section {
    margin: 20px;
  }
 
.changelog-to-do {
  display: flex; 
}

.changelog-to-do > * {
  flex: 1 1 0;
}

.changelog {
  color: var(--text-color);
  flex: 20%;
  margin:30px;
  padding: 10px; 
   border: 1px solid var(--text-color); 
  background: var(--background);
  opacity: 1;
  box-shadow: 7px 7px 0px 0px var(--light-green);
}
 
.changelog-content {
  color: var(--text-color);
 border: 1px solid var(--text-color); 
 padding: 10px;
 height: 100px;
 margin: 0px;
 overflow-y:auto;
 background: linear-gradient(var(--background), var(--medium-green));
}

.to-do {
  color: var(--text-color);
  flex: 20%;
  margin: 30px;
  padding: 10px;
  border:1px solid var(--text-color);
  background: var(--background);
  opacity: 1;
  box-shadow: 7px 7px 0px 0px var(--light-green);
}

.to-do-content { 
 color: var(--text-color);
 border: 1px solid var(--text-color); 
 padding: 10px;
 height: 100px;
 overflow-y: auto;
 background: linear-gradient(var(--background), var(--medium-green))
}
  
footer { 
grid-area: footer;
font-family: "cantarell";
margin: 10px;
border:1px solid var(--text-color);;
color: var(--text-color);
background: linear-gradient(135deg, #3E5C0F80 50%, transparent 0),linear-gradient(-135deg, #3E5C0F80 50%, transparent 0);
background-size: 3.2em 3em;
background-color: #0E240A;
opacity: 1;
}