@font-face {
        font-family: Fira Code;
        src: url(/fonts/FiraCode.ttf); /* https://fonts.google.com/specimen/Fira+Code */  
        }

        :root {
        --darkcolor: rgb(54, 8, 12);
        --contrast:rgb(177, 86, 111);
        --silver: rgb(237, 237, 237);
        --grey:#292929;
        --darkgrey:#181818;
        }

        body{
        background-color: var(--darkcolor);
        color:#000000;
        line-height: 1.5em;
        margin: 20px;
        font-family:Fira Code;
        }

        .container{
            padding: 20px;
            text-align: center;
            width: auto;
            height: 100%;
            color: #fff;
            overflow-y: auto;
        }

        .container a{
            color:var(--contrast);
        }
        a{
         color:rgb(43, 43, 43);
        }

        a:hover{
            color:var(--contrast);
        }
        
        .parent{
        display: grid;
        place-items: center;
        }

        table{
        width: 80%;
        }

        table, th, td {
        border: 1px solid rgb(192, 192, 192);
        border-collapse: collapse;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        }

        th, td{
        padding: 10px;    
        }


.book{
    width: 50%;
    height: 575px;
    border: 5px double rgb(255, 255, 255);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 1;
    margin: auto;
    background-color: var(--contrast);
    margin-top: 1%;
    padding: 0.5%;
}
 
 
.left{
    float: left;
    width: 49%;
    height: 99%;
    padding-left: 10px;
    overflow: auto;
    color:#3E3C3C;
    background-color: white;
    background-image: url('/images/graphics/whiteline.jpg');
    border: 1px solid black;
    border-radius: 5px;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
 
.left::-webkit-scrollbar { 
    display: none;
}
 
.right{
    float: right;
    width: 49%;
    height: 99%;
    overflow: auto;
    background-color: white;
    background-image: url('/images/graphics/whiteline.jpg');
    border: 1px solid black;
    border-radius: 5px;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
 
.right::-webkit-scrollbar { 
    display: none;
}

 
.binder{
    width: 4%;
    height: 60%;
    background-image: url('/images/graphics/binderrings.png');
    background-repeat: repeat-y;
    position: absolute;
    left: 48%;
}
 
hr{
    border: 2px solid #5568d5;
    border-radius: 5px;
}
 
li {
  list-style: none; /* Remove default bullet */
}

li::before {
  content: url('/images/graphics/wing-left.webp');
}

li::after {
  content: url('/images/graphics/wing-right.webp');
}


ul{
    margin: 0;
}
 
.box{
    width: 95%;
}
 
.box2{
    margin-left: 10%;
    margin-top: 5%;
    color:black;
}
 
@media screen and (max-width: 500px) {
    body{
        font-size: 4vw;
        height: 100vh;
    }
 
    .container{
        width: 95%;
        height: 90vh;
    }
 
    .right h1, .left h1, .header h1{
        font-size: 8vw;
    }
 
    .header{
        height: 10%;
    }
 
    .inner{
        height: 78.5vh;
    }
 
    .binder, #hide{
        display: none;
    }
 
    .left{
        float: none;
        width: 100%;
        height: 50%;
    }
 
    .right{
        float: none;
        width: 100%;
        height: 50%;
    }
}

/* PHOTOGRID STYLES */

.photo-container{
 display:flex;
 margin: auto;
 padding: 25px 0px 25px 0px;
 width: 85%;
 align-items:center;
 flex-wrap: wrap;
 justify-content: center;
 justify-items: center;
 border: dashed 1px #ffffff7a;
}

.card {
  background-color: #fff;
  padding: 10px 10px 20px 10px;
  max-width: 100%;
  height: 430px;
  margin: 10px 5px;
  transition: 0.3s;
  align-items: center;
}

.card:hover {
  rotate: 5deg;s
  transform: scale(0.9);
}

.card img {
  width: 100%;
  height: auto;
  transition: 0.2s;
  filter: grayscale(50%);
}

.card img:hover {
  filter: none;
}

.desc {
  text-align: left;
  color: black;
  width: 100%;
  line-height: 1.4em;
  display: inline;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 23%;
  padding: none;
}

.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

@media only screen and (max-width: 1650px) {
  .responsive {
    width: 30%;
    margin: 6px 0;
  }
  .card {
    height: 440px;
  }
}

@media only screen and (max-width: 1350px) {
  .responsive {
    width: 47%;
  }
  .card {
    height: 540px;
  }
}

@media only screen and (max-width: 1070px) {
  .responsive {
    width: 95%;
  }
  .card {
    height: auto;
  }
}