/*UNIVERSAL*/
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
:root {
  --border:#e3391f;
  --text:#f2b329;
  --seafoam:#67b984;
  --dark-seafoam:#3f8d7c;
}
  
/*BASIC*/
body {
  background-image:url("/graphics/index/bg.png");
  background-color:#000;
  color:var(--text);
  font-family:'Roboto', sans-serif;
  font-weight:300;
  font-size:100%;
}
section {
  background-color:rgba(0,0,0,.65);
  border:var(--border) double;
  border-radius:7.5px;
}
button {
  width:max-content;
  height:40px;
  padding:0 7.5px;
  margin-left:10px;
  
  background-color:#000;
  border:#ff9900 solid;
  border-radius:5px;
  color:#f2b329;
}
hr {
  height:1px;
  background-color:var(--border);
  border:none;
}
h1 {
  text-align:center;
  font-size:2vw;
}
p {
  font-size:17px;
}
ul {
  padding:5px 0 10px 35px;
  line-height:110%;
}
ol {
  line-height:110%;
}
textarea {
  white-space:pre;
  overflow-wrap:normal;
  overflow-x:scroll;
  height:30px;
  width:60%;
}
  
/*LINKS*/
a:link, a:visited {
  color:var(--dark-seafoam);
}
a:hover {
  color:var(--seafoam);
}

/*GRID*/
.grid-container {
  display:grid;
  grid-template-columns: 19vw 45vw 19vw;
  grid-template-rows:repeat(4, auto);
  grid-gap:5px;
  justify-content:center;
  align-content:start;
  align-items:start;
}
.grid-container > section, .grid-container > div {
  height:min-content;
}
.grid-container .left {
  grid-column:1;
}
.grid-container .middle {
  grid-column:2;
}
.grid-container .right {
  grid-column:3;
}
.frog {
  grid-row:4;
}



/*Images*/
.l {
  margin-left:10px;
}
.r {
  margin-right:10px;
}
.ad {
  width:50%;
}
.ankha {
  width:30%;
  border-radius:2px;
  margin:0 5px 15px 5px;
}
.icon {
  border-radius:5px;
  float:left;
  margin:7.5px 7.5px 0 7.5px;
  width:20%;
}
.umbreon {
  width:7%;
}
.jirachi {
  width:10%;
  margin-bottom:2px;
}

/*Custom*/
.container {
  display:flex;
  justify-content:center;
  background-color:rgba(0,0,0,.4);
  width:100%;
}
/*Website logo*/
.logo {
  width:40vw;
}
/*Logo animation*/
.floating {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes floating {
  0% {transform:translate(0,0px);}
  50% {transform:translate(0,5px);}
  100% {transform:translate(0,-0px);}
}
/*Autism zone*/
.autism {
  display:flex;
  justify-content: space-between;
  align-items:center;
  border:thick #000000 solid;
  background-color:#fd5b00;
  height:100%;
  width:70%;
}
.tismHeader {
  color:#000;
  font-family:verdana;
  font-size:27.5px;
  font-feature-settings: 'smcp';
}
  
/*Content Left*/
.intro {
  color:var(--seafoam);
  margin:0 15px 15px 15px;
}
.bozone {
  text-align:center;
  text-decoration:underline;
  margin:10px 0 5px 0;
}
.notice {
  text-align:center;
  font-size:22px;
  margin:8px;
}
.mainTxt {
  color:var(--seafoam);
  margin:7.5px 2.5px 7.5px 7.5px;
  line-height:105%;
}

/*Updates*/
.catHeader {
  border-top:var(--border) double;
  border-bottom:var(--border) double;
}
.catTitle {
  font-weight:normal;
  margin:5px;
}
.catalog {
  width:100%;
  flex:auto;
  max-height:40vh;
  background-color:rgba(8, 34, 29, 0.5);
  border-radius:0 0 10px 10px;
  padding:5px 5px 0 5px;
  overflow:auto;
}
.updateHeader {
  font-weight:bold;
  color:var(--text);
  margin-top:15px;
}
.updates {
  padding-left:25px;
  margin:5px 0;
  font-size:17px;
}
ol.updates {
  padding-left:60px;
}

/*Footer*/
.footerText {
  text-align:center;
  font-size:16px;
  margin:5px 0 15px 0;
}
.shadow {
  max-width:25%;
  margin:auto;
  background-color:rgba(0,0,0,.5);
  border-radius:5px;  
}

/*Weekly + Archive*/
.weekly {
  padding:5px 0;
  text-align:center;
}
.wTitle {
  margin-bottom: 10px;
  text-decoration: underline;
}
.wContent {
  margin: 0 2.5px;
  text-align:center;
}
.wArchive {
  font-style:italic;
  margin-left:25px;
  margin-bottom:10px;
}
.arcTitle {
  font-style:italic;
  margin:0 0 35px 25px;    
}
.archive {
  text-align:left;
  font-style:italic;
  margin:10px 0 5px 5px;
}

/*Mutuals*/
.mTitle {
  margin:10px 5px;
  text-decoration:underline;
}
.indexButtons {
  vertical-align:bottom;
}
.linkButtons {
  text-align:center;
  margin-bottom:10px;
}
.linkText {
  font-size:18px;
  margin-left: 15px;
  line-height:125%;
}
.subtitle {
  margin:5px 0 0 10px;
  font-style:italic;
}

/*Art prompt generator*/
.promptTitle {
  margin-bottom:0px;
  text-decoration:underline;
}
.promptHeader {
  margin:10px 0 10px 10px;
  text-decoration:underline;
}
.promptTop {
  height:35vh;
}
.prompt {
  margin:0 0 20px 25px;
  font-size:17.5px;
  padding:0;
}
.promptHistory {
  width: 100%;
  height: 37.5vh;
  border-radius:0 0 10px 10px;
  padding:5px;
  padding-bottom:0;
  overflow: auto;
  font-size: 11pt;
  line-height:125%;
}
.refs {
  margin:5px 0 0 5px;
  text-decoration:underline;
}
.warning {
  margin:0 0 10px 0;
  font-size:16px;
  text-align:center;
  font-style:italic;
}
.abt {
  margin-bottom:5px;
  text-decoration:underline;
}


/*Music player*/
.musicplayer {
  border:var(--border) double;
}
.songName {
  border-bottom:#ff9900 solid;
}
.controls {
  color:#ff9900;
}