+@-webkit-keyframes fadeOut {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+@keyframes fadeOut {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+
+img {
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+}
+
+.rot90 {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+ -webkit-transform: rotate(90deg) translateY(-100%);;
+ -moz-transform: rotate(90deg) translateY(-100%);;
+ -o-transform: rotate(90deg) translateY(-100%);;
+ rotation: 90deg translateY(-100%);;
+}
+.rot180 {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+ -webkit-transform: rotate(180deg) translate(-100%,-100%);
+ -moz-transform: rotate(180deg) translate(-100%,-100%);
+ -o-transform: rotate(180deg) translate(-100%,-100%);
+ rotation: 180deg translate(-100%,-100%);
+}
+.rot270 {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+ -webkit-transform: rotate(270deg) translateX(-100%);
+ -moz-transform: rotate(270deg) translateX(-100%);
+ -o-transform: rotate(270deg) translateX(-100%);
+ rotation: 270deg translateX(-100%);
+}
+
+#message {
+ position: fixed;
+ font-size: 18pt;
+ margin: 2em;
+ border-radius: 10px;
+ padding: .3em;
+ color: white;
+ font-weight: bold;
+ font-family: sans-serif;
+ background-color: rgba(200,200,200,0.5);
+}
+
+.inputcontainer {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+}
+#name {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ font-size: 30pt;
+}
+#shell_out {
+ display: none;
+ width: 80%;
+ height: 80%;
+ margin: 5em;
+ color: white;
+ background-color: black;
+ padding: 1em;
+}
+
+.fade {
+ opacity: 0;
+ -webkit-animation-duration: 2s;
+ -webkit-animation-name: fadeOut;
+ animation-duration: 2s;
+ animation-name: fadeOut;
+}
+
.fit_view {
max-width: 100%;
max-height: 100%;