body {
      margin: 0;
      padding: 0;
      font-family: EB;
	  font-size: 1.2em;
	  background-image: url("../images/arrivalstar_bg.png");
	  background-repeat: repeat;

    }
	
.container {
  border: .5em solid #333;  /* The border around your container */
  border-radius: .2em;      /* Rounded corners (optional) */
  padding: 1.5em;            /* Space inside the box */
  margin: .05em auto;        /* Space outside the box, centered horizontally */
  max-width: 50em;      /* Maximum width of the container */
  width: 90%; 
  background-color: #f8f8f8; /* Optional background color */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional subtle shadow */
  box-sizing: border-box; /* makes padding & border count inside width */
  
    /* Keep content inside */
  overflow-wrap: normal;   /* breaks long words if needed */
  word-wrap: break-word;       /* older support for breaking words */
  word-break: keep-all;      /* breaks words on very long strings */
}

.container_top {
  border: .1em solid #333;  /* The border around your container */
  border-radius: .2em;      /* Rounded corners (optional) */
  padding: .5em;            /* Space inside the box */
  margin: .05em auto;        /* Space outside the box, centered horizontally */
  max-width: 50em;      /* Maximum width of the container */
  width: 90%; 
  background-color: #f8f8f8; /* Optional background color */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional subtle shadow */
  box-sizing: border-box; /* makes padding & border count inside width */
  
    /* Keep content inside */
  overflow-wrap: break-word;   /* breaks long words if needed */
  word-wrap: break-word;       /* older support for breaking words */
  word-break: break-word;      /* breaks words on very long strings */
}

.container_left {
  padding: 1.5em;            /* Space inside the box */
  margin: .05em;        /* Space outside the box, centered horizontally */
  max-width: 50em;      /* Maximum width of the container */
  width: 90%;
  min-height: 33em;
  background-color: #ffffff; /* Optional background color */
  box-sizing: border-box; /* makes padding & border count inside width */
  
    /* Keep content inside */
  overflow-wrap: normal;   /* breaks long words if needed */
  word-wrap: break-word;       /* older support for breaking words */
  word-break: keep-all;      /* breaks words on very long strings */
}

.book {
	  margin: auto;
      display: flex;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
      min-height: 20%;
	  min-: 90%;
      max-width: 90%;
      overflow: hidden;
      position: relative;
	  margin-bottom: .5%;
	  margin-top: .5%;
    }

.pages_desktop {
      column-count: 2;
      column-gap: 100px;
      padding: 80px;
	  padding-top: 40px;
      flex: 1;
      overflow-y: auto;
	  text-align: justify;
	  background:
	  linear-gradient(
		to right,
		#f4f4f4 0%,
		#f4f4f4 48%,
		#e4e4e4 49%,
		#eaeaea 50%,
		#fff 51%,
		#fff 100%
	  ),
		url("../images/paper.png");
		 background-blend-mode: multiply;

    }
	
.pages_mobile {
      column-count: 1;
      column-gap: 80px;
      padding: 40px;
	  padding-top: 20px;
      flex: 1;
      overflow-y: auto;
	  text-align: justify;
	  background: linear-gradient(
		to right,
		#e4e4e4 0%,
		#e4e4e4 2%,
		#e4e4e4 3%,
		#fff 10%,
		#fff 90%,
		#e4e4e4 100%
	  ),
	  		url("../images/paper.png");
		 background-blend-mode: multiply;
    }

.spine {
      width: 1px;
      background: #aaa;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

.nav-buttons {
	  display: flex;
	  justify-content: space-between;  /* push buttons to edges */
	  margin-top: .5%;
	  margin-left: 5%;
	  margin-right: 5%;
	}
	
.arrival {
		text-align: center;
	}
	
li {
		font-size: 1.2em;
		
	}
	
ul{
		list-style-type: none;
	}
	
a{
  color: blue; /* All links will be blue */
	}
	
h1{
		text-align: center;
	}
	
h2{
		font-family: OL;
		font-size: 3em;
		font-weight: 300;
		color: darkred;
		letter-spacing: 2px;
		-webkit-text-stroke-width: 2px;
		-webkit-text-stroke-color: gold;
		text-shadow: 2px 2px 1px black;
		text-align: left;
		margin-top: .5em;       /* removes top margin */
		margin-bottom: 0em;
	}
	
h3{
		font-family: OL;
		font-size: 3em;
		font-weight: 200;
		color: darkred;
		letter-spacing: 1px;
		-webkit-text-stroke-width: 1.5px;
		-webkit-text-stroke-color: gold;
		text-shadow: 1px 1px 1px black;
		margin-top: 0.0em;       /* removes top margin */
		margin-bottom: 0; /* smaller space below */
	}
	
h4{
		font-family: OL;
		font-size: 3.5em;
		font-weight: 400;
		color: darkred;
		letter-spacing: 1px;
		-webkit-text-stroke-width: 1.5px;
		-webkit-text-stroke-color: gold;
		text-shadow: 1px 1px 1px black;
	}
	
h5{
		font-family: OL;
		font-size: 2em;
		color: darkred;
		letter-spacing: 1px;
		-webkit-text-stroke-width: 1.5px;
		-webkit-text-stroke-color: gold;
		text-shadow: 1px 1px 1px black;
	}
	
h6{
		font-size: 1.5em;
		color: #3D3D3D;
		letter-spacing: 1px;
		-webkit-text-stroke-width: 1.5px;
		-webkit-text-stroke-color: silver;
		text-shadow: 1px 1px 1px black;
		margin-top: 0;       /* removes top margin */
		margin-bottom: 0.5em; /* smaller space below */
	}

.EB{
	font-family: EB;
}
	
.fix_stroke {
   paint-order: stroke fill;
	}
	
.align_right{
		text-align: right;
	}
	
.align_left{
		text-align: left;
	}
	
.align_center{
		text-align: center;
	}
	
.bride {
		color: blue;
	}
	
.listfont{
		font-size: 1.0em
		
	}
	
.no-wrap {

    display: inline-block;
 
	}

.wrapped-image {
		float: left;           /* pushes image to the left, lets text flow around it */
		margin: 0 5px 0px 0; /* space around image so text isn’t flush against it */
	}

.wrapped-text {
		float: left;           /* pushes image to the left, lets text flow around it */
		margin: -15px -18px 0px 0; /* space around image so text isn’t flush against it */
		width: 80px; 		/* optional: set size */
		height: 60px;
	}

	
.wrapped-text2 {
		float: left;           /* pushes image to the left, lets text flow around it */
		margin: -10px -40px 0px 0; /* space around image so text isn’t flush against it */
		width: 80px;          /* optional: set size */
		height: 40px;
	}
	
.wrapped-textB {
		float: left;           /* pushes image to the left, lets text flow around it */
		margin: -15px -30px 0px 0; /* space around image so text isn’t flush against it */
		width: 80px;          /* optional: set size */
		height: 45px;
	}
	
.invisible-anchor {
		color: transparent;            /* hide text visually */
		text-decoration: none;
		background: transparent;
		outline: none;
		/* ensure it still takes up space if you want */
	}
	
.indent{
	 text-indent: 40px;
}

.line-breaks {
  white-space: pre-line; /* preserves line breaks from the HTML source */
}

.redacted {
  display: inline-block;
  width: 5.5em;       /* acts like ~6 characters wide */
  height: 1.1em;
  background: black;
  vertical-align: middle;
}

.heaven {
    background: linear-gradient(to right, #ffffff, #6666ff, #0099ff , #FFF300, #ff3399, #6666ff, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s linear infinite;
    background-size: 400% 100%;
}
	
	/* fonts */
	/* fonts */
	@font-face {
	   font-family: EB;
	   src: url(../fonts/EBGaramond-VariableFont_wght.ttf);
}
	@font-face {
		font-family: EB;
		src: url(../fonts/EBGaramond-Bold.ttf);
		font-weight: bold;
}
	@font-face {
	   font-family: dos;
	   src: url(../fonts/ModernDOS9x16.ttf);
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}