canvas{
	border:none;
	margin:0px;
	width:100vw;
	background-color:#fafafa;
	image-rendering: pixelated;
    cursor: none;
}
* {
	padding:0px;
	margin:0px;
	overflow:hidden;
	user-select: none;
}
#ui{
    width:100vw;
    aspect-ratio: 16 / 9;
    z-index:100;
    background:none;
    position:absolute;
}
#ui * {
    /*border:1px dashed blue;*/
}
#ui > div {
    width: 100%;
    height: 100%;
}
#schedulemenu li {
    background:yellow;
}
#confirm {
    padding:0.5vw;
    position:absolute;
    right:-15vw;
    bottom:5vw;
    font-size: 3vw;
    transition: right 1s;
    background-color:#555;
    opacity: 0.8;
    border-radius: 10px;
}
li {
    padding: 1vw 3vw;
    margin: 0.8vw 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    font-size: 2vw;
    color: #333;
    font-weight: bold;
    cursor: grab;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, transform 0.2s;
}
li:hover [draggable="true"] {
    background: #e8f0ff;
    transform: scale(1.03);
}
.dragging {
    opacity: 0.7;
    transform: rotate(-2deg);
}
.over {
    border: 2px dashed #ff8c42;
    background: #fff3e0;
}
#electtitle {
    position:absolute;
    left:6vw;
    font-size:2vw;
    top:2vw;
}
#schedtitle {
    position:absolute;
    left:56vw;
    font-size:2vw;
    top:2vw;
}
#list {
    float:right;
    width:40vw;
    border:1px solid green;
    height:80vw;
    margin-top:5vw;
    margin-right:5vw;
}
#options {
    float:left;
    width:40vw;
    border:1px dashed red;
    height:80vw;
    margin-top:5vw;
    margin-left:5vw;
}
#pausemenu {
    background: black;
    opacity: 0.8;
}
#startmenu {
    position:absolute;
    background: green;
    background-image: url("");
    padding-top:1vw;
}
#startmenu >  * {
    position:relative;
}
#h2{
    position:absolute;
    font-size: 4vw;
    bottom:-16vw;
    right:7vw;
    text-align:center;
    animation: h2start 2s ease 1.5s 1 normal both paused;
}
#h2 > h3{
    transform: scale(90%);
    transition: 0.2s color, 0.5s text-shadow, 0.5s transform;
}
#h2 > h3:hover{
    color:white;
    text-shadow:0px 0px 0.4vw #fff;
    transform: scale(100%);
}
#startmenu p {
    font-size: 3vw;
    left: 4vw;
    top:2vw;
    animation: pstart 1s ease 1.2s 1 normal both paused;
}
#startmenu p:nth-of-type(2) {
    left:50vw;
    top:-1vw;
    animation: pstart2 1s ease 1.7s 1 normal both paused;
}
#startmenu > p > span {
    animation: shake 0.4s ease 3s infinite normal both paused;
    display:inline-block;
    position:relative;
    bottom:-0.6vw;
}
#startmenu h1 {
    font-size: 10vw;
    animation: hstart 2s ease 1s 1 normal both paused;
}
@keyframes hstart {
    0% {left:-140vw}
    100% {left:6vw}
}
@keyframes h2start {
    0% {bottom:-16vw}
    100% {bottom:7vw}
}
@keyframes pstart {
    0% {font-size:0vw}
    100%  {font-size:3vw}
}
@keyframes pstart2 {
    0% {font-size:0vw}
    100%  {font-size:3vw}
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}