:root {
    --darkest: #aa3e21;
    --light: #8cb2c3;
    --lightest: #e6dcd1;
    --dark: #b58d6a;
    --black: #2e2422;
}

#toggleon {
  display: none;
}

@font-face { font-family: "Shine Typewriter"; src: url(./ShineTypewriter.ttf) format("truetype"); }

::selection {
    background: #aa3f2183;
}

a {
  color: #f4f9da;
  text-decoration: none;
}

h3 {
  font-family: "Caudex", Courier, monospace;;
  color: var(--darkest);
}

p {
  text-indent: 1rem;
}

blockquote {
  border-style: none none none solid;
  border-radius: 4px;
  border-color: var(--dark);
  padding-left: 2rem;
}

body {
  background-color: var(--black);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 1.25rem;
  caret-color: #ffffff00;
  
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: min(85vw,60rem);
  background-color: var(--lightest);
  color: var(--black);
  font-family: "Shine Typewriter", Courier, monospace;
  padding: 6rem 3rem 3rem 3rem;
 border-radius: 5px;
  border: var(--dark) double 5px;
}

#home {
  position: absolute;
  top: 3rem;
  left: 3rem;
  color:var(--dark);
  background-color: var(--lightest);
  padding: 0.4em 0.5em 0.4em 0.5em;
  text-decoration: underline;
  font-size: 1rem;
  border-style: none;
}

.navigation {
  width: calc(100% - 5px);
  display: flex;
  justify-content: center;
  background-color: var(--light);
  color:#f4f9da;
  text-shadow: 2px 2px var(--dark);
  border-color: var(--darkest);
  border-style: double double none double;
  border-radius: 5px;
}

.navbutton {
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.reblog {
  text-align: center;
  color: var(--dark);
}

.summary {
  color: var(--lightest); 
  padding-left: 3rem;
  margin: 1rem;
  font-size: 2rem;
  background-size: cover;
  text-shadow: 0 0 30px 10px #69497a84;

}

#jjbasummary {
  background-image: url(asset-jjba.webp);
}

#uminekosummary {
  background-image: url(asset-umineko.webp);
  
}

#fatamorusummary {
  background-image: url(asset-fatamoru2.webp);
  
}

#skusummary {
  background-image: url(asset-sku.webp);
  
}

#desummary {
  background-image: url(asset-de.webp);

}

#noirsummary {
  background-image: url(asset-noir.webp);
 
  
}


#main-button {
  background-color: var(--dark);
  text-shadow: 2px 2px var(--darkest);
}

.divider {
  background-image: url(asset-piano.webp);
  background-repeat: repeat-x;
  background-size: contain;
  width: 100%;
  height: 18px;
  
}

.togglenav {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.togglebutton {
  font-size: 1rem;
  font-family: "Caudex", Courier, monospace;
  font-weight: 600;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
  margin: 0 0.3rem 0.6rem 0.3rem;
  color: var(--darkest);
  background-color: var(--lightest);
  border-style: solid none solid none;
  border-width: 2px;
  border-color: var(--dark);

}
.main {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.feed {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

summary::marker {
  content: "";
}

summary {
  background-image: linear-gradient(to left, var(--light)40% , var(--darkest), var(--dark));
  color: var(--lightest);
  text-shadow: 2px 1px var(--black);
  box-shadow: 0px -4px 6px -1px var(--lightest) inset;
  border-radius: 3px;
  font-size: 1.5rem;
  padding: 0.5rem 0.5rem 0.6rem 1.5rem;
  
}

::details-content {
  margin: 0.8rem 2rem 0.5rem 2rem;
}

::details-content:not([open]) {
  margin:0.2rem;
}

.screenshot {
  width:max(36rem, 60%);
  margin: 1rem;
  border: var(--black) 2px solid;
  border-radius: 4px;
}

.date {
  font-size: 1.2rem;
  font-family: "Caudex", Courier, monospace;
  border-style: solid none solid none;
  border-width: 2px;
  border-color: var(--dark);
  padding: 0.3rem;
  color: white;
  text-shadow: 1px 1px var(--dark);
  background-image: linear-gradient(to right, var(--lightest), var(--dark), var(--lightest));
}

.footer {
  color:var(--dark);
}