@import url("fonts/stylesheet.css");

:root{
  --darkcolor: #3A1C23; 
  --lightcolor: #F3E7E7; 
  --complementcolor: #A73DA4; 
  --contrastcolor: #a47de8; /*purple*/
  --contrastcolor2: #CA8595;
  --mainfont: MS UI Gothic, 'basiicmedium', Verdana, sans-serif;
  --headerfont: MS UI Gothic, 'basiicmedium', Verdana, sans-serif;
}

html{
  background-image: url("assets/bg.gif");
  background-attachment:fixed;
  background-repeat: repeat;
  background-color: var(--basecolor);
  font-size:14px;
 }
body {
  font-family: var(--mainfont);
  line-height: 1.4;
  word-wrap:break-word;
  color:var(--lightcolor);
 }
 
a {
  color:var(--contrastcolor);
  text-decoration:underline;
  padding: 2px;
  text-shadow:0px 0px 1px #F3E7E7;
  }

a:hover{
  text-decoration:none;
  }

h1,h2,h3,h4,h5{
  font-family: var(--headerfont);
  }
  
header, section{
  border:1px solid var(--lightcolor);
  }

/*home flex layout*/
    .homeflex{
      display: flex;
      flex-direction: row;
      gap: 15px;
      font-size: 1em;
      padding-left: 20px;
      padding-right: 20px;
    }

    .homeflex a {
      color: #aa93d2;
    }

    .homeleft{
      display: flex;
      flex-direction: column;
      gap: 15px;
      flex: 2;
    }

    .homeheader{
      background-image: url(assets/headerdoors.png);
      background-repeat: repeat-x;
      background-size: contain;
      height: 100px;
    }

    .homeright{
      display: flex;
      flex-direction: column;
      gap: 15px;
      flex: 1;
    }

    .homesec{
      background-color: var(--darkcolor);
      padding: 10px;
      color: var(--lightcolor);
    }

    .homesec ul{
      padding-left: 20px;
    }

    .homesublist{
      list-style-type: disc;
      border-left: 1px solid var(--contrastcolor2);
    }

    .wiz{
      color: var(--lightcolor);
    }

    .wiz figure{
      max-width: 120px;
    }

    .wiz img{
      width: 100%;
    }

    @media only screen and (max-width: 600px){
      .homeflex{
        flex-wrap: wrap;
        flex-direction: column;
        padding: 0;
      }
    }
    
/*
about page stuff

note: about page also uses the same flex css as the home layout

*/
.abtscroll{
  overflow:auto;
  height:350px;
}

/*index pages for subfolders*/
.indexmain{
  background-color:var(--darkcolor);
  padding:15px;
  height:80vh;
  margin:0 auto;
  overflow:auto;
  max-width:1000px;
}

.indexfoot{
  text-align:center;
  padding:5px;
}

.indexfoot a{
  background-color:var(--darkcolor);
}

.indexnarr{
  background-color:rgba(245, 255, 250, 0.15);
  padding:5px;
}