:root { --default-margin: 2em; --default-font-size: 1.1em; } html, body { color: #333; text-align: left; line-height: 1.8em; font-family: "Adelphe Floreal", "Rubik", "Palanquin SemiBold", "Trebuchet MS", "Helvetica Neue",Helvetica,Optima,sans-serif; margin: 4em; margin-top: 0.5em; margin-bottom: 0.5em; box-sizing: border-box; font-size: var(--default-font-size); min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; font-weight: 300; background-color: #hehehe; } @media (max-width: 800px) { html, body { margin: 0.25em; } } pre, textarea {tab-size: 4;} .dark { color: #FFF; background: #444; } div, section { margin: 0; padding: 0; border: 0; } a { color: #006600; text-decoration: none; } .dark a { color: #00FF00 !important; text-decoration: none; } a.pltsm_link { } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:active { color: #900; text-decoration: underline; } a:hover { text-decoration: underline; } th { color: #333; font-weight: 300; text-align: left; line-height: 1.2em; padding: 0.5em; } iframe { max-width: 80%; min-height: 70vh; border: 0; } hr { border: none; text-align: center; color: #ccc; page-break-after: always; margin-bottom: 4em; } /*form { margin: var(--default-margin); }*/ #pltsm-login-form { width: 300px; margin-right:auto; margin-left:auto; margin-top: 200px; } #pltsm-login-title { margin-right:auto; margin-left:auto; width: 100%; text-align: center; font-weight: bolder; margin-bottom: var(--default-margin); } #pltsm-login-user { width: 100%; margin-bottom: var(--default-margin); height: 30px; border-bottom: 1px lightgrey; border-top-style: hidden; border-right-style: hidden; border-left-style: hidden; border-bottom-style: solid; outline: none; } #pltsm-login-password { width: 100%; margin-bottom: var(--default-margin); height: 30px; border-bottom: 1px lightgrey; border-top-style: hidden; border-right-style: hidden; border-left-style: hidden; border-bottom-style: solid; outline: none; } #pltsm-login-submit { width: 100%; height: 25px; border-radius: 25px; border : none; background: #aaeeaa; } hr:after { content: "* * *"; letter-spacing: 0.5em; } pre { font-size: var(--default-font-size); font-weight: 300; margin: var(--default-margin); } code { font-family : monospace; } .vimeo { border: 0; width: 100%; height: 56.25%; } ::selection { background: #ccc; color: #0066ff; } p { argin-bottom: 1em; page-break-inside: avoid; } ul { list-style-type: none; margin: calc( var(--default-margin) * 2); margin-top: 0; padding: 0; } #header { order: 1; } #header a{ text-decoration: underline; } #header h3{ margin:1.5em; margin-bottom: 0; margin-top: 0; } #content { order: 2; margin-bottom: auto; } #footer { order: 3; margin-top: auto; } nav a { } nav a:active { color: #900; text-decoration: none; } nav a:hover { color: @link; background-color: #ccc; text-decoration: none; } p > img { max-width: 80%; } video { width: 100%; } audio { width: calc( 100% - var(--default-margin) - var(--default-margin)); margin: var(--default-margin); } .center { display: block; margin-right: auto; margin-left: auto; } .fill { width: 100%; max-height: 800px; overflow: hidden; } .blue { background-color: #CCF; } .pltsm-search-input { float: right; width: 70px; outline: none; } .pltsm-search-input:focus { float: right; width: 200px; -webkit-transition: width 0.25s ease-in-out; -moz-transition: width 0.25s ease-in-out; -o-transition: width 0.25s ease-in-out; transition: width 0.25s ease-in-out; } blink, .blink { animation: blinker 1s infinite; } @keyframes blinker { 10% { opacity: 0;} 90% { opacity: 1;} } .vibrate { animation: vibrator 0.5s infinite; display: inline-block; } @keyframes vibrator { 0% { transform: translate(1.2px, 0.2px); } 10% { transform: translate(-0.2px, -0.2px); } 20% { transform: translate(-0.2px, 0px); } 30% { transform: translate(0.2px, 0.2px); } 40% { transform: translate(0.2px, -0.2px); } 50% { transform: translate(-0.2px, 0.2px); } 60% { transform: translate(-0.2px, 0.2px); } 70% { transform: translate(0.2px, 0.2px); } 80% { transform: translate(-0.2px, -0.2px); } 90% { transform: translate(0.2px, 0.2px); } 100% { transform: translate(0.2px, -0.2px); } } .spin { display: inline-block; -webkit-animation:spiner 4s linear infinite; -moz-animation:spiner 4s linear infinite; animation:spiner 4s linear infinite; ) @-moz-keyframes spiner { 100% { -moz-transform: rotate(360deg); }} @-webkit-keyframes spiner { 100% { -webkit-transform: rotate(360deg); }} @keyframes spiner { 100% { transform:rotate(360deg); }}