:root {
  --background: url("/graphics/swirlbg.png") fixed;
  --window-top: #583e8a;
  --window-bg: #c4bad6;
  --text-top: white;
  --text: black;
  --button: #4B76B4;
}

[data-theme='dark'] {
  --background: url("/graphics/Art/dark.png") fixed;
  --window-top: #7f7cba;
  --window-bg: #272550;
  --text-top: black;
  --text: white;
  --button: #EED76E;
}

[data-theme='eye'] {
  --background: url("/graphics/Art/eyeline.png") fixed;
  --window-top: #420913;
  --window-bg: #ded5ce;
  --text-top: white;
  --text: black;
  --button: #CC5352;
}

[data-theme='aroace'] {
  --background: url("/graphics/Art/aroaceflo.png") fixed;
  --window-top: #0c4466;
  --window-bg: #e8ddac;
  --text-top: white;
  --text: black;
  --button: #4090ad;
}

[data-theme='pastel'] {
  --background: url("/graphics/Art/pasteltile.png") fixed;
  --window-top: #f28aa2;
  --window-bg: white;
  --text-top: white;
  --text: black;
  --button: #739CF9;
}

body {
  background: var(--background);
  background-position: center;
  font-family: "Open Sans", serif;
  font-size: 16px;
  color: var(--text);
  }  
  
/*Code shared by all window-style boxes. To see what different specific sidebar classes look like, check the demo page.*/
.main, .main-first, .sidebar, .box, .sidetheme{
  background: var(--window-bg);
  border-radius: 5px;
  border: 1px solid var(--window-top);
  }
  
/*The title bar at the top of window boxes.*/
.title-bar, .box-title-bar {
  background: var(--window-top);
  color: var(--text-top);
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: -5px;
  }
  
/*The title bar of boxes has slightly more padding, since there's more room to space text.*/
.box-title-bar {
  padding: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  }
  
/*For the symbol in the top right corner.*/
.right {
  float: right;
  margin-right: 5px;
  font-family: "Arial", sans-serif;
  line-height: 12px;
  }
  
.main, .main-first {
  margin-top: 30px;
  margin-left: 35%;
  width: 40%;
  }
  
/*Make sure the first main box has an extra top margin so it's not hidden by the header*/
.main-first {
  margin-top: 30px;
  }

.sidebar {
  position: fixed;
  width: 200px;
  min-height: 75px;
  margin-top:20px;
  margin-left:17%;
  }
  
button { /*theme buttons*/
  background: var(--button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25em;
  cursor: pointer;
  color: var(--text-top);
    padding:10px;
    width: 40px;
    height: 40px;
    border-radius:50%;
    border: none ;
    list-style-type:none;
    margin-top:15px;
    margin-bottom:15px;
    margin-right:5px;
    }

.sidecon { /*sidebar buttons*/
  background: var(--button);
  text-align: center;
  cursor: pointer;
  color: var(--text-top);
    padding:10px;
    padding-top:7px;
    padding-bottom:7px;
    border-radius:20px;
    list-style-type:none;
    margin-top:10px;
    width: 75%;
    margin-left: -12px;
    }

  .sidecon a{
    color: var(--text-top);
    text-decoration: none;
    }
    
.sidetheme {
  position: fixed;
  width: 275px;
  min-height: 75px;
  margin-top:375px;
  margin-left:15%;
  }
    
.inner {
  padding: 10px;
  padding-bottom: 5px;
  padding-top: 0px;
}
  
/*Prevent image overflow*/  
.main img, .main-first img, .sidebar img {
  max-width: 100%;
  height: auto;
  }
  
/*Text section in sidebar.*/  
.sidebar-description {
  padding: 10px;
  align-items: center;
  justify-content: center;
  display: flex;
  }
  
.sidebar-links {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  background: black;
  color: white;
  width: 100%;
  height: 30px;
  }
  
.button {
  padding: 5px;
  padding-left: 10px;
  display: inline-block
  }
  
.sidebar-links a {
  color: white;
  text-decoration: none;
  }
  
.sidebar-links a:hover {
  color: #bbb;
  }
  
.link {
 color: var(--button);
 text-decoration: wavy underline;
 margin-bottom: 10px;
}
  
.dd {
  margin-bottom: 10px;
  
  
/*Text at bottom below main divs*/
.footer {
  text-align: right;
  margin-left: 475px;
  width: 500px;
  font-size: 13px;
  font-style: italic;
  margin-top: 20px;
  margin-bottom: 40px;
  }
  
/*For narrow screens*/
@media (max-width: 1100px) {
    .sidebar {
      width: 275px;
      margin-left: 10px;
      }
    .main, .main-first {
      width: 420px;
      margin-left: 315px;
      }
  }
  
/*Mobile compatibility.*/
@media (orientation: portrait) {
  .sidebar {
    margin: 0 auto;
    position: static;
    margin-top: 60px;
    margin-bottom: 15px;
    width: 90%;
    }
    
  .sidetheme{
    margin: 0 auto;
    position: static;
    margin-top: 20px;
    margin-bottom: 15px;
    width: 90%;
    }
    
  .sidecon { /*sidebar buttons*/
  margin-left: 8px;
  }
    
  .main, .main-first {
    margin: 0 auto;
    margin-top: 20px;
    width: 90%;
    }
    
  .footer {
    width: 90%;
    padding: 5%;
    margin: 0 auto;
    }

  }