@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&family=Courier+Prime&family=Indie+Flower&display=swap');

@font-face {
    font-family: 'Font1';
    src: url('fonts/1.otf') format('opentype');
}
@font-face {
    font-family: 'Font2';
    src: url('fonts/2.otf') format('opentype');
}
@font-face {
    font-family: 'Font3';
    src: url('fonts/3.otf') format('opentype');
}
@font-face {
    font-family: 'Font4';
    src: url('fonts/4.otf') format('opentype');
}
@font-face {
    font-family: 'Font5';
    src: url('fonts/5.otf') format('opentype');
}
@font-face {
    font-family: 'Font6';
    src: url('fonts/6.otf') format('opentype');
}
@font-face {
    font-family: 'Font7';
    src: url('fonts/7.otf') format('opentype');
}
@font-face {
    font-family: 'Font8';
    src: url('fonts/8.otf') format('opentype');
}
@font-face {
    font-family: 'Font9';
    src: url('fonts/8.otf') format('opentype');
}
@font-face {
    font-family: 'Font10';
    src: url('fonts/10.otf') format('opentype');
}
@font-face {
    font-family: 'Font11';
    src: url('fonts/12.ttf') format('truetype');
}
@font-face {
    font-family: 'Font12';
    src: url('fonts/12.ttf') format('truetype');
}

@font-face {
    font-family: 'FontGlass';
    src: url('fonts/Glass.ttf') format('truetype');
}
@font-face {
    font-family: 'FontGoose';
    src: url('fonts/Goose.ttf') format('truetype');
}

/* Add more @font-face blocks as needed */


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}

body {
    display: grid;
    place-content: center;
    height: 100vh;
    width: 100vw;
	overflow: hidden;
	background: url('wood.jpg') no-repeat center center fixed;
    background-size: cover;
}

.flipbook {
    width: 1500px;
    height: 1020px;
}

.flipbook .hard {
    background-size: cover;
    background: url('goose.png') no-repeat center center;
    color: #fff;
    font-weight: bold;
    border: none; 
}

.flipbook .hard small{
	font-style: italic;
	font-weight: lighter;
	opacity: 0.7;
	font-size: 14px;
}


.flipbook .page {
  background: linear-gradient(to bottom, #fdf6e3, #f5e9c6);
  background-image: repeating-linear-gradient(
    to bottom,
    #fdf6e3,
    #fdf6e3 28px,
    #d3bfa4 29px
  );
  font-family: 'Courier New', Courier, monospace;
  color: #3b2f2f;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.11);
}


.page img{
	width: 70%;
	object-fit: cover;
	margin: auto;
}

.flipbook .page small{
	font-size: 14px;
    margin-bottom: 10px;
}


.flipbook .page textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    resize: none;
    padding: 20px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    background: transparent;
    color: #000;
    box-sizing: border-box;
}


#editor-controls {
    font-family: "Poppins", sans-serif;
    margin: 10px auto;
    text-align: center;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    max-width: 900px;
}

#editor-controls select,
#editor-controls button {
    margin: 0 5px;
    padding: 6px 10px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    background: white;
}

#editor-controls button {
    font-weight: bold;
    background-color: #f0f0f0;
}

#editor-controls button:hover {
    background-color: #ddd;
}

.flipbook .hard:first-of-type {
  background: url('goose.png') no-repeat center center;
  background-size: cover;
  color: transparent; /* hides default text */
}

.flipbook .page.dragover {
  border: 2px dashed #666;
  background-color: #f5f5dc;
}

/* Keep the supplied journal design and allow it to fit a portfolio visitor's screen. */
body{height:auto;min-height:100vh;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 10px 25px}
.flipbook{margin:5px auto 0;flex:none}
#editor-controls{margin:5px auto 8px}
#saveStatus{color:#23523b!important}
@media(max-width:760px){#editor-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px}#editor-controls select,#editor-controls button{margin:2px}.flipbook .page textarea{padding:12px}}