@import url(https://fonts.googleapis.com/css?family=Lora&effect=shadow-multiple|Oswald|Playfair+Display&effect=fire-animation|shadow-multiple|Courier+Prime&effect=shadow-multiple|Keania+One);
@import url(https://fonts.googleapis.com/css?family=Keania+One);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display&effect=fire-animation);
@import url(https://fonts.googleapis.com/css?family=Questrial);


<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Lora&effect=shadow-multiple|Oswald|Playfair+Display&effect=fire-animation|shadow-multiple|Courier+Prime&effect=shadow-multiple|Keania+One">

body {
        font-family:'courier';color:darkblue;font-weight: bold;

  }



select, input, datalist, textarea {color:darkblue;font-weight: bold; transition: width 0.8s ease-in-out;}



input[type=submit], p, div {padding:6px;color:black;}

a:link, a:visited, a:active {color: black; text-decoration: none; font-weight: bold;}
input[type=submit]:hover, a:hover    {  text-decoration: underline; color: brown; -webkit-text-stroke: 0.5px black; font-weight: bold;}

span:hover    { color: brown; -webkit-text-stroke: 0.5px black;}


select, table, input, fieldset, textarea, .navi {border: 1px solid black; border-radius: 3px; margin: 2px; padding: 3px; margin-bottom:10px; }

h4 {margin-left: 10px;}

input, textarea {background-color:#FFF8DC;}

tr {background-color:#EFEFEF;}
tr:hover {background-color:#F0FFF0;}
th {border-style: hidden hidden dashed hidden; border-bottom: 2px dashed black; margin: 0px; padding: 2px; font-size:16px; background-color:lightgrey;font-weight: bold;}
td {border: 0px solid black; margin: 0px; padding: 2px; font-size:13px; }

span {margin: 2px; padding: 2px;}

.button {cursor: pointer; font-size:13px; margin:3px; padding:5px; vertical-align:center; text-align:center; border:2px outset black;  background-color:lightgray; border-radius:3px; border-style:outset; display:inline-block; cursor: pointer;}
.button:hover {background-color:silver;cursor: pointer;}

.menu {margin: 20px; padding: 2px; vertical-align:center; text-align: center; border: 1px solid black;  background-color:lightblue; border-radius: 3px;}

legend, .titlemenu {font-size:17px; border-radius: 3px; border: 1px solid black; background-color:lightgray; padding: 2px 6px 2px 6px; vertical-align:center; text-align: center; margin:0px 0px 8px 7px;font-weight: bold;}

.head {vertical-align:center;padding:2px;font-size:11px;color:black;background-color:lightgray;border:2px outset black;width:99%;text-align:right;margin-bottom:20px;position: fixed;top:1px;opacity: 0.6;border-radius:3px;}
.headimg {position: fixed;right:14px;top:35px;opacity: 0.5;}


.timebox {position: fixed; right: 14px; top: 70px; opacity: 0.8;}
.timebox {background:red; padding: 7px; color:white; text-align: center; width: 160px auto; height: 40px auto;  border: 1px solid black; border-radius:3px;font-weight:bold;}

.adbox {font-family:'Lora';border: 0px solid black;padding:0px; margin:0px;}
.adelement {font-family:'Lora';border: 0px solid black;padding:0px;padding-left:2px; margin-bottom:2px;margin-top:1px;text-align: center;float: left;border: 0px solid black;}

.price {font-family:'Playfair Display';border: 0px solid black;padding:0px; margin:0px;}

.counterbox {font-family:"Playfair Display"; border: 2px solid silver;padding:2px; margin:3px;text-align:center;border-radius:5px; width:100px;height:100px;font-size:13px;display:inline-grid; }
.counter {font-family: "Keania One"; font-size:37px;}

.acfont {font-family:"Questrial";font-size:14px;padding:3px;}
.acbox {font-family:"Questrial"; border: 2px solid silver;padding:8px; margin:3px;text-align:center;border-radius:5px; width:310px;height:463px;font-size:14px;display:inline-grid; }

.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: grey; }
}
//animation: typing 5s;