:root {
  --bodyfont:sans-serif;
  --headerfont:Georgia, serif;
  --background:#3D0C0C;
  --color:#ffffff;
  --block:#000000;
  --link:darkred;
  --linkhover:#ffffff;
  --h1:darkred;
  --h2:darkred;
  --h3:darkred;
  --h4:darkred;
  --sidebar:#000000;
  --sidebarcolor:#ffffff;
  --title:darkred;
  --sidebarlink:darkred;
  --sidebarlinkhover:#ffffff;
  --menubg:darkred;
  --menucolor:#000000;
  --menubghover:#000000;
  --menucolorhover:darkred;
}

* {
  margin:0;
  padding:0;
}

body {
  color:var(--color);
  font:1rem sans-serif;
  background-attachment:fixed;
  background-image:url("bg.jpg");
  cursor:url("cursor.gif"), default;
  background-color:var(--background);
}

#sidebar-content {
  padding:10px;
  text-align:left;
  color:var(--sidebarcolor);
  background:var(--sidebar);
}

#sidebar-content header {
  margin:8px;
  color:var(--title);
  font:1.8em var(--headerfont);
}

#sidebar-content p a {
  transition:0.5s ease;
  color:var(--sidebarlink);
  cursor:url("cursor.gif"), default;
}

#sidebar-content p a:hover {
  transition:0.5s ease;
  color:var(--sidebarlinkhover);
  cursor:url("cursor.gif"), default;
}

.icon {
  text-align:center;
}

.icon img {
  margin-top:5px;
  max-width:200px;
}

#main-menu {
  width:100%;
  font:1.1em var(--headerfont);
}

#main-menu ul {
  list-style:none;
}

#main-menu li a {
  padding:7px;
  color:var(--menubg);
  transition:0.5s ease;
  text-decoration:none;
  background:var(--menucolor);
  border:2px solid var(--link);
  cursor:url("cursor.gif"), default;
}

#main-menu li a:hover, #main-menu li a:focus {
  transition:0.5s ease;
  color:var(--menubghover);
  background:var(--menucolorhover);
  cursor:url("cursor.gif"), default;
}

section, footer, #sidebar-content {
  border:3px solid var(--title);
}

section p {
  margin-bottom:0;
}

main section {
  padding:15px;
  margin-bottom:10px;
  background:var(--block);
}

main h1 {
  color:var(--h1);
  font:1.8em var(--headerfont);
}

main h2 {
  color:var(--h2);
  font:1.5em var(--headerfont);
}

main h3 {
  color:var(--h3);
  margin-top:10px;
  font:1.3em var(--headerfont);
}

main h4 {
  color:var(--h4);
  font-style:italic;
  font:1.1em var(--headerfont);
}

p {
  line-height:1.5;
  margin:10px 0 10px 0;
}

main a {
  color:var(--link);
  transition:0.5s ease;
  cursor:url("cursor.gif"), default;
}

main a:hover {
  transition:0.5s ease;
  color:var(--linkhover);
  cursor:url("cursor.gif"), default;
}

main ul {
  margin-left: 25px;
  list-style-position:outside;
}

main ul li {
  line-height:1.5;
}

main img {
  max-width:100%;
}

main input, textarea, select, button {
  margin:2px;
  padding:8px;
  border:2px solid;
  color:var(--color);
  background:var(--block);
  font:1rem var(--bodyfont);
}

#main-footer {
  padding:5px;
  text-align:center;
  margin-bottom:10px;
  background:var(--block);
}

#container {
  padding:10px;
  width:calc(100% - 20px);
}

#sidebar-content {
  margin-bottom:15px;
  width:calc(100% - 25px);
}

#main-menu li {
  margin-bottom:15px;
  display:inline-block;
}

.desktop {
  display:none;
}

.outlink:after {
  content:"⤤";
}

::selection {
  color:#000000;
  background-color:var(--title);
}

::-webkit-scrollbar {
  width:auto;
  color:var(--title);
}

::-webkit-scrollbar {
  width:16px;
}

::-webkit-scrollbar-track {
  background:#000000;
}

::-webkit-scrollbar-thumb {
  background:var(--title);
  border:2px solid #000000;
}

::-webkit-scrollbar-thumb:hover {
  cursor:pointer;
  background:#000000;
  border:1px solid var(--title);
  cursor:url("cursor.gif"), default;
}

::-webkit-resizer {
  color:var(--title);
  background:#000000;
  cursor:url("cursor.gif"), default;
}

@media screen and (min-width:800px) {
  #container {
    gap:10px;
    width:90%;
    display:flex;
    max-width:950px;
    margin:0 auto;
  }
  
  #sidebar {
    flex:1 1 calc(25% - 10px);
  }
  
  #sidebar-content {
    top:10px;
    position:sticky;
  }
  
  #main-menu li {
    display:block;
    margin:0;
  }
  
  #main-menu li a {
    display:block;
  }
  
  main {
    gap:10px;
    display:flex;
    flex-wrap:wrap;
    flex:1 1 calc(75% - 30px);
  }
  
  main section {
    margin:0;
  }
  
  #main-footer {
    flex:1 1 calc(100% - 50px);
  }
  
  .full {
    flex:1 1 calc(100% - 50px);
  }
  
  .half {
    flex:1 1 calc(50% - 50px);
  }
  
  .third {
    flex:1 1 calc(33% - 50px);
  }
  
  .twothird {
    flex:1 1 calc(66% - 50px);
  }
  
  .quarter {
    flex:1 1 calc(25% - 50px);
  }
  
  .threequarter {
    flex:1 1 calc(75% - 50px);
  }
  
  .desktop {
    display:block;
  }
}