#main article.article { display: inline-block; position: relative; width: 10em; height: 10em; margin: 0.3em 0.15em 0px; overflow-y: hidden; box-shadow: 0px 0px 3px #c4c4c4; background-color: #f5f5f5; line-height: 10em; text-align: center; border-radius: 6px; } article#func.article { background-color: #fff7bd; } .article a { display: block; font-size: 130%; width: 100%; height: 100%; overflow: hidden; } .article p { display: inline-block; vertical-align: middle; line-height: normal; } img.flag { width: 3.2em; height: 2em; } #message { padding: 10px; box-shadow: 0px 0px 3px #c4c4c4; background-color: #fffe94; border-radius: 6px; } tr#check { background-color: lightgrey; } header { border-bottom: 1px solid black; margin-bottom: 1em; } header a { display: inline-block; height: 5em; line-height: 5em; margin-bottom: 1em; background-color: gold; padding: 0px 1em; border-radius: 6px; box-shadow: 0px 0px 3px #c4c4c4; } header .lang a { background-color: olive; color: yellow; } header ul { list-style: none outside none; } header li { display: inline-block; } .header ul { list-style: none outside none; } .header li { display: inline-block; padding-left: 1em; } .header a { display: inline-block; height: 5em; line-height: 5em; margin-bottom: 1em; background-color: aliceblue; padding: 0px 1em; border-radius: 6px; box-shadow: 0px 0px 3px #c4c4c4; } footer span { padding-right: 20px; } footer { border-top: 1px solid black; margin-top: 1em; } footer a { margin-top: 1em; display: inline-block; position: relative; height: 5em; line-height: 5em; background-color: aliceblue; padding: 0px 1em; border-radius: 6px; box-shadow: 0px 0px 3px #c4c4c4; } table, td, th { border: 1px solid black; border-spacing: 0.5rem; border-collapse: collapse; } table, form { margin: 30px; } td { text-align: right; padding: 10px; } th { background-color: lightgrey; } h1 { text-align: center; display: block; position: relative; transform-origin: 50% 50%; animation-name: shake; animation-duration: 0.8s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: shake; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: shake; -moz-animation-duration: 0.8s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; } input[type] { font-size: 24.5px; width: auto; min-width: 5rem; height: 5rem; } .container { width: auto !important; padding: 30px; } @media screen and (max-width: 690px){ #main article.article { width: 7em; height: 7em; line-height: 7em; } } @keyframes shake { 0% {transform: translate(2px, 1px) rotate(0deg); color: black;} 10% {transform: translate(-1px, -2px) rotate(-1deg);} 20% {transform: translate(-3px, 0px) rotate(1deg);} 30% {transform: translate(0px, 2px) rotate(0deg);} 40% {transform: translate(1px, -1px) rotate(1deg);} 50% {transform: translate(-1px, 1px) rotate(-1deg); color: red;} 60% {transform: translate(-3px, -2px) rotate(0deg);} 70% {transform: translate(2px, 1px) rotate(-1deg);} 80% {transform: translate(-1px, -2px) rotate(1deg);} 90% {transform: translate(2px, -1px) rotate(0deg);} 100% {transform: translate(1px, -2px) rotate(-1deg); color: black;} } @-webkit-keyframes shake { 0% {-webkit-transform: translate(2px, 1px) rotate(0deg); color: black;} 10% {-webkit-transform: translate(-1px, -2px) rotate(-1deg);} 20% {-webkit-transform: translate(-3px, 0px) rotate(1deg);} 30% {-webkit-transform: translate(0px, 2px) rotate(0deg);} 40% {-webkit-transform: translate(1px, -1px) rotate(1deg);} 50% {-webkit-transform: translate(-1px, 1px) rotate(-1deg); color: red;} 60% {-webkit-transform: translate(-3px, -2px) rotate(0deg);} 70% {-webkit-transform: translate(2px, 1px) rotate(-1deg);} 80% {-webkit-transform: translate(-1px, -2px) rotate(1deg);} 90% {-webkit-transform: translate(2px, -1px) rotate(0deg);} 100% {-webkit-transform: translate(1px, -2px) rotate(-1deg); color: black;} } @-moz-keyframes shake { 0% {-moz-transform: translate(2px, 1px) rotate(0deg); color: black;} 10% {-moz-transform: translate(-1px, -2px) rotate(-1deg);} 20% {-moz-transform: translate(-3px, 0px) rotate(1deg);} 30% {-moz-transform: translate(0px, 2px) rotate(0deg);} 40% {-moz-transform: translate(1px, -1px) rotate(1deg);} 50% {-moz-transform: translate(-1px, 1px) rotate(-1deg); color: red;} 60% {-moz-transform: translate(-3px, -2px) rotate(0deg);} 70% {-moz-transform: translate(2px, 1px) rotate(-1deg);} 80% {-moz-transform: translate(-1px, -2px) rotate(1deg);} 90% {-moz-transform: translate(2px, -1px) rotate(0deg); color: black;} 100% {-moz-transform: translate(1px, -2px) rotate(-1deg);} }