@font-face {
    font-family: "Furore";
    src: url("./Furore.otf");
}

@font-face {
    font-family: "Mainfont";
    src: url("./Mainfont/Mainfont-Regular.ttf");
}

@font-face {
  font-family: "Mainfont";
  src: url("./Saira-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
}

@font-face {
  font-family: "Mainfont";
  src: url("./Saira-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: italic;
}

body{
    margin: 0;
    padding: 0;
    background-color: #111111;
    font-size: medium; 
    font-family: Mainfont;
    color: #eee;
    line-height: 140%;
    word-spacing: 0.25ch;
}

a{
    color: inherit;
    /*text-decoration-color: ;*/
    text-decoration: underline solid #bb44aa 2px;
}

em, strong{
    color: #f2aee6;
}

h1, h2, h3{
    color: #bb44aa;
    font-family: "Mainfont";
    font-weight: 600;
}

b{
  font-weight: 650;
}

.wrapper{
    max-width: 900px;
    margin: 0 auto;
}

.container{
    background-color: #050505; 
    border: 2px solid #99cc11;
    padding: 0.5rem 1.5rem 2rem 1.5rem; 
    margin: 1rem 0;
}

img{
  max-width: 100%;
}

header{
  font-family: "Furore";
  background-color: #050505; 
  color: #99cc11;
  border-bottom: 2px solid #99cc11;
  padding: 1rem 5% 0.5rem 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

#header a{
  font-size: 45px;
  text-decoration: none; 
  color: #99cc11; 
  font-weight: normal;
}

nav{
  margin-top: 0.5rem;
  margin-bottom: 2px;
  font-size: 25px;
  font-weight: 600;
  display: flex;
  flex-direction: row;
}

.navlink a{
  padding-right: 20px;
  color: #99cc11;
  text-decoration: none;
  font-family: "Mainfont";
}

@media only screen and (max-width: 900px) {
    img{
        max-width: 100%;
    }
}

.label{
  background-color: #304020;
  font-style: italic;
  text-align: center;
  max-width: 50%;
  margin-left: 25%;
  padding: 5px;
  margin-bottom: 5px;
}

.contrast{
  display: flex; 
  background-color: #304020;
}

.date{
  float: right; 
  font-size: 11px;
}

.spoiler{
  color: #eee;
  background-color: #eee;
  line-height: 1;
}

.spoiler:hover{
  color: #271812;
}

.collapsible {
  background-color: #050505; 
  border: 2px solid #99cc11;
  padding: 1rem 1.5rem 1rem 1.5rem; 
  margin: 1rem 0 0 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: #eee;
  font-size: medium; 
  font-family: Mainfont;
}

.content {
  display: none;
  overflow: hidden;
}

hr{
  color: #99cc11;
}