@font-face {
  font-family: myFirstFont;
  src: url(resources/lithos.ttf)  format('truetype'); /* Safari, Android, iOS */
  }
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0);
}
canvas {
  padding: 0;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(255, 255, 255);
  border-radius: 10%;
}

#newPage{
width: 100vw;
height: 100vh;
display: grid;
position: absolute;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr repeat(2, 3fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
z-index:10000000000;
background-color: #ffffff;
}
.title{
text-align: center;
align-self: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size:48px;
grid-area: 1 / 1 / 2 / 4;
}

#confirm-clean{
display:none;
width: 100vw;
height: 100vh;
position: absolute;
margin: 0;
padding: 0;
background-color: rgba(255, 255, 255, 0.8);
z-index:100000000;
}
#confirm-new{
display:none;
width: 100vw;
height: 100vh;
position: absolute;
margin: 0;
padding: 0;
background-color: rgba(255, 255, 255, 0.8);
z-index:100000000;
}

#paper {
width: 1536px;
height: 864px;
z-index: -500;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

#crayons {
position: absolute;
top: 65%;
transform: translate(-525px, -80%);
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index: 1000000;
}

img {
height: 50px;
}

.animate {
transform: translate(100px, 0px);
transition: transform 1s ease-in-out;
}

#right-side {
top:8%;
position: relative;
height: 100%;
width: 160px;
float: right;
}

#eraser {
margin-top: 10%;
margin-left: auto;
margin-right: auto;
/* account for padding and border if not using box-sizing: border-box; */
background-image: url(images/eraser.png);
background-size: 120px;
width: 75%;
height: 300px;
background-repeat: no-repeat;
opacity: 0.5;
transition: transform 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}



input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 13.8px 0;
}

input[type=range]:focus {
outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: #3071a9;
}

input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}

input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}

input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}

input[type=range]::-ms-fill-lower {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
height: 8.4px;
}

input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}

input[type=range]:focus::-ms-fill-upper {
background: #3071a9;
}
.btn{
position: absolute;
background-color: #008CBA; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
#btn-new{
height:70px;
width:160px;
display: block;
position: relative;
margin: 0 auto;
top: 80%
}
#clear{
height:70px;
width:160px;

display: block;
position: relative;
margin: 0 auto;
top:81%

}
#left-side{
position: absolute;
width: 190px;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;

}
.grid-container {
position: relative;
width: 80%;
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
margin-left:auto;
margin-right:auto;
top:90%;
}
.grid-item-button {
font-size: 20px;
text-align: center;
margin: 10px;
}

#newColoringPage{
grid-area: 2 / 1 / 3 / 2;
background-image: url(images/kolorowanka1.png);
background-repeat:no-repeat;
background-size:100%;

}
#newColoringPage2{
grid-area: 2 / 2 / 3 / 3;
background-image: url(images/kolorowanka2.png);
background-repeat:no-repeat;
background-size:100%;
}
#newColoringPage3{
grid-area: 2 / 3 / 3 / 4;
background-image: url(images/kolorowanka3.png);
background-repeat:no-repeat;
background-size:100%;
}
#newColoringPage4{
grid-area: 3 / 1 / 4 / 2;
background-image: url(images/kolorowanka4.png);
background-repeat:no-repeat;
background-size:100%;
}
#newColoringPage5{
grid-area: 3 / 2 / 4 / 3;
background-image: url(images/kolorowanka5.png);
background-repeat:no-repeat;
background-size:100%;
}
#newColoringPage6{
grid-area: 3 / 3 / 4 / 4;
background-image: url(images/kolorowanka6.png);
background-repeat:no-repeat;
background-size:100%;
}
.grid-container-size {
display: grid;
padding: 10px;

}
.grid-item-size {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
border-radius:50%;
padding: 20px;
font-size: 20px;
text-align: center;
margin:20px;
margin-left:auto;
margin-right:auto;
}
#small{
width:10px;
height:10px;
}
#normal{
width:20px;
height:20px;
}
#large{
width:30px;
height:30px;
}
#huge{
width:40px;
height:40px;
}
.active-size{
background-color: black;
border: 2px white solid;
}
.text{
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 40px;
color:#ffffff;
}

.button {
position: relative;
width:400px;
height:70px;
border: none;
font-size: 12px;
color: #fff;
border-radius: 7px;
letter-spacing: 4px;
font-weight: 700;
text-transform: uppercase;
transition: 0.5s;
transition-property: box-shadow;
}

.button {
background: rgb(0,140,255);
box-shadow: 0 0 10px rgb(0,140,255,0.6);
}

#logo{
position: relative;
height: 250px;
margin: 0 75px;
margin-top: 10px;
}

.btn-confirm{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
#sure{
position: absolute;
font-size: 80px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
#legalline{
position:absolute;
float:right;
width:200px;
height:100px;
background-image: url(images/legalline.png);
background-repeat: no-repeat;
background-size: 100%;
right:100px;
bottom:20px;
}

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}

.shooting-start{
  height: 0.18em;
  width: 2.5em;
  background-color: #ffffff;
  transform: rotate(-30deg);
  position: absolute;
  top: -0.8em;
  right: 35em;
  opacity: 0.2;
  animation: shooting-str 5s infinite;
}

@keyframes shooting-str {
  10%{
      transform: rotate(-30deg);
  }
  100%{
      transform:  rotate(-30deg) translate(-34em,0);
      opacity:1;
  }
}