* {
        box-sizing:border-box;
    }
	
	body {
        font-family: Söhne, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        padding:0;
        margin:0;
        background:#333440;
    }
    #around_output {
        background:#444653;
        color:#c8cbd1;
    }
    #input_feedback {
        color:#d8d8dd;
    }
    .boxed {
        width:800px;
        margin:15px auto;
        padding:15px;
        display:block;
        max-width:90%;
        position:relative;
    }
    #around_input {
        position:fixed;
        bottom:0;
        left:0; 
        width:100%;
    }
    #input {
        background:#40414f;
        padding:15px;
        border:1px solid rgba(32, 33, 35, 0.5);
        border-radius:6px;
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 15px 0px;
        color:white;
        font-size:16px;
        width:100%;    
		padding-right: 39px;		
    }
    .avatar {
        float:left;
        width:30px;
        height:30px;
        margin-right: 15px;
    }
    .avatar.me {
        background: #b5792b;
    }
    .avatar.me svg {
        transform: translate(3px,2px) scale(1.5);
        transform-origin: top left;
    }
    .avatar.otis {
        background: rgba(16,163,127,1)
    }
    #ok {
        display:none;
		height: calc(100vh - 280px);
		overflow: auto;
		-webkit-overflow-scrolling:touch;
    }
    #svg {
        position: absolute;
        transform: rotate(90deg) scale(1.5);
        right: 14px;
        top: 50%;
        transform-origin: center top;
        filter: invert(42%);
        cursor:pointer;
    }
    input:focus { outline:none; }
    .otis svg {
        transform: scale(0.6) translate(5px,5px);
        transform-origin:top left;                
    }


    @keyframes blinker {
      50% {
        opacity: 0;
      }
    }
    #loader {
        display:none;
        position:absolute;
        top:0;
        width:100vw;
        height:100vh;
        left:0;
        pointer-events:none;
        z-index:999;
        background: rgba(0, 0, 0, 0.5);
    }
    #loader IMG {
        position:absolute;
        top:50%;
        left:50%;
        transform:translateX(-50%) translateY(-50%);
    }
    .loader #loader {
        display:block;
        position:absolute;
    }
    
    .loader #svg {
      animation: blinker 1s linear infinite;
    }
    
    #copyright {
        text-align:center;
        bottom:10px;
        position:fixed;
        width:100%;
        left:0;
        color:white;
        font-size:11px;
        color:rgba(255,255,255,.5);
		z-index:99999999;
    }
    
    .faq {
        background:rgba(255,255,255,.1);
        border-radius:10px;
        padding:5px;
        margin-bottom:10px;
        font-size:12px;
    }
	
	#strike {
		height:100vh;
		width:100vw;
		position:absolute;
		top:0;
		left:0;
		background:rgba(0,0,0,.7);
		z-index:9999;
	}
	
	#strike #in_strike {
		position:absolute;
		top:50%;
		left:50%;
		width:300px;
		border-radius:50px;
		transform:translateY(-50%) translateX(-50%);
		
	}
	#strike #in_strike IMG {
		width:100%;
	}
	
	#countdown {
		text-align:center;
		font-size:18px;
		color:white;
	}

	#strike IMG {
	  /* Start the shake animation and make the animation last for 0.5 seconds */
	  animation: shake 1s;

	  /* When the animation is finished, start again */
	  animation-iteration-count: infinite;
	  margin-bottom:15px;
	}

	@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); }
	}
	 
	canvas { 
		background-color: #fff; 
		position: fixed;
		bottom:0;
		left: 0;
		width:100%;
	}
	
	H4 {
		padding-top:0;
		margin-top:0;
	}
    
    #free_help {
        margin-top:5px;
        border-radius:5px;
        display:block;
        padding:10px;
        border:1px solid white;
        font-size:14px;
        background:white;
        color:black;
        text-decoration:none;
        transition:0.4s all;
    }
    
     #free_help:hover {
         background:#40414f;
         color:white;
     }
     
     .onlyprint {
        display:none;
        text-align:center;
        bottom:10px;
        position:fixed;
        width:100%;
        left:0;
        font-size:50px;
        color:#d10011;
		z-index:99999999;
     }
     
      @media print {
          .onlyprint {
              display:block;
          }
          #input_echo, #output {
              font-size:30px;
          }
          .noprint {
              display:none;
          }
          .logo {
              height:250px;
          }
      }
      
      
      #printer {
          width:270px;
          padding:5px 10px;
          background:#d10011;
          color:white;
          border-radius:5px;
          margin:auto;
          margin-top:30px;
		  font-weight:600;
          text-align:center;
          cursor:pointer;
      }
      
      @media only screen and (max-width: 600px) {
          #printer {
            display:none;
			
          }
       }