/* 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." */


body {
  background-image: url("https://f1shb0ne.neocities.org/DieToteninsel.png");
  background-repeat: no-repeat;
  background-color: #7B6CA3;
  color: white;
  font-family: 'Berylium','Vivaldi', 'Garamond';
  margin-left: 0%;
  margin-right: 0%;
  width: 99%;
  border: solid #D3C1DE;
  border-width: 15px 0.2em 0.5cm;
  padding: 0px;
  text-align: center}
  
  h {text-shadow: 0 0 10px #FFFFFF;
  height: 50px;
  width: auto;
  font-family: 'Vivaldi'
  }
  h1 {text-shadow: 0 0 10px #FFFFFF;
  height: 50px;
  width: auto;
  font-family: 'Vivaldi'
  }
  h3-h4 {text-shadow: 0 0 10px #FFFFFF;
  height: 100px;
  width: auto;
  font-family: 'Vivaldi'
  }
  
  w3-container {
    width: 60%;
    margin-bottom: 2;
    background-color: purple;
  }
  a:link {
  color:#7B6CA3 ;
  }
  a:visited {
  color: #7B6CA3;
  }
  a:hover{
  color: yellow;
  }a:active {
  color: yellow;
  }
  c:plain {
  color: black;
  }
  
  p {height: 10px;
  width: auto;
  font-family:'Garamond',italic;
  }
  p2 {font-family:'Vivaldi', italic;
  color:#7B6CA3}
  p3 {font-family:'Vivaldi', italic}
  
  ul {
    height: 9px;
    margin-right: 40;
  margin-left:40;
  padding: 10px;
  font-family:'Garamond', italic;
  }
  
  img {
  border-radius: 10px;
  width: 500px;
  height: auto;
  display: block;
  margin: auto;
  }
  
  .wrapper {
  background: none;
  top: 0;
  margin: 0 auto;
  width: 870px;
  }
  
.sidebar-left, .sidebar-right {
  width: 175px;
  }
  
.main {
  width: 500px;
  margin-left: 185px;
  }
  
.sidebar-left {
  margin-left: 0px;
  }
  
.wrapper, .links a {
  color: #4f3d46;
  }
  
.box {
  border: 3px double #333;
  background: #fff;
  padding: 0;
  }
  
  .a {
  display: inline-block;
  width: 100px;
  height: 30px;
  padding: 10px;
  border: 0px solid ;    
  background-color: #D3C1DE;
  border-radius: 8px;
  font-family:'Vivaldi'}
  .b {
  list-style-position: inside;
  display: inline-block;
  width: 200px;
  height: auto;
  padding: 10px;
  border: 1px solid #D3C1DE;    
  background-color: color;
  text-align: left;
  font-family:'Garamond', italic} 
  .c {
  list-style-position: inside;
  display: inline-block;
  width: 100px;
  height: auto;
  padding: 10px;
  border: 1px solid #D3C1DE;    
  background-color: black ;
  text-align: center;
  font-family:'Garamond', italic}
  
 left-sidebar {
        width: 100%;
        display: block;
        order: 2;
        margin-right: 0;
        margin-bottom: 50px;}
        
        @media(max-width:880px) {
  .wrapper {
    width: calc(340px + 50vw);
    }
  .sidebar-left, .sidebar-right {
    width: 160px;
    }
  .main {
    width: 50vw;
    margin-left: 170px;
    }}


/*Mobile compatibility.*/  
@media(orientation:portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .sidebar-left, .main, .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
    }
  }
  @media(max-width:880px) {
  .wrapper {
    width: calc(340px + 50vw);
    }
  .sidebar-left, .sidebar-right {
    width: 160px;
    }
  .main {
    width: 50vw;
    margin-left: 170px;
    }}}
        
/*center
  display:block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;*/