@charset "UTF-8";
/* Screen CSS */

body {
  font-size: 20px;
  font-family: "Paytone One", sans-serif;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px; top: 0px;
}
#presentation {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  display: block;
  overflow: hidden;
}
#info {
  font-size: small;
  position: absolute;
  bottom: 0px;
  left: 40%;
  z-index: 500;
}

#topinfo {
  font-size: small;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 500;
  display: none;
}

.notes {display: none;}

.key {
  color: black;
  display: inline-block;
  padding: 3px 3px 3px 3px;
  text-shadow: none;
  letter-spacing: 0;
  position: relative;
  background: white;
}

#presentation {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  display: block;
  overflow: hidden;
  background-color: #333;
}

.slides {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  display: block;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  -ms-transition: -o-transform 1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;

  /* so it's visible in the iframe. */
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}

.slide {
  display: none;
  position: absolute;
  overflow: hidden;
  width: 900px;
  height: 700px;
  left: 50%;
  top: 50%;
  background-color: rgba(255,255,255,0.9);
  border-radius: 3px;
  margin-top: -350px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  padding-left: 20px;
  padding-top: 10px;
}
.transparent {
	background: none;
}
.intro p, header {
  text-align: center;
}
.intro header {
  font-size: 200%;
}

.slide.intro hgroup {
  margin-top: 200px;
}
.slide.teach {
  background-color: #fff;
}
.content {
  font-size: 140%;
}

.content input, button {
  font-size: 140%;
}

.content td {
   border: 1px solid black;
}

.invalid {
  background-color: red;
}

.slide li {
  margin-bottom: 10px;
}

.slide img {
  max-height: 90%;
  border: 1px solid white;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
}


.slide p, .slide textarea {
  font-size: 120%;
}

.slide .counter {
  color: #999999;
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: block;
  font-size: 70%;
}

.slide.title > .counter,
.slide.segue > .counter,
.slide.mainTitle > .counter {
  display: none;
}

.force-render {
  display: block;
  visibility: hidden;
}

.slide.far-past {
  display: block;
  margin-left: -2400px;
}

.slide.past {
  visibility: visible;
  display: block;
  margin-left: -1400px;
}

.slide.current {
  visibility: visible;
  display: block;
  margin-left: -450px;
}

.slide.future {
  visibility: visible;
  display: block;
  margin-left: 500px;
}

.slide.far-future {
  display: block;
  margin-left: 1500px;
}

body.three-d div.slides {
  -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
  -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
  -ms-transform: translateX(50px) scale(0.8) rotateY(10deg);
  -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
  transform: translateX(50px) scale(0.8) rotateY(10deg);
}

/* Content */
header {
  font-weight: normal;
  letter-spacing: -.05em;
  text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
  left: 30px;
  top: 25px;
  font-size: 120%;
}

h1 {
  margin-bottom: 0px;
}

h2 {
  font-size: 90%;
}
.temphidden {display:none;}
h1:first-child {
  margin-top: 0;
}

section, footer {
  text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
  margin: 20px 30px 0;
  display: block;
  overflow: hidden;
}

footer {
  font-size: 100%;
  margin: 20px 0 0 30px;
}

a, em {
  color: red;
  text-decoration: none;
  font-style:normal;
}
.imp li,
b.imp{
 	-webkit-transition: all 0.2s ease-in;
}
.imp li:hover, b.imp:hover{
	-webkit-transform:scale(1.2);
	color: red;
	-webkit-transform-origin: left;
}


pre {
  text-align: left;
  font-size: 80%;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.8);
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: 1px solid red;
}

pre b {
  font-weight: bold;
  color: red;
  display:inline-block;
}
pre b:hover {
	-webkit-transform:scale(1.2);
	color: red;
}

pre em {
  font-weight: normal;
  font-style: normal;
  color: red;
  text-shadow: currentColor 0 0 1px;
}

div.example {
  display: block;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.4);
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}


#presentation-counter {
  color: #ccc;
  font-size: 70%;
  letter-spacing: 1px;
  position: absolute;
  bottom: 5%;
  left: 0;
  width: 100%;
  text-align: center;
}

div:not(.current).reduced {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}

.no-transitions {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

.no-gradients {
  background: none;
  background-color: #fff;
}



/* ############################

    BROWSER SUPPORT & ICONS

   ############################ */



.icons li, .icons .browser {
			width: 68px; height: 14px; display: inline-block;
			background-image:url(../assets/browser_logos-64.png);
			border-radius: 32px;
			font-size: 10px;
			padding-top: 60px;
			text-align:center;
			position: relative;
			background-repeat: no-repeat;
		}
		.icons .firefox {background-position:-80px 0}
		.icons .ie {background-position:-280px 0}
		.icons .safari {background-position:-210px 0}
		.icons .chrome {background-position:0 0 }
		.icons .opera {background-position:-140px 0}
		.icons .new:after {
			content: "";
			width: 40px;
			height: 28px;
			display:block;
			position:absolute;
			top: -8px;
			right:-10px;
			background-image:url(../assets/new.gif);
		}
		.icons .no {opacity: 0.25;}
		.icons .bad,
		.icons .iffy {opacity: 0.60;}
		.icons .bad {
			margin-right: 10px;
			margin-left: 10px;
		}
		.icons .bad:after {
			position:absolute;
			top: -10px;
			left:-15px;
			content: "";
			-webkit-box-sizing: padding-box;
			background:
				-webkit-linear-gradient(135deg,
					transparent 45%,
					red 45%,
					red 55%,
					transparent 55%);
			width: 68px;
			height: 68px;
			border-radius: 50%;
			border: 10px solid red;
			display:block;
		}

		.icons .half:after {
			position:absolute;
			top: 0;
			right:0;
			content: "";
			background-color: #DCe7f3;
			width: 33px;
			border-radius: 0 0 50% 0;
			height: 65px;
			display:block;
		}
		.icons .half.new:after {
			background-repeat: no-repeat;
			background-color:transparent;
			background-image:url(../assets/new.gif) ,
			-webkit-linear-gradient(0deg, transparent 30%, #DCe7f3 30%)        ;
			background-image:url(../assets/new.gif) ,
			-moz-linear-gradient(0deg, transparent 30%, #DCe7f3 30%)        ;
			background-image:url(../assets/new.gif) ,
			-ms-linear-gradient(0deg, transparent 30%, #DCe7f3 30%)        ;
			background-image:url(../assets/new.gif) ,
			-o-linear-gradient(0deg, transparent 30%, #DCe7f3 30%)        ;
			background-image:url(../assets/new.gif) ,
			linear-gradient(0deg, transparent 30%, #DCe7f3 30%)        ;
			width: 40px;

		}
		.icons .txt {background-image: none; width: auto; font-size: 18px;}


    /* OBJECT PAGES */
.object header {
  position:absolute;
  top: 10px;
  width: 100%;
  text-align:center;
  background-color: rgba(255,255,255,0.9);
  left:0;
}
.objectlink {
  position:absolute;
  top:0; right:0;
  color: white;
  background-color: #000;
  padding: 3px 5px;
  border: none;
}
.slide.object {padding:0;}
.object object {width: 100%; height: 100%;}

.h1 {font-size: 80px;}
.hoverme     {color: green; text-decoration:underline;}
.hoverme:hover {color: orange;}
.simptrans {transition:1s;}
/*.simptrans:hover {transition:10s}*/

.code {
   color: black;
   font-size: 85%;
   background-color: rgba(255,255,255,0.4);
   transition: all 2s ease-in 50ms;
}
.code:hover {
   color: red;
   background-color: rgba(255,255,255,0.9);
}
.code:not(.code2):hover {
   font-size: 120%;
}
.code2:hover {
  -webkit-transform: scale(1.4);
  -webkit-transform-origin: top left;
  transform: scale(1.4);
  transform-origin: top left;

}
table.icons td {width: 20%;text-align: center; border: none; font-size: 0.6rem;}
table.icons * {margin:0;}
.yes, .no {
  position: relative;
}
.yes:after, .no:after {
  content: '✓';
  color:green;
  font-size:60px;
  position:absolute;
  top: 5px;
  right: 5px;
}
.no:after {
  content: 'X';
  color: red;
  font-family: "Comic Sans MS", cursive;
}

.columns {

  -webkit-column-count:3;
  -webkit-column-gap: 0.1em;
  column-count:3;
  column-gap: 0.1em;
}
.spinbox, .pencil {
  position:relative;
  font-size: 100px;
  color:red;
    display:block;
  height: 140px;
  width: 140px;
  margin:10px auto;
  font-size: 140px;
  text-align:center;
}
.pencil, .pencil2 {
  display: block;
  text-align: left;
  margin: 10px 0;
  line-height: 140px;
  position: absolute;
  top: 0; left: 0;
  -webkit-transition: all 1s ease-in 50ms;
  -webkit-transform-origin: 100px 123px;
  transition: all 1s ease-in 50ms;
  transform-origin: 100px 123px;
}
.outlined:hover {outline: 5px solid green;}
.spinbox .dot {
  position: absolute;
  top: 123px;
  left: 100px;
  height:5px; width: 5px;
  border-radius: 0.5em}
.spinbox:hover .dot {
  background-color:green;
}
.spin:hover {
  -webkit-transform: rotate(360deg) scale(2);
  transform: rotate(360deg) scale(2);
}

.pencil_01 {
    -webkit-animation: writing 3s infinite 1s;
    -webkit-animation-play-state:paused;
    animation: writing 3s infinite 1s;
    animation-play-state:paused;
  }
.pencil_03 {
    -webkit-animation: writingDangerously 3s infinite linear;
    -webkit-animation-play-state:paused;
    animation: writingDangerously 3s infinite linear;
    animation-play-state:paused;
  }
.pencil_04 {
    -webkit-animation: W 3s infinite linear;
    -webkit-animation-play-state:paused;
    animation: W 3s infinite linear;
    animation-play-state:paused;
  }
.pencil_05 {
    -webkit-animation: gettingThePencil 3s infinite;
    -webkit-animation-play-state:paused;
    animation: gettingThePencil 3s infinite;
    animation-play-state:paused;
  }
.to {
    -webkit-transform-origin: left 300px;
    transform-origin: left 300px;
  }
.slide:hover .pencil_01,
.slide:hover .pencil_03,
.slide:hover .pencil_04,
.slide:hover .pencil_05,
.slide:hover .pencil_06,
.slide:hover .pencil_07,
.slide:hover .pencilanim_01
 {
  -webkit-animation-play-state:running;
 animation-play-state:running;
}
 .pencil_pausing {
  left: 350px;
  -webkit-transform-origin: center 300px;
  -webkit-animation: writingInCircles 3s linear infinite;
  transform-origin: center 300px;
  animation: writingInCircles 3s linear infinite;

 }
  .pencil_pausing:hover {
  -webkit-animation-play-state:paused;
  animation-play-state:paused;

 }
@keyframes writingInCircles {

  100% {
    transform:
      rotate(360deg);
  }

}
@-webkit-keyframes writingInCircles {

  100% {
    transform:
      rotate(360deg);
  }

}

@-webkit-keyframes writing {
  0% {
      left: 0;
    }

    100% {
      left: 100%;
    }
}
@keyframes writing {
  0% {
      left: 0;
    }

    100% {
      left: 100%;
    }
}
@-webkit-keyframes writingDangerously {
0% {
      left: 0;
    }

    10% {
      left: 45%;
    }

    90% {
      left: 55%;
    }

    100% {
      left: 100%;
    }
}
@keyframes writingDangerously {
0% {
      left: 0;
    }

    10% {
      left: 45%;
    }

    90% {
      left: 55%;
    }

    100% {
      left: 100%;
    }
}

@-webkit-keyframes W {

   0% {
      left: 0;
    top: 0;
          }

    25% {
      top: 400px;
    }

    50% {
      top: 50px;
    }

    75% {
      top: 400px;
    }

    100% {
      left: 80%;
      top: 0;
    }
}
@keyframes W {

   0% {
      left: 0;
    top: 0;
          }

    25% {
      top: 400px;
    }

    50% {
      top: 50px;
    }

    75% {
      top: 400px;
    }

    100% {
      left: 80%;
      top: 0;
    }
}


@-wekbit-keyframes gettingThePencil {
  0%{
    -webkit-transform:
      translate3d(0, 0, 0) rotate(0deg) scale(0.5, 0.5);
  }

  100% {
    -webkit-transform:
      translate3d(600px, 400px, 0) rotate(80deg) scale(1.2, 1.2);
  }
}

@keyframes gettingThePencil {
  0%{
    transform:
      translate3d(0, 0, 0) rotate(0deg) scale(0.5, 0.5);
  }

  100% {
    transform:
      translate3d(600px, 400px, 0) rotate(80deg) scale(1.2, 1.2);
  }
}

@-webkit-keyframes drawALine {
  0%{
    width:0;
    color:green;
  }

  100% {
    width: 100%;
    color:blue;
  }
}
@keyframes drawALine {
  0%{
    width:0;
    color:green;
  }

  100% {
    width: 100%;
    color:blue;
  }
}
.slide nav {
  float: left; width: 100%; margin-bottom: 20px;
}
.slide nav ul,.slide nav ul li  {margin: 0; padding: 0;}
.slide nav + pre {clear: both; margin-top: 100px;}
.slide nav ul li {list-style-type: none; background-color: red; color: white; margin:0; padding: 3px 5px; border: 1px solid #fff;}
nav > ul > li {display: inline-block; position:relative; float: left; min-width: 120px;}
nav ul ul {
  -webkit-transform: scale(1,0);
  -webkit-transform-origin: top center;
  -webkit-transition:0.2s linear 50ms;
  transform: scale(1,0);
  transform-origin: top center;
  transition:0.2s linear 50ms;
  position: absolute;
  top: 100%; left: 0;
  min-width: 100%;
}
nav li:hover ul {
  -webkit-transform: scale(1,1);
  transform: scale(1,1);}

.pencilanim {
   width:100px;
   border-bottom: 10px solid;
   overflow: hidden;
   position: relative;
}
.pencilanim::after {
  content: '✎';
  position: absolute;
  bottom: -20px;
  right: -10px;
}
.pencilanim_01 {
  -webkit-transform-origin: left 300px;
  -webkit-animation-name: drawALine;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 3;
  -webkit-animation-play-state: paused;
  transform-origin: left 300px;
  animation-name: drawALine;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
  animation-play-state: paused;
}
pre u {text-decoration:none; font-weight:bold;}

.card, .carda {
  width: 200px;
  height: 300px;
  border-radius: 10px;
  margin: auto;
  position: absolute;
  font-size: .8em;
  -webkit-perspective: 600px;
  perspective: 600px;
}
.card:hover,
.carda {
  -webkit-transition: 1s ease;
  transition: 1s ease;
}
.card .front,
.carda .front {

float: none;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: inherit;
height: inherit;
  border-radius: 10px;
  border: 10px solid #fff;
text-align: center;
box-shadow: 0 1px 5px rgba(0,0,0,0.9);
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all .4s ease-in-out;
background:
linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, red 75%, red) 0 0,
linear-gradient(-45deg, red 25%, transparent 25%, transparent 75%, white 75%, white) 1em 1em,
linear-gradient(45deg, red 17%, transparent 17%, transparent 25%, red 25%, red 36%, transparent 36%, transparent 64%, red 64%, red 75%, transparent 75%, transparent 83%, red 83%) 1em 1em;
background-color: white;
background-size: 2em 2em;
background-position: -1em -1em;

}
.card:hover .front {
  z-index: 900;;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.card .back,
.carda .back {
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  width: inherit;
  height: inherit;
  background: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
  -webkit-transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .4s ease-in-out;
  border-radius: 10px;
  border: 10px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.9);
}
.card:hover .back {
  z-index: 1000;
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}
.card:first-of-type,
.carda:first-of-type {
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.card:nth-of-type(2):hover,
.carda.flipped:nth-of-type(2){
  -webkit-transform: rotate(0) translatex(120px);
  transform: rotate(0) translatex(120px);
}
.card:last-of-type,
.carda:last-of-type {
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}
.card:first-of-type:hover{
  -webkit-transform: rotate(10deg) translatey(180px);
  transform: rotate(10deg) translatey(180px);
}
.carda.flipped:first-of-type{
  -webkit-transform: rotate(-5deg) translate(240px, 25px);
  transform: rotate(-5deg) translate(240px, 25px);
}

.carda.flipped .front,
.carda.unflipped .back {
  -webkit-animation: flipme 1s linear forwards;
  animation: flipme 1s linear forwards;
}
.carda.unflipped .front,
.carda.flipped .back {
  -webkit-animation: unflipme 1s linear both;
  animation: unflipme 1s linear both;
}
/*
.carda.flipped:first-of-type  {animation: flipme 1s linear forwards;}
.carda.flipped:nth-of-type(2){animation: flipme 1s linear forwards;}
.carda.flipped:last-of-type  {animation: flipme 1s linear forwards;}
.carda.unflipped:first-of-type {animation: flipme 1s linear -1s alternate;}
.carda.unflipped:nth-of-type(2){animation: flipme 1s linear -1s alternate;}
.carda.unflipped:last-of-type  {animation: flipme 1s linear -1s alternate;}
*/
@-webkit-keyframes flipme {
  0% {transform: rotatey(0deg)}
  100% {transform: rotateY(-180deg);}
}
@-webkit-keyframes unflipme {
  0% {transform: rotatey(180deg)}
  100% {transform: rotateY(0deg);}
}
@keyframes flipme {
  0% {transform: rotatey(0deg)}
  100% {transform: rotateY(-180deg);}
}
@keyframes unflipme {
  0% {transform: rotatey(180deg)}
  100% {transform: rotateY(0deg);}
}




.card .back, .carda .back {color:red; font-size: 50px; line-height: 300px; text-align:center;}
.card .back:after,
.carda .back:after  {content: 'A'; position:absolute; top: 10px; left: 10px; line-height:20px;}
.card .back:before,
.carda .back:before {content: 'A'; position:absolute; bottom: 10px; right: 10px; line-height:20px;}
@-webkit-keyframes showme {
  0% {background-color:blue; transform: rotate(0deg) translate(200px, 0)}
  50% {background-color:green;transform: rotate(22deg) translate(350px, -150px)}
  100% {background-color: yellow; transform: rotate(45deg) translate(500px, -540px)}
}
@keyframes showme {
  0% {background-color:blue; transform: rotate(0deg) translate(200px, 0)}
  50% {background-color:green;transform: rotate(22deg) translate(350px, -150px)}
  100% {background-color: yellow; transform: rotate(45deg) translate(500px, -540px)}
}
.box {
  padding:20px 50px;
  position:relative;
}
.box span {
  position: absolute;
  left: 0;
  top:20px;
  width: 50px;
  height:50px;
  background-color: red;
  -webkit-animation: showme 5s linear 5s 1;
  -webkit-animation-play-state:paused;
  -webkit-transform-origin: 50% 100%;
  animation: showme 5s linear 5s 1;
  animation-play-state:paused;
  transform-origin: 50% 100%;
}
.current:hover .box span {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
span.afmforwards {
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}
span.afmbackwards {
  -webkit-animation-fill-mode:backwards;
  animation-fill-mode:backwards;
}
span.afmboth {
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
}

#animfillmodeall4.animationon .box span {
  -webkit-animation: none;
  animation: none;
}

.stepsexplain {
  list-style-type: none;
}
.stepsexplain div {
  border: 2px solid black;
  margin: 2px;
  margin-left: 360px;
  position: relative;
  width: 360px;
  height: 92px; display: inline-block;
  vertical-align: middle;
}
.stepsexplain div:before {
  content: '';
  height: 92px;
  width: 360px;
  position: absolute;
  background-image: url(../assets/animation/bike.png);
  background-repeat: no-repeat;
  border: 1px solid #666;
  }
.stepsexplain li:nth-of-type(2) div:before {
  left: -90px;
}
.stepsexplain li:nth-of-type(3) div:before {
  left: -180px;
}
.stepsexplain li:nth-of-type(4) div:before {
  left: -270px;
}
.stepsexplain li:nth-of-type(5) div:before {
  left: -360px;
}

  .stepsexplain div:after {
  content:"";
border: red solid 2px;
position: absolute;
 left: 0px;
 top: 0px;
 bottom:0px;
 width: 90px;
}
figure {
display: block;
text-align: center;
margin: 0;
}
.figure .content,.slide.figure {padding: 0;}
figure > :not(figcaption) {
text-align: left;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: none;
}