@charset "utf-8";

@import 'reset.css';
@import 'normalize.css';
@import 'font.css';
@import 'menu.css';
@import 'frames.css';
@import 'paging.css';
@import 'toc.css';
@import 'search.css';
@import 'draw.css';
@import 'userSave.css';
@import 'layerPopup.css';
@import 'memo.css';
@import 'link.css';
@import 'thumbnail.css';
@import 'bookmark.css';
@import 'print.css';
@import 'progress.css';
@import 'minimap.css';
@import 'rememberPage.css';

:root {
  --viewer-height: 1440px;
  --line-color: #25314c;
  --layer-popup-border: 3px solid #25314c;
  --layer-popup-radius: 30px;
  --layer-popup-button-radius: 6px;
  --layer-popup-button-color: #48629b;
  --user-button-size: 60px;
}

* {
  -webkit-print-color-adjust: exact !important;   /* Chrome, Safari, Edge */
  color-adjust: exact !important;                 /*Firefox*/
}

body {}
.wrap {
  position: absolute;
  width: 2560px;
  height: var(--viewer-height);
  font-size: 20px;
  font-family: lineSeed_B;
  user-select: none;
  overflow: hidden;
}

/* alert */
.alert {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 250px);
  width: 500px;
  height: 200px;
  padding: 2px 0;
  color: #FFF;
  font-size: 30px;
  background: #5d7ec7;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.alert.on {
  opacity: 0;
  display: flex;
  animation: show-alert 1.5s ease-in-out;
  z-index: 100;
}

.wrap.run-toc .topMenu,
.wrap.run-toc .bottomMenu,
.wrap.run-search .topMenu,
.wrap.run-search .bottomMenu,
.wrap.run-progress .topMenu,
.wrap.run-progress .bottomMenu,
.wrap.run-drawing .topMenu,
.wrap.run-drawing .bottomMenu,
.wrap.run-memo .topMenu,
.wrap.run-memo .bottomMenu,
.wrap.run-link .topMenu,
.wrap.run-link .bottomMenu {
  display: none;
  opacity: .5;
  pointer-events: none;
}

.fadein {animation: fadein .3s ease-in-out forwards;}
.fadeout {animation: fadeout .3s ease-in-out forwards;}

/************************ keyframes ***********************/
@keyframes menu-opened {
  100% {transform: translateY(0);}
}
@keyframes menu-closing {
  0% {transform: translateY(0);}
}
@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeout {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes show-alert {
  0% {opacity: 0;}
  15% {opacity: 1;}
  85% {opacity: 1;}
  100% {opacity: 0;}
}
/**********************************************************/


/********************* color variation ********************/
/* purple */
section.PURPLE {
  border: 2px solid #bcb8f8;
  /* background: linear-gradient(to bottom, rgba(136, 131, 224, .9) 30%, rgba(136, 131, 224, .9)); */
  background: rgba(136, 131, 224, .9);
}
.PURPLE button.toggle:before {
  background-color: rgba(145, 140, 226, 1);
}
  
/**********************************************************/


/*************************** test *************************/
.wrap {
	background: #e2e2e2;
  /* outline: 1px solid tomato; */
}
/**********************************************************/