body { line-height: 1.3; background-color: white; } /* patrick-hand-regular - latin-ext_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; src: url('patrick-hand-v19-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ src: url('patrick-hand-v19-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('patrick-hand-v19-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('patrick-hand-v19-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('patrick-hand-v19-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('patrick-hand-v19-latin-ext_latin-regular.svg#PatrickHand') format('svg'); /* Legacy iOS */ } .f { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-size: 40px; } .fs2 { font-size: 2rem; } .fs19 { font-size: 19px; } .fw { width: 100%; } .c { margin: auto; width: 42rem; padding-top: 2em; } a.l { color: black; text-decoration: none; background-color: rgba(255, 255, 255, 0.4); } a.l:hover { font-weight: 600; } #lcbtn:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.4); } #lcbtn:hover { font-weight: 600; } #cbtn { display: none; } #cbtn:checked ~ #lst { display: block; } #lst { display: none; } #lst a.l { margin-left: 1rem; color: rgba(0, 0, 0, 0.5); } .nd { padding: 1rem 1rem 1rem 15rem; } .kt { color: darkblue; cursor: pointer; font-weight: 600; background-color: rgba(255, 255, 255, 0.4); } #cknt { display: none; } #cknt:checked ~ #k { display: block; } #k { display: none; background-color: rgba(255, 255, 255, 0.4); cursor: crosshair; } .bgoff { position: absolute; bottom: 1rem; right: 1rem; font-size: 16px; border: 1px solid rgba(192, 192, 192, 0.6); border-radius: 5px; padding: 0 0 1px 0; background-color: rgba(192, 192, 192, 0.2); cursor: pointer; } .gi { right: 4rem; } .x { display: flex; border-bottom: 1px solid black; justify-content: right; text-align: right; } .xb { padding: 0 7px 0 0; background-color: transparent; border: 0; cursor: pointer; } @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #modal-custom { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ animation-name: an-mc; animation-duration: 0.5s; } .modal-content { margin-top: 15px; background-color: #fefefe; margin-left: auto; margin-right: auto; padding: 0 0 0 0; width: 80rem; } @keyframes an-mc { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } #cl { margin: 0 3px 0 3px; text-align: center; } #submit { text-align: center; }