* {
  box-sizing: border-box;
}

body{
  background-image: url('../images/mlogo1.svg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: rgba(255,255,255,0.6);
  background-blend-mode: lighten;
  background-size: 40%;
  background-position: 50% 10%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* .center {
  margin: auto;
  width: 500px;
  border: 1px solid #73AD21;
  padding: 10px;
} */
.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  position:relative;
  float: left;
  font-family: 'Times New Roman', serif;
  font-size: 3.8vw;
  border: 0px dashed #FC8;
  margin: 0;
}


.col-05 {width: 4%; }
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-icon {width: 13%; border: 1px solid lightgray;}

.tcol {
  position:relative;
  float: left;
  width: 10%;
  font-size: 3vw; /* border: 1px solid lightgray; */
  margin: 0;
}
 #canvas{
   background: rgba(255, 255, 255, 0.2);
   position:relative;
   right:1%;
   z-index:2;
 }

.tmark, .tStep{
  padding-bottom: 4%;
}
.arrow {
  opacity: 0.02;
  animation: point 1s linear infinite;
  animation-play-state:paused;
}
.aarrow{position:absolute; top:0;left:-50%;
  opacity: 0.02; display: none;
  animation: point 1s linear infinite;animation-play-state:paused;
 }

.xcheck, #cArrow1, #cArrow2{
  opacity: 0.01;
  /* padding-right:2%; padding-right:2%; */
}
.xxcheck{position:absolute;top:0;left:0; opacity: 0;}
.tEvent{font-size:1.8vw;}
.dayPart{font-size:1.8vw;}

.popup{position:relative; top:400px; opacity:0; cursor: pointer;}
#today{color:#990000; margin: 0;}
#venue{color:#111199;}
#setup{color: #779; font-size: 2vw;}
#startHour, #startMinute, #duration{
  border: none;
  background-color: #777799;
  font-size: 2vw;
  color:white;
  width: 2.5em;
}
#note1{padding: 2% 6% 2% 6% ; color:#DD0000; font-size: 2vw;}
#note2{padding: 0% 0% 2% 11% ; color:#7755AA; font-size: 2vw; opacity: 0.5}
#pwmodal{padding: 2% 6% 2% 6% ; position:absolute;top:38%;left:8%;
  /* font-family: "Courier New", monospace; font-weight: bold; */
  font-family: "jetbrain", monospace;
  font-size:3.7vw;  background-color: rgba(255,255,255,0.9);
  border-radius: 28px;border:9px solid #ffbb00;z-index: 3;}
#ml{position:absolute; top:200%;left:150%; width:100%; opacity:0.01; z-index: 5;}
#key, #exclaim, #mcqicn, #dowhat, #qtype {position:relative; top:-100%;width:100%; z-index: 5;}

#inote{ position:absolute; top:100%;border:0px solid #cc00cc; border-radius: 18px; z-index: 3;}
#inotemvr {cursor: move; z-index: 6;}
.icn {display:inline-block;margin:auto;opacity: 0.2; cursor: pointer; position:relative; padding: 3px; width:2.0vw;  z-index: 5;}
.icn:hover{ opacity: 1;}
  /* box-shadow: 0 5px 7px 0 rgba(0,0,0,0.24),0 12px 30px 0 rgba(0,0,0,0.19); */
/* .icn:hover, #key:hover,#exclaim:hover { box-shadow: 5px 5px 18px #888888;} */

.spacer {width:0.8vw; opacity: 0.01;}
#ipointer{position:absolute; opacity:0.01; width:3.5vw; pointer-events: none; z-index:5;}
#announce {
  /* display: block; */
  position: relative;
  clear: left;
  top:100%;
  background-color: rgba(255,255,255,0.9);
  font-size: 2.0vw;
  font-family: sans-serif;
  color: orange;
  text-align: left;
  opacity: 0.2;
  padding: 1%;
  border:0.1px solid #cc0000; border-radius: 18px;
  z-index: 4;
}

#pen{
  position:relative;
  width: 100%;
  animation: scribble 0.3s linear infinite;
  /* animation-play-state:paused; */
  /* animation-play-state:running; */
}
#glasses{
  position:relative;
  width: 100%;
  animation: twist 0.5s linear infinite;
  /* animation-play-state:paused; */
  /* animation-play-state:running; */
}
  @keyframes scribble {
    0%{ transform: rotate(5deg);}
    33%{ transform: rotate(0deg);}
    50%{transform: skew(3deg,3deg);}
    80%{ transform: rotate(-2deg);}
    100%{ transform: rotate(0deg);}
  }
  /* .timewarp{width:5%; margin: 9px; position:relative; float: left;} */
  .timewarp:hover { animation: twist 0.5s;}

  @keyframes twist {
    30% { transform: rotate(-3deg);}
    70% { transform: rotate(3deg);}
    100% { transform: rotate(0deg);}
  }

  @keyframes point {
    60% { transform: translate(-5px);}
    75% { transform: translate(0px);}
    83% { transform: translate(-3px);}
    90% { transform: translate(0px);}
    95% { transform: translate(-1px);}
    100% { transform: translate(0px);}
  }

#questions {
  z-index: -9;
  position:absolute;
  top:200%;
  left:20%;
  opacity:0.03;
  animation: fidget 0.5 linear infinite;}

  @keyframes fidget {
    60% { transform: translateY(-5px);}
    75% { transform: translateY(0px);}
    83% { transform: translateY(-3px);}
    90% { transform: translateY(0px);}
    95% { transform: translateY(-1px);}
    100% { transform: translateY(0px);}
  }

.editable[type="text"] {
  width: 80%;
  display: block;
  font-size: 3.8vw;
  font-family: serif;
  color: navy;
  text-align: center;
  border:none;
}

@font-face {
  font-family: dejavu;
  src: url(DejaVuSansMono.ttf);
}

@font-face {
  font-family: fira;
  src: url(FiraCode-Regular.ttf);
}

@font-face {
  font-family: jetbrain;
  src: url(JetBrainsMonoNL-Bold.ttf);
}