*{ box-sizing: border-box;}

.josefin-sans-regular {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.alike-angular-regular {
    font-family: "Alike Angular", serif;
    font-weight: 400;
    font-style: normal;
  }


body {
  overflow-x: hidden;
  background-color: #400909;
  font-family: "Josefin Sans", sans-serif;
}

  
.page {
  max-width: 70vw;
  margin:auto;
  filter: drop-shadow(1px 2px 12px #210101e7);
}
.header{
  text-align: center;
}

h1, h2{
  font-family: "Alike Angular", serif;
}
h2{
  margin:0;
  padding:0;
}
a{
  text-decoration: none;
  font-weight: 540;
  color:#660303
}
img{
  max-width: 100%;
}
.mat {
  background-color:rgb(224, 224, 222);
  color:#2b2b2be7;
  padding:8px;
  margin:2px
}
.flex{
  display:flex;
}

img {
  max-height: 100%;
  height: auto;
}

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
  border-bottom: 1px solid #2e2e2e42;
}

li:before {
  content: "✦";
  padding-right: 5px;
}
.nav{
  display: flex;
  justify-content: space-around;
}

.glry{
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
  img{
    max-height: 18em;

  }}

  .roco{
    display:flex;
   flex-direction: row;
   
  }
  
  .ch{
    flex-shrink: 1;  
  img{
    width: 100%

  } }

 .textbox,.side{
    background:black;
    padding:1em;
    margin:1.2em}
    .side {
        flex-shrink:1;
        width:fit-content;
        height: 10em;
        overflow: scroll;overflow-x: hidden;
    }
    .textbox{
        flex-grow:1;
        height: 90vh;
    }

@media only screen and (max-width: 550px) {

.page {
  max-width: 90vw;}

}
@media only screen and (max-width: 900px) {
.roco{
    flex-direction:column;
  }
.ch{
    flex-grow: 1;  
  img{
    width: 100%

  }
}
 .side {
        width:90%;
text-align: center;
       li{
        padding: 0.2em;
       }
    }
}