@font-face {
  font-family: OpenSans;
  src: url(../font/OpenSans-Regular.ttf);
}
@font-face {
  font-family: Kaushanscript;
  src: url(../font/Kaushanscript.ttf);
}
@font-face {
  font-family: Trace;
  src: url(../font/Trace.ttf);
}
@font-face {
  font-family: Jardotty;
  src: url(../font/Jardotty.ttf);
}
@font-face {
  font-family: Allura;
  src: url(../font/Allura.ttf);
}
::-webkit-scrollbar {
  width: 0px;
}
* {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.hide {
  display: none;
}
.space-20 {
  width: 100%;
  height: 20px;
}
.space-40 {
  width: 100%;
  height: 40px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Kaushanscript";
  text-decoration: underline;
  text-decoration-color: green;
}
h2 {
  font-size: 1.8em;
}
body {
  font-family: "OpenSans";
  background-color: whitesmoke;
  margin: 0;
  margin-top: 2px;
}
main {
  display: flex;
}

.right-col, .left-col, .center-col {
  margin-top: -2px;
  width: 100%;
}
.right-col, .left-col {
  display: flex;
}
.left-col {
  justify-content: flex-end;
}

footer {
  text-align: center;
}

.global.controls {
  top: 0;
  position: sticky;
  max-height: 90px;
  padding: 20px;
  padding-right: 30px;
  font-size: 20px;
  width: 100%;
}
.global.controls h2, .sheet-controls h2 {
  text-align: center;
}
.global.controls label, .sheet-controls label {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}
.global.controls label.center, .sheet-controls label.center {
  justify-content: center;
}
.global.controls .switch {
  margin-left: 20px;
}
.global.controls select[name=font], .sheet-controls select[name=font] {
  font-size: 20px;
  min-width: 120px;
}

.scroll-controls {
  position: sticky;
  height: 95vh;
  top: 0;
  padding: 10px;
  width: 100px;
}
.new-page-button {
  position: absolute;
  bottom: 0;
}
.new-page-button button {
  font-size: 70px;
  background-image: url(../images/plus.svg);
  background-repeat: no-repeat;
  background-size: 60% 60%;
  background-position: center center;
}
.new-page-button span.label {
  white-space: nowrap;
  padding-left: 14px;
  font-size: 30px;
  font-weight: bold;
  color: green;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
}

.scroll-buttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.scroll-buttons button {
  font-size: 90px;
  /*
  background-image: url(../images/arrow.svg);
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: center center;
  */
  background-image: url(../images/arrow.svg);
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: center center;
}
.scroll-buttons .down {
  transform: rotate(-180deg);
}

/*#############
    SHEET
#############*/
.sheet-controls-wrapper {
  height: 297mm;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
.sheet-controls {
  /*background-color: rgba(140, 50, 80, 30%);*/
  min-width: 300px;
  padding: 20px;
  font-size: 20px;
}

.sheet-controls .buttons {
  display: flex;
  justify-content: space-around;
}

.sheet {
  position: relative;
  width: 210mm;
  height: 297mm;
  margin: auto;
  padding: 10px;
  padding-bottom: 0;
  padding-top: 20px;
  border: 1px solid rgba(0,0,0,0.6);
  background-color: white;
  scroll-padding-top: 40px;
}

.sheet > div {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

.sheet input[type=text] {
width: 100%;
border: none;
outline: none;
overflow: hidden;
}

.sheet .header {
  margin-bottom: 28px;
}
.sheet .header input {
  font-size: 30px;
}
.sheet .header .sticker {
  position: absolute;
  right:0;
  height: 25px;
  width: 25px;
  border: 1px solid black;
  right: 15px;
  top: 50%;
  transform: translateY(-51%);
}

.line {
  position: absolute;
  width: 100%;
  border-bottom: 1px dashed blue;
}

.line-container:nth-of-type(even) .outer-top,
.line-container:nth-of-type(even) .outer-bottom {
  border-color: lime;
}

/*###############
  INPUT WIDGETS
###############*/

input[type=button] {
  cursor: pointer;
  font-size: 20px;
  text-decoration: none;
  border: none;
  padding: 15px;
  background-color: green;
  color: white;
  border-radius: 20px;
}

button.round {
  padding: 0;
  height: 80px;
  width: 80px;
  border-radius: 40px;
  border: none;
  color: white;
  background-color: green;
  cursor: pointer;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .2s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/*#############
  SHEET FONTS
#############*/
.trace {
  font-family: "Trace";
}
.trace .line-container input {
  font-family: inherit;
  font-size: 44px;
}
.trace .outer-top {top:3%;}
.trace .inner-top {top:27%;border-color:black;}
.trace .inner-bottom {top:72%;border-bottom: 1px solid rgba(0,0,0,0.6);}
.trace .outer-bottom {top:99%;}

.jardotty {
  font-family: "Jardotty";
}
.jardotty .line-container input {
  font-family: inherit;
  font-size: 36px;
}
.jardotty .outer-top {top:0;}
.jardotty .inner-top {top:24%;border-color:black;}
.jardotty .inner-bottom {top:65%;border-bottom: 1px solid rgba(0,0,0,0.6);}
.jardotty .outer-bottom {top:87%;}

.allura {
  font-family: "Allura";
}
.allura .line-container {
  margin-bottom: 8px;
}
.allura .line-container input {
  font-family: inherit;
  font-size: 52px;
  color: rgba(0,0,0,0.2);
}
.allura .outer-top {top:18%;}
.allura .inner-top {top:40%;border-color:black;}
.allura .inner-bottom {top:65%;border-bottom: 1px solid rgba(0,0,0,0.6);}
.allura .outer-bottom {top:87%;}

/*#############
  TRANSITIONS
#############*/

.remove {
  overflow: hidden;
  padding: 0;
  height: 0px;
  transition: 0.2s;
}

@media print {
    @page {
      size: A4 portrait;
      margin: 0;
    }
    .sheet {
      break-after: page;
      border: none;
    }
    input::placeholder {
      color: transparent;
    }
    .controls, .right-col, .left-col, .space-20,
    .space-40, footer {
      display: none;
    }
}