@charset "UTF-8"; /*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */ @import url("https://fonts.googleapis.com/css?family=Baloo"); @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,900"); html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } ul { list-style: none; } button, input, select, textarea { margin: 0; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } img, embed, iframe, object, audio, video { height: auto; max-width: 100%; } iframe { border: 0; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; text-align: left; } [x-cloak] { display: none !important; } /* Generated with Bounce.js. Edit at https://goo.gl/cw1Z7A */ @keyframes rotate-color { 0% { filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); } 100% { filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: hue-rotate(360deg); -webkit-filter: hue-rotate(360deg); } } @keyframes shake { 0% { transform: translateX(-6px); } 20% { transform: translateY(-6px); } 40% { transform: translateX(4px); } 60% { transform: translateY(5px); } 80% { transform: translateX(-5px); } 100% { transform: translateX(0) translateY(0); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(10px); } 100% { transform: translateY(0px); } } @keyframes rotate-background-color { 0% { background-color: #aeffde; } 25% { background-color: #d2bfff; } 75% { background-color: #fff6ad; } 75% { background-color: #ffadad; } 100% { background-color: #aeffde; } } @keyframes bounce-1 { 0% { -webkit-transform: matrix3d(0.2, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.2, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.4% { -webkit-transform: matrix3d(0.452, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.452, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { -webkit-transform: matrix3d(0.56, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.56, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.81% { -webkit-transform: matrix3d(0.727, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.727, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.41% { -webkit-transform: matrix3d(0.907, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.907, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10.21% { -webkit-transform: matrix3d(0.953, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.953, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.61% { -webkit-transform: matrix3d(1.098, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.098, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.11% { -webkit-transform: matrix3d(1.113, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.113, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 17.52% { -webkit-transform: matrix3d(1.166, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.166, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.72% { -webkit-transform: matrix3d(1.17, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.17, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 21.32% { -webkit-transform: matrix3d(1.157, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.157, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.32% { -webkit-transform: matrix3d(1.12, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.12, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.23% { -webkit-transform: matrix3d(1.107, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.107, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.03% { -webkit-transform: matrix3d(1.05, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.93% { -webkit-transform: matrix3d(1.038, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.038, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35.54% { -webkit-transform: matrix3d(0.984, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.984, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.74% { -webkit-transform: matrix3d(0.977, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.977, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41.04% { -webkit-transform: matrix3d(0.969, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.969, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 44.44% { -webkit-transform: matrix3d(0.973, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.973, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.15% { -webkit-transform: matrix3d(0.993, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.993, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 59.86% { -webkit-transform: matrix3d(1.005, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.005, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.26% { -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.006, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 75.28% { -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85.49% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90.69% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @keyframes bounce-2 { 0% { -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.6, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.5, 0, 0, 0, 0, 0.6, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.4% { -webkit-transform: matrix3d(0.693, 0, 0, 0, 0, 0.763, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.693, 0, 0, 0, 0, 0.763, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.92% { -webkit-transform: matrix3d(0.725, 0, 0, 0, 0, 0.793, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.725, 0, 0, 0, 0, 0.793, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.81% { -webkit-transform: matrix3d(0.891, 0, 0, 0, 0, 0.957, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.891, 0, 0, 0, 0, 0.957, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 7.84% { -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.942, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10.21% { -webkit-transform: matrix3d(1.032, 0, 0, 0, 0, 1.091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.032, 0, 0, 0, 0, 1.091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 11.76% { -webkit-transform: matrix3d(1.07, 0, 0, 0, 0, 1.121, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.07, 0, 0, 0, 0, 1.121, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.61% { -webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.097, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 15.6% { -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.106, 0, 0, 0, 0, 1.122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 17.52% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 20.27% { -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 1.046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.075, 0, 0, 0, 0, 1.046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 21.32% { -webkit-transform: matrix3d(1.064, 0, 0, 0, 0, 1.028, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.064, 0, 0, 0, 0, 1.028, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.94% { -webkit-transform: matrix3d(1.024, 0, 0, 0, 0, 0.978, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.024, 0, 0, 0, 0, 0.978, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.23% { -webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 0.975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.021, 0, 0, 0, 0, 0.975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.03% { -webkit-transform: matrix3d(0.993, 0, 0, 0, 0, 0.959, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.993, 0, 0, 0, 0, 0.959, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.61% { -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 0.959, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99, 0, 0, 0, 0, 0.959, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 34.2% { -webkit-transform: matrix3d(0.98, 0, 0, 0, 0, 0.977, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98, 0, 0, 0, 0, 0.977, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.74% { -webkit-transform: matrix3d(0.982, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.982, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 43.46% { -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.996, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 44.44% { -webkit-transform: matrix3d(0.997, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.997, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.72% { -webkit-transform: matrix3d(1.004, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.004, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 59.86% { -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.002, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 71.24% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 75.28% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 83.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90.69% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @keyframes bounce-3 { 0% { -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.5, 0, 0, 0, 0, 0.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 2.35% { -webkit-transform: matrix3d(0.725, 0, 0, 0, 0, 0.578, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.725, 0, 0, 0, 0, 0.578, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 0.784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.942, 0, 0, 0, 0, 0.784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.61% { -webkit-transform: matrix3d(1.054, 0, 0, 0, 0, 0.931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.054, 0, 0, 0, 0, 0.931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 7.06% { -webkit-transform: matrix3d(1.07, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.07, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.36% { -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.079, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.106, 0, 0, 0, 0, 1.079, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.91% { -webkit-transform: matrix3d(1.105, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.105, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 12.16% { -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.075, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.21% { -webkit-transform: matrix3d(1.056, 0, 0, 0, 0, 1.147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.056, 0, 0, 0, 0, 1.147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.96% { -webkit-transform: matrix3d(1.024, 0, 0, 0, 0, 1.136, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.024, 0, 0, 0, 0, 1.136, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 17.12% { -webkit-transform: matrix3d(0.995, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.995, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 17.77% { -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 1.091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99, 0, 0, 0, 0, 1.091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 20.52% { -webkit-transform: matrix3d(0.98, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 20.92% { -webkit-transform: matrix3d(0.981, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.981, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.82% { -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 0.982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.991, 0, 0, 0, 0, 0.982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 26.08% { -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 0.974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.996, 0, 0, 0, 0, 0.974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 28.63% { -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, 0.968, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.002, 0, 0, 0, 0, 0.968, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 31.63% { -webkit-transform: matrix3d(1.004, 0, 0, 0, 0, 0.974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.004, 0, 0, 0, 0, 0.974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 42.74% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 43.94% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 59.36% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 74.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90.19% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @keyframes bounce-4 { 0% { -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.64, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.5, 0, 0, 0, 0, 0.64, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3% { -webkit-transform: matrix3d(0.637, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.637, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { -webkit-transform: matrix3d(0.725, 0, 0, 0, 0, 0.844, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.725, 0, 0, 0, 0, 0.844, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.01% { -webkit-transform: matrix3d(0.791, 0, 0, 0, 0, 0.894, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.791, 0, 0, 0, 0, 0.894, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.01% { -webkit-transform: matrix3d(0.926, 0, 0, 0, 0, 0.982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.926, 0, 0, 0, 0, 0.982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.41% { -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.942, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 12.01% { -webkit-transform: matrix3d(1.025, 0, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.025, 0, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.11% { -webkit-transform: matrix3d(1.07, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.07, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.72% { -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.106, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 19.72% { -webkit-transform: matrix3d(1.105, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.105, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.32% { -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.075, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 27.43% { -webkit-transform: matrix3d(1.046, 0, 0, 0, 0, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.046, 0, 0, 0, 0, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.93% { -webkit-transform: matrix3d(1.024, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.024, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35.54% { -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41.04% { -webkit-transform: matrix3d(0.98, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 42.84% { -webkit-transform: matrix3d(0.981, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.981, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.15% { -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.996, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 58.26% { -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.002, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.26% { -webkit-transform: matrix3d(1.004, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.004, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 73.67% { -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85.49% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 88.99% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @keyframes jiggle-1 { 0% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.087, 1, 0, 0, 0, 0, 1, 0, 5, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.087, 1, 0, 0, 0, 0, 1, 0, 5, 0, 0, 1); } 3.4% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.052, 1, 0, 0, 0, 0, 1, 0, 3.422, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.052, 1, 0, 0, 0, 0, 1, 0, 3.422, 0, 0, 1); } 4.7% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.035, 1, 0, 0, 0, 0, 1, 0, 2.752, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.035, 1, 0, 0, 0, 0, 1, 0, 2.752, 0, 0, 1); } 6.81% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.009, 1, 0, 0, 0, 0, 1, 0, 1.704, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.009, 1, 0, 0, 0, 0, 1, 0, 1.704, 0, 0, 1); } 9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.015, 1, 0, 0, 0, 0, 1, 0, 0.583, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.015, 1, 0, 0, 0, 0, 1, 0, 0.583, 0, 0, 1); } 10.21% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.02, 1, 0, 0, 0, 0, 1, 0, 0.292, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.02, 1, 0, 0, 0, 0, 1, 0, 0.292, 0, 0, 1); } 13.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.029, 1, 0, 0, 0, 0, 1, 0, -0.616, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.029, 1, 0, 0, 0, 0, 1, 0, -0.616, 0, 0, 1); } 14.11% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.029, 1, 0, 0, 0, 0, 1, 0, -0.705, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.029, 1, 0, 0, 0, 0, 1, 0, -0.705, 0, 0, 1); } 17.52% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.021, 1, 0, 0, 0, 0, 1, 0, -1.039, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.021, 1, 0, 0, 0, 0, 1, 0, -1.039, 0, 0, 1); } 18.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.016, 1, 0, 0, 0, 0, 1, 0, -1.061, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.016, 1, 0, 0, 0, 0, 1, 0, -1.061, 0, 0, 1); } 21.32% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.006, 1, 0, 0, 0, 0, 1, 0, -0.981, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.006, 1, 0, 0, 0, 0, 1, 0, -0.981, 0, 0, 1); } 24.32% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.003, 1, 0, 0, 0, 0, 1, 0, -0.753, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.003, 1, 0, 0, 0, 0, 1, 0, -0.753, 0, 0, 1); } 25.23% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.005, 1, 0, 0, 0, 0, 1, 0, -0.67, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.005, 1, 0, 0, 0, 0, 1, 0, -0.67, 0, 0, 1); } 29.03% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.009, 1, 0, 0, 0, 0, 1, 0, -0.315, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.009, 1, 0, 0, 0, 0, 1, 0, -0.315, 0, 0, 1); } 29.93% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.009, 1, 0, 0, 0, 0, 1, 0, -0.238, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.009, 1, 0, 0, 0, 0, 1, 0, -0.238, 0, 0, 1); } 35.54% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.003, 1, 0, 0, 0, 0, 1, 0, 0.103, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.003, 1, 0, 0, 0, 0, 1, 0, 0.103, 0, 0, 1); } 36.74% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.002, 1, 0, 0, 0, 0, 1, 0, 0.142, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.002, 1, 0, 0, 0, 0, 1, 0, 0.142, 0, 0, 1); } 41.04% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.002, 1, 0, 0, 0, 0, 1, 0, 0.196, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.002, 1, 0, 0, 0, 0, 1, 0, 0.196, 0, 0, 1); } 44.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.003, 1, 0, 0, 0, 0, 1, 0, 0.171, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.003, 1, 0, 0, 0, 0, 1, 0, 0.171, 0, 0, 1); } 52.15% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0.044, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0.044, 0, 0, 1); } 59.86% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.001, 1, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.001, 1, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1); } 63.26% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.001, 1, 0, 0, 0, 0, 1, 0, -0.036, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.001, 1, 0, 0, 0, 0, 1, 0, -0.036, 0, 0, 1); } 75.28% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.006, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.006, 0, 0, 1); } 85.49% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1); } 90.69% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.005, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.005, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @keyframes bounce-up { 0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.3% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.093, 0, 0, 0, 0, 1, 0, 0, -2.81, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.093, 0, 0, 0, 0, 1, 0, 0, -2.81, 0, 1); } 4.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, 0, -2.937, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, 0, -2.937, 0, 1); } 8.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.17, 0, 0, 0, 0, 1, 0, 0, -5.142, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.17, 0, 0, 0, 0, 1, 0, 0, -5.142, 0, 1); } 9.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.176, 0, 0, 0, 0, 1, 0, 0, -5.305, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.176, 0, 0, 0, 0, 1, 0, 0, -5.305, 0, 1); } 12.91% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.214, 0, 0, 0, 0, 1, 0, 0, -6.388, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.214, 0, 0, 0, 0, 1, 0, 0, -6.388, 0, 1); } 13.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.217, 0, 0, 0, 0, 1, 0, 0, -6.478, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.217, 0, 0, 0, 0, 1, 0, 0, -6.478, 0, 1); } 17.22% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.228, 0, 0, 0, 0, 1, 0, 0, -6.711, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.228, 0, 0, 0, 0, 1, 0, 0, -6.711, 0, 1); } 17.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.228, 0, 0, 0, 0, 1, 0, 0, -6.707, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.228, 0, 0, 0, 0, 1, 0, 0, -6.707, 0, 1); } 28.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.208, 0, 0, 0, 0, 1, 0, 0, -6.164, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.208, 0, 0, 0, 0, 1, 0, 0, -6.164, 0, 1); } 29.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.206, 0, 0, 0, 0, 1, 0, 0, -6.133, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.206, 0, 0, 0, 0, 1, 0, 0, -6.133, 0, 1); } 34.63% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.199, 0, 0, 0, 0, 1, 0, 0, -5.978, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.199, 0, 0, 0, 0, 1, 0, 0, -5.978, 0, 1); } 39.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.197, 0, 0, 0, 0, 1, 0, 0, -5.947, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.197, 0, 0, 0, 0, 1, 0, 0, -5.947, 0, 1); } 40.14% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.197, 0, 0, 0, 0, 1, 0, 0, -5.948, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.197, 0, 0, 0, 0, 1, 0, 0, -5.948, 0, 1); } 61.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6.004, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6.004, 0, 1); } 62.36% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6.004, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6.004, 0, 1); } 83.98% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6, 0, 1); } 84.68% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, -6, 0, 1); } } @keyframes border-dance { 0% { background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px; } 100% { background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px; } } @keyframes shimmer { 0% { background-position: 100% 50%; } 20% { background-position: 0% 50%; } } @keyframes tree-shake { 0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.15% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.135, 1, 0, 0, 0, 0, 1, 0, -7.676, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.135, 1, 0, 0, 0, 0, 1, 0, -7.676, 0, 0, 1); } 6.26% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.22, 1, 0, 0, 0, 0, 1, 0, -12.421, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.22, 1, 0, 0, 0, 0, 1, 0, -12.421, 0, 0, 1); } 9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.276, 1, 0, 0, 0, 0, 1, 0, -15.422, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.276, 1, 0, 0, 0, 0, 1, 0, -15.422, 0, 0, 1); } 12.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.31, 1, 0, 0, 0, 0, 1, 0, -17.242, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.31, 1, 0, 0, 0, 0, 1, 0, -17.242, 0, 0, 1); } 18.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.345, 1, 0, 0, 0, 0, 1, 0, -19.041, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.345, 1, 0, 0, 0, 0, 1, 0, -19.041, 0, 0, 1); } 25.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.358, 1, 0, 0, 0, 0, 1, 0, -19.685, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.358, 1, 0, 0, 0, 0, 1, 0, -19.685, 0, 0, 1); } 37.54% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.363, 1, 0, 0, 0, 0, 1, 0, -19.975, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.363, 1, 0, 0, 0, 0, 1, 0, -19.975, 0, 0, 1); } 49.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.364, 1, 0, 0, 0, 0, 1, 0, -20, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.364, 1, 0, 0, 0, 0, 1, 0, -20, 0, 0, 1); } 50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.364, 1, 0, 0, 0, 0, 1, 0, -20, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.364, 1, 0, 0, 0, 0, 1, 0, -20, 0, 0, 1); } 50.4% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.248, 1, 0, 0, 0, 0, 1, 0, -10.48, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.248, 1, 0, 0, 0, 0, 1, 0, -10.48, 0, 0, 1); } 50.79% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.16, 1, 0, 0, 0, 0, 1, 0, -4.635, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.16, 1, 0, 0, 0, 0, 1, 0, -4.635, 0, 0, 1); } 51.18% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.09, 1, 0, 0, 0, 0, 1, 0, -0.786, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.09, 1, 0, 0, 0, 0, 1, 0, -0.786, 0, 0, 1); } 51.56% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.034, 1, 0, 0, 0, 0, 1, 0, 1.854, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.034, 1, 0, 0, 0, 0, 1, 0, 1.854, 0, 0, 1); } 52.35% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.048, 1, 0, 0, 0, 0, 1, 0, 5.24, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.048, 1, 0, 0, 0, 0, 1, 0, 5.24, 0, 0, 1); } 53.13% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.104, 1, 0, 0, 0, 0, 1, 0, 7.352, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.104, 1, 0, 0, 0, 0, 1, 0, 7.352, 0, 0, 1); } 53.15% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.105, 1, 0, 0, 0, 0, 1, 0, 7.41, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.105, 1, 0, 0, 0, 0, 1, 0, 7.41, 0, 0, 1); } 54.69% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.174, 1, 0, 0, 0, 0, 1, 0, 10.275, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.174, 1, 0, 0, 0, 0, 1, 0, 10.275, 0, 0, 1); } 56.26% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.218, 1, 0, 0, 0, 0, 1, 0, 12.418, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.218, 1, 0, 0, 0, 0, 1, 0, 12.418, 0, 0, 1); } 59.41% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.276, 1, 0, 0, 0, 0, 1, 0, 15.422, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.276, 1, 0, 0, 0, 0, 1, 0, 15.422, 0, 0, 1); } 62.5% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.31, 1, 0, 0, 0, 0, 1, 0, 17.236, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.31, 1, 0, 0, 0, 0, 1, 0, 17.236, 0, 0, 1); } 62.51% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.31, 1, 0, 0, 0, 0, 1, 0, 17.242, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.31, 1, 0, 0, 0, 0, 1, 0, 17.242, 0, 0, 1); } 68.77% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.345, 1, 0, 0, 0, 0, 1, 0, 19.041, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.345, 1, 0, 0, 0, 0, 1, 0, 19.041, 0, 0, 1); } 75.03% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.358, 1, 0, 0, 0, 0, 1, 0, 19.685, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.358, 1, 0, 0, 0, 0, 1, 0, 19.685, 0, 0, 1); } 87.54% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.363, 1, 0, 0, 0, 0, 1, 0, 19.975, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.363, 1, 0, 0, 0, 0, 1, 0, 19.975, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.364, 1, 0, 0, 0, 0, 1, 0, 20, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.364, 1, 0, 0, 0, 0, 1, 0, 20, 0, 0, 1); } } @keyframes tree-shake { 0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.15% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.067, 1, 0, 0, 0, 0, 1, 0, -3.838, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.067, 1, 0, 0, 0, 0, 1, 0, -3.838, 0, 0, 1); } 6.26% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.109, 1, 0, 0, 0, 0, 1, 0, -6.211, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.109, 1, 0, 0, 0, 0, 1, 0, -6.211, 0, 0, 1); } 9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.135, 1, 0, 0, 0, 0, 1, 0, -7.711, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.135, 1, 0, 0, 0, 0, 1, 0, -7.711, 0, 0, 1); } 12.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.152, 1, 0, 0, 0, 0, 1, 0, -8.621, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.152, 1, 0, 0, 0, 0, 1, 0, -8.621, 0, 0, 1); } 18.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.168, 1, 0, 0, 0, 0, 1, 0, -9.521, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.168, 1, 0, 0, 0, 0, 1, 0, -9.521, 0, 0, 1); } 25.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.173, 1, 0, 0, 0, 0, 1, 0, -9.843, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.173, 1, 0, 0, 0, 0, 1, 0, -9.843, 0, 0, 1); } 37.54% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.176, 1, 0, 0, 0, 0, 1, 0, -9.987, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.176, 1, 0, 0, 0, 0, 1, 0, -9.987, 0, 0, 1); } 49.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.176, 1, 0, 0, 0, 0, 1, 0, -10, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.176, 1, 0, 0, 0, 0, 1, 0, -10, 0, 0, 1); } 50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.176, 1, 0, 0, 0, 0, 1, 0, -10, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.176, 1, 0, 0, 0, 0, 1, 0, -10, 0, 0, 1); } 50.4% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.118, 1, 0, 0, 0, 0, 1, 0, -5.24, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.118, 1, 0, 0, 0, 0, 1, 0, -5.24, 0, 0, 1); } 50.79% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.075, 1, 0, 0, 0, 0, 1, 0, -2.318, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.075, 1, 0, 0, 0, 0, 1, 0, -2.318, 0, 0, 1); } 51.18% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.041, 1, 0, 0, 0, 0, 1, 0, -0.393, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.041, 1, 0, 0, 0, 0, 1, 0, -0.393, 0, 0, 1); } 51.56% { -webkit-transform: matrix3d(1, 0, 0, 0, 0.014, 1, 0, 0, 0, 0, 1, 0, 0.927, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0.014, 1, 0, 0, 0, 0, 1, 0, 0.927, 0, 0, 1); } 52.35% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.026, 1, 0, 0, 0, 0, 1, 0, 2.62, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.026, 1, 0, 0, 0, 0, 1, 0, 2.62, 0, 0, 1); } 53.13% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.053, 1, 0, 0, 0, 0, 1, 0, 3.676, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.053, 1, 0, 0, 0, 0, 1, 0, 3.676, 0, 0, 1); } 53.15% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.053, 1, 0, 0, 0, 0, 1, 0, 3.705, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.053, 1, 0, 0, 0, 0, 1, 0, 3.705, 0, 0, 1); } 54.69% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.087, 1, 0, 0, 0, 0, 1, 0, 5.137, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.087, 1, 0, 0, 0, 0, 1, 0, 5.137, 0, 0, 1); } 56.26% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.108, 1, 0, 0, 0, 0, 1, 0, 6.209, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.108, 1, 0, 0, 0, 0, 1, 0, 6.209, 0, 0, 1); } 59.41% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.135, 1, 0, 0, 0, 0, 1, 0, 7.711, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.135, 1, 0, 0, 0, 0, 1, 0, 7.711, 0, 0, 1); } 62.5% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.152, 1, 0, 0, 0, 0, 1, 0, 8.618, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.152, 1, 0, 0, 0, 0, 1, 0, 8.618, 0, 0, 1); } 62.51% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.152, 1, 0, 0, 0, 0, 1, 0, 8.621, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.152, 1, 0, 0, 0, 0, 1, 0, 8.621, 0, 0, 1); } 68.77% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.168, 1, 0, 0, 0, 0, 1, 0, 9.521, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.168, 1, 0, 0, 0, 0, 1, 0, 9.521, 0, 0, 1); } 75.03% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.173, 1, 0, 0, 0, 0, 1, 0, 9.843, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.173, 1, 0, 0, 0, 0, 1, 0, 9.843, 0, 0, 1); } 87.54% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.176, 1, 0, 0, 0, 0, 1, 0, 9.987, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.176, 1, 0, 0, 0, 0, 1, 0, 9.987, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, -0.176, 1, 0, 0, 0, 0, 1, 0, 10, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, -0.176, 1, 0, 0, 0, 0, 1, 0, 10, 0, 0, 1); } } @keyframes shadow-shake { 0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.15% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.838, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.838, 0, 0, 1); } 6.26% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.211, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.211, 0, 0, 1); } 9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -7.711, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -7.711, 0, 0, 1); } 12.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -8.621, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -8.621, 0, 0, 1); } 18.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.521, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.521, 0, 0, 1); } 25.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.843, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.843, 0, 0, 1); } 37.54% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.987, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.987, 0, 0, 1); } 49.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10, 0, 0, 1); } 50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10, 0, 0, 1); } 50.4% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.24, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.24, 0, 0, 1); } 50.79% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.318, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.318, 0, 0, 1); } 51.18% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.393, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.393, 0, 0, 1); } 51.56% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.927, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.927, 0, 0, 1); } 52.35% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.62, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.62, 0, 0, 1); } 53.13% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.676, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.676, 0, 0, 1); } 53.15% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.705, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.705, 0, 0, 1); } 56.26% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 6.209, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 6.209, 0, 0, 1); } 59.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.711, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.711, 0, 0, 1); } 62.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 8.618, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 8.618, 0, 0, 1); } 62.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 8.621, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 8.621, 0, 0, 1); } 68.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.521, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.521, 0, 0, 1); } 75.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.843, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.843, 0, 0, 1); } 87.54% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.987, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.987, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10, 0, 0, 1); } } @keyframes emoji-float-up { 0% { opacity: 0; transform: scale(1.2) translateY(0); } 10% { opacity: 0.9; } 50% { opacity: 0.9; } 100% { opacity: 0; transform: scale(0.7) translateY(-200px); } } .clock { position: relative; height: 40px; width: 40px; background: white; box-sizing: border-box; border-radius: 100%; border: 6px solid rgba(0, 0, 0, 0.1); } .clock.is-small { height: 20px; width: 20px; min-width: 20px; min-height: 20px; border-width: 4px; } .clock.is-small .hour:before { height: 6px; width: 2px; top: 0; left: -1px; } .clock .center { height: 4px; width: 4px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: #8a8a8a; border-radius: 100%; } .clock .hour { width: 0px; height: 100%; position: absolute; left: 0; right: 0; margin: 0 auto; animation: time 10s infinite linear; } .clock .hour:before { position: absolute; content: ""; background: #8a8a8a; height: 11px; width: 2px; top: 3px; left: -1px; } @keyframes time { to { transform: rotate(360deg); } } @keyframes water-float { 0% { transform: translateY(0px); } 25% { transform: translateY(3px) translateX(-1deg); } 50% { transform: translateY(5px); } 25% { transform: translateY(2px) translateX(1deg); } 100% { transform: translateY(0px); } } @keyframes boat-float { 0% { transform: translateY(0px); } 50% { transform: translateY(5px); } 100% { transform: translateY(0px); } } .boat { position: relative; background-image: url("/assets/boats/basic_white-c30eee2a.svg"); animation: boat-float 12s ease-in-out infinite; background-size: cover; background-position: center; background-repeat: no-repeat; } .boat.is-basic-pink { background-image: url("/assets/boats/basic_pink-c83d22c2.svg"); } .boat.is-basic-purple { background-image: url("/assets/boats/basic_purple-8f2b2a86.svg"); } .boat.is-basic-green { background-image: url("/assets/boats/basic_green-1d95e6d7.svg"); } .boat.is-basic-orange { background-image: url("/assets/boats/basic_orange-da755b82.svg"); } .boat.is-waterless:after { background: none; animation: none; } .boat:after { position: absolute; content: ""; width: 100%; height: 100%; background-image: url("/assets/boats/water-26491a76.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; animation: water-float 6s ease-in-out infinite; } /* Trix 1.1.1 Copyright © 2019 Basecamp, LLC http://trix-editor.org/*/ trix-editor { border: 1px solid #bbb; border-radius: 3px; margin: 0; padding: 0.4em 0.6em; min-height: 5em; outline: none; } trix-toolbar * { box-sizing: border-box; } trix-toolbar .trix-button-row { display: flex; flex-wrap: nowrap; justify-content: space-between; } trix-toolbar .trix-button-group { display: flex; margin-bottom: 10px; border: 1px solid #bbb; border-top-color: #ccc; border-bottom-color: #888; border-radius: 3px; } trix-toolbar .trix-button-group:not(:first-child) { margin-left: 1.5vw; } @media (max-device-width: 768px) { trix-toolbar .trix-button-group:not(:first-child) { margin-left: 0; } } trix-toolbar .trix-button-group-spacer { flex-grow: 1; } @media (max-device-width: 768px) { trix-toolbar .trix-button-group-spacer { display: none; } } trix-toolbar .trix-button { position: relative; float: left; color: rgba(0, 0, 0, 0.6); font-size: 0.75em; font-weight: 600; white-space: nowrap; padding: 0 0.5em; margin: 0; outline: none; border: none; border-bottom: 1px solid #ddd; border-radius: 0; background: transparent; } trix-toolbar .trix-button:not(:first-child) { border-left: 1px solid #ccc; } trix-toolbar .trix-button.trix-active { background: #cbeefa; color: black; } trix-toolbar .trix-button:not(:disabled) { cursor: pointer; } trix-toolbar .trix-button:disabled { color: rgba(0, 0, 0, 0.125); } @media (max-device-width: 768px) { trix-toolbar .trix-button { letter-spacing: -0.01em; padding: 0 0.3em; } } trix-toolbar .trix-button--icon { font-size: inherit; width: 2.6em; height: 1.6em; max-width: calc(0.8em + 4vw); text-indent: -9999px; } @media (max-device-width: 768px) { trix-toolbar .trix-button--icon { height: 2em; max-width: calc(0.8em + 3.5vw); } } trix-toolbar .trix-button--icon::before { display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.6; content: ""; background-position: center; background-repeat: no-repeat; background-size: contain; } @media (max-device-width: 768px) { trix-toolbar .trix-button--icon::before { right: 6%; left: 6%; } } trix-toolbar .trix-button--icon.trix-active::before { opacity: 1; } trix-toolbar .trix-button--icon:disabled::before { opacity: 0.125; } trix-toolbar .trix-button--icon-bold::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-italic::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-link::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-strike::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-quote::before { background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-heading-1::before { background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-code::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-bullet-list::before { background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-number-list::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-undo::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-redo::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-decrease-nesting-level::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-button--icon-increase-nesting-level::before { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); } trix-toolbar .trix-dialogs { position: relative; } trix-toolbar .trix-dialog { position: absolute; top: 0; left: 0; right: 0; font-size: 0.75em; padding: 15px 10px; background: #fff; box-shadow: 0 0.3em 1em #ccc; border-top: 2px solid #888; border-radius: 5px; z-index: 5; } trix-toolbar .trix-input--dialog { font-size: inherit; font-weight: normal; padding: 0.5em 0.8em; margin: 0 10px 0 0; border-radius: 3px; border: 1px solid #bbb; background-color: #fff; box-shadow: none; outline: none; -webkit-appearance: none; -moz-appearance: none; } trix-toolbar .trix-input--dialog.validate:invalid { box-shadow: #F00 0px 0px 1.5px 1px; } trix-toolbar .trix-button--dialog { font-size: inherit; padding: 0.5em; border-bottom: none; } trix-toolbar .trix-dialog--link { max-width: 600px; } trix-toolbar .trix-dialog__link-fields { display: flex; align-items: baseline; } trix-toolbar .trix-dialog__link-fields .trix-input { flex: 1; } trix-toolbar .trix-dialog__link-fields .trix-button-group { flex: 0 0 content; margin: 0; } trix-editor [data-trix-mutable]:not(.attachment__caption-editor) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } trix-editor [data-trix-mutable]::-moz-selection, trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection { background: none; } trix-editor [data-trix-mutable]::selection, trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection { background: none; } trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection { background: highlight; } trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection { background: highlight; } trix-editor [data-trix-mutable].attachment.attachment--file { box-shadow: 0 0 0 2px highlight; border-color: transparent; } trix-editor [data-trix-mutable].attachment img { box-shadow: 0 0 0 2px highlight; } trix-editor .attachment { position: relative; } trix-editor .attachment:hover { cursor: default; } trix-editor .attachment--preview .attachment__caption:hover { cursor: text; } trix-editor .attachment__progress { position: absolute; z-index: 1; height: 20px; top: calc(50% - 10px); left: 5%; width: 90%; opacity: 0.9; transition: opacity 200ms ease-in; } trix-editor .attachment__progress[value="100"] { opacity: 0; } trix-editor .attachment__caption-editor { display: inline-block; width: 100%; margin: 0; padding: 0; font-size: inherit; font-family: inherit; line-height: inherit; color: inherit; text-align: center; vertical-align: top; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; } trix-editor .attachment__toolbar { position: absolute; z-index: 1; top: -0.9em; left: 0; width: 100%; text-align: center; } trix-editor .trix-button-group { display: inline-flex; } trix-editor .trix-button { position: relative; float: left; color: #666; white-space: nowrap; font-size: 80%; padding: 0 0.8em; margin: 0; outline: none; border: none; border-radius: 0; background: transparent; } trix-editor .trix-button:not(:first-child) { border-left: 1px solid #ccc; } trix-editor .trix-button.trix-active { background: #cbeefa; } trix-editor .trix-button:not(:disabled) { cursor: pointer; } trix-editor .trix-button--remove { text-indent: -9999px; display: inline-block; padding: 0; outline: none; width: 1.8em; height: 1.8em; line-height: 1.8em; border-radius: 50%; background-color: #fff; border: 2px solid highlight; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); } trix-editor .trix-button--remove::before { display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.7; content: ""; background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E); background-position: center; background-repeat: no-repeat; background-size: 90%; } trix-editor .trix-button--remove:hover { border-color: #333; } trix-editor .trix-button--remove:hover::before { opacity: 1; } trix-editor .attachment__metadata-container { position: relative; } trix-editor .attachment__metadata { position: absolute; left: 50%; top: 2em; transform: translate(-50%, 0); max-width: 90%; padding: 0.1em 0.6em; font-size: 0.8em; color: #fff; background-color: rgba(0, 0, 0, 0.7); border-radius: 3px; } trix-editor .attachment__metadata .attachment__name { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } trix-editor .attachment__metadata .attachment__size { margin-left: 0.2em; white-space: nowrap; } .trix-content { line-height: 1.5; } .trix-content * { box-sizing: border-box; } .trix-content h1 { font-size: 1.2em; line-height: 1.2; margin: 0; } .trix-content blockquote { margin: 0 0 0 0.3em; padding: 0 0 0 0.6em; border-left: 0.3em solid #ccc; } .trix-content pre { display: inline-block; width: 100%; vertical-align: top; font-family: monospace; font-size: 0.9em; margin: 0; padding: 0.5em; white-space: pre; background-color: #eee; overflow-x: auto; } .trix-content ul, .trix-content ol, .trix-content li { margin: 0; padding: 0; } .trix-content ul li, .trix-content ol li, .trix-content li li { margin-left: 1em; } .trix-content img { max-width: 100%; height: auto; } .trix-content .attachment { display: inline-block; position: relative; max-width: 100%; margin: 0; padding: 0; } .trix-content .attachment a { color: inherit; text-decoration: none; } .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover { color: inherit; } .trix-content .attachment__caption { padding: 0; text-align: center; } .trix-content .attachment__caption .attachment__name + .attachment__size::before { content: " · "; } .trix-content .attachment--preview { width: 100%; text-align: center; } .trix-content .attachment--preview .attachment__caption { color: #666; font-size: 0.9em; line-height: 1.2; } .trix-content .attachment--file { color: #333; line-height: 1; margin: 0 2px 2px 0; padding: 0.4em 1em; border: 1px solid #bbb; border-radius: 5px; } .trix-content .attachment-gallery { display: flex; flex-wrap: wrap; position: relative; margin: 0; padding: 0; } .trix-content .attachment-gallery .attachment { flex: 1 0 33%; padding: 0 0.5em; max-width: 33%; } .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment { flex-basis: 50%; max-width: 50%; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: 900px; margin: 0 auto; padding: 0 12px; } .screen-container { padding-top: 80px; } nav.main-nav { display: flex; min-height: 50px; justify-content: space-between; align-items: center; z-index: 1101; left: 0; top: 0; width: 100%; max-width: 100vw; margin-bottom: 12px; } @media (min-width: 37.5em) { nav.main-nav { margin-bottom: 6px; } } nav.main-nav h1 { font-weight: bold; text-decoration: none; } nav.main-nav a { text-decoration: none; z-index: 1; } nav.main-nav .logo h1 { display: none; } nav.main-nav .logo { height: 60px; width: 110px; background-image: url("/assets/logo/ooze_saga_logo-e7aadb5e.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; transition: transform 0.2s ease-in-out; margin: 0 12px; } @media (min-width: 37.5em) { nav.main-nav .logo { height: 80px; width: 120px; } } nav.main-nav .logo:hover { transform: translateX(4px); animation: rotate-color 2s infinite; } nav.main-nav .is-signin:hover { border-color: transparent !important; } nav.main-nav .nav-links { z-index: 1102; height: 100%; position: fixed; right: 0; top: 0; width: 60%; max-width: 250px; background-color: white; border-left: 4px solid black; transition: transform 0.15s ease-in-out; } nav.main-nav .nav-links.is-hidden { transform: translateX(110%); } nav.main-nav .nav-link { display: flex; align-items: center; padding: 12px; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; } nav.main-nav .nav-link:hover { background-color: rgba(0, 0, 0, 0.1); } nav.main-nav .nav-link.is-current { pointer-events: none; } nav.main-nav .nav-link:before { content: ""; background-size: contain; display: block; width: 30px; height: 30px; margin-right: 12px; background-repeat: no-repeat; } nav.main-nav .nav-link.is-shed:before { background-image: url("/assets/icons/shed_icon-c61b8781.svg"); } nav.main-nav .nav-link.is-shed.is-current, nav.main-nav .nav-link.is-shed:hover { background-color: #fff6ad; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23c3bb7d' fill-opacity='0.14'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } nav.main-nav .nav-link.is-farm:before { background-image: url("/assets/icons/farm_icon-49ada9f1.svg"); } nav.main-nav .nav-link.is-farm.is-current, nav.main-nav .nav-link.is-farm:hover { background-image: url("/assets/farm/borders/farm_border_1-17fe577b.svg"); } nav.main-nav .nav-link.is-forums:before { display: none; } nav.main-nav .nav-link.is-profile:before { background-image: url("/assets/icons/mojo_icon-ee33a43a.svg"); } nav.main-nav .nav-link.is-profile.is-current, nav.main-nav .nav-link.is-profile:hover { background-color: #deb56f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cpath fill='%23b8952b' fill-opacity='0.4' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E"); } nav.main-nav .nav-link.is-castlebrook:before { background-image: url("/assets/icons/castlebrook_icon-9dbe82e5.svg"); } nav.main-nav .nav-link.is-castlebrook.is-current, nav.main-nav .nav-link.is-castlebrook:hover { background-color: #bce8fb; background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%239ec8da' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E"); } nav.main-nav .nav-link.is-high-seas:before { background-image: url("/assets/boats/basic_white-c30eee2a.svg"); } nav.main-nav .nav-link.is-high-seas.is-current, nav.main-nav .nav-link.is-high-seas:hover { background-color: #acd3e4; background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%239ec8da' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E"); } .nav-link .nav-alert { margin-left: 0.4rem; display: inline-flex; align-items: center; justify-content: center; color: #b81844; font-size: 1.2rem; line-height: 1; animation: navAlertPulse 1.8s ease-in-out infinite; } .nav-link .nav-alert i { line-height: 1; } @keyframes navAlertPulse { 0% { transform: translateY(0); } 50% { transform: translateY(-1px) scale(1.05); } 100% { transform: translateY(0); } } nav.main-nav .nav-link.is-signout:hover { background-color: #ff7f7f; } nav.main-nav .nav-link.is-inbox.is-current, nav.main-nav .nav-link.is-inbox:hover { background-color: #e1d4ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='77' height='107' viewBox='0 0 77 107'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='stamp-collection' fill='%23a492ce' fill-opacity='0.07'%3E%3Cpath d='M46 101a5 5 0 0 1 5 5h5a5 5 0 0 1 10 0h5a5 5 0 0 1 5-5v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10V6a5 5 0 0 1-5-5h-5a5 5 0 0 1-10 0h-5a5 5 0 0 1-10 0h-5a5 5 0 0 1-10 0h-5a5 5 0 0 1-10 0H6a5 5 0 0 1-5 5v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 5 5h5a5 5 0 0 1 10 0h5a5 5 0 0 1 10 0h5a5 5 0 0 1 5-5zm15-2a7 7 0 0 0-6.71 5h-1.58a7 7 0 0 0-13.42 0h-1.58a7 7 0 0 0-13.42 0h-1.58a7 7 0 0 0-13.42 0H7.71A7.01 7.01 0 0 0 3 99.29v-1.58a7 7 0 0 0 0-13.42v-1.58a7 7 0 0 0 0-13.42v-1.58a7 7 0 0 0 0-13.42v-1.58a7 7 0 0 0 0-13.42v-1.58a7 7 0 0 0 0-13.42v-1.58A7 7 0 0 0 3 9.29V7.71A7.02 7.02 0 0 0 7.71 3h1.58a7 7 0 0 0 13.42 0h1.58a7 7 0 0 0 13.42 0h1.58a7 7 0 0 0 13.42 0h1.58a7 7 0 0 0 13.42 0h1.58A7.02 7.02 0 0 0 74 7.71v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7.01 7.01 0 0 0-4.71 4.71h-1.58A7 7 0 0 0 61 99zM12 12h53v83H12V12zm51 81H14V14h49v79z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .nav-mojo { cursor: pointer; display: flex; align-items: center; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; height: 20px; line-height: 20px; min-width: 24px; font-size: 1.2rem; font-weight: 600; text-align: center; transition: transform 0.1s ease-in-out; margin: 6px; padding: 6px 0; } .wave-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.8rem; border-radius: 999px; border: 2px solid #000; background: linear-gradient(120deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)); box-shadow: 0 3px 0 rgba(0,0,0,0.2); font-family: "Baloo", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; } .wave-chip-label { color: #444; font-size: 0.7rem; } .wave-chip-value { font-size: 1rem; color: #111; } .wave-chip-total { color: #666; font-size: 0.8rem; } .nav-mojo:before { content: ""; background-image: url("/assets/icons/mojo_icon-ee33a43a.svg"); height: 20px; width: 20px; background-size: 100%; background-repeat: no-repeat; } @media (min-width: 37.5em) { .nav-mojo { height: 40px; line-height: 40px; font-size: 1.4rem; padding: 12px 0; margin: 12px; } .nav-mojo:hover { transform: scale(1.1); animation: rotate-color 3s infinite; } .nav-mojo:before { height: 40px; width: 40px; } } h1, h2, h3, h4, h5, h6 { font-weight: 500; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; } .hh { font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; font-weight: 500; } a { color: #1f0a47; } html, body { font-size: 16px; font-family: "Roboto", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; cursor: default; } .creature { background-color: rgba(0, 0, 0, 0.1); display: inline-block; padding: 1rem; } .back-link { cursor: pointer; display: inline-block; color: white; background-color: rgba(0, 0, 0, 0.4); font-size: 0.6rem; padding: 6px 12px; letter-spacing: 1.5px; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; text-align: center; text-decoration: none; text-transform: uppercase; border-radius: 6px; margin: 24px; width: 140px; } .quote { position: relative; padding-left: 1rem; } .quote:before { content: '"'; font-size: 3rem; position: absolute; left: -1rem; top: 0.2rem; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; } .button { background-color: white; color: black; font-size: 0.8rem; letter-spacing: 1px; padding: 6px 12px; text-decoration: none !important; text-align: center; border-radius: 6px; border: 3px solid black; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; width: 100%; } @media (min-width: 64em) { .button { width: auto; } } .button.is-disabled, .button:disabled { cursor: not-allowed; opacity: 0.6; } .button.is-link { border: 0; padding: 6px 0; border-radius: 0; background-color: transparent; border-bottom: 2px solid rgba(0, 0, 0, 0.4); border-color: transparent; } .button.is-link:hover { border-color: black; } .button.is-blue { background-color: #7fd8ff; } .button.is-red { background-color: #ff7f7f; } .button.is-purple { background-color: #a57fff; } .button.is-purple-light { background-color: #d2bfff; } .button.is-yellow { background-color: #fff17f; } .button.is-green { background-color: #83ffcd; } /* Cost Button — Unified currency cost action */ .cost-button { display: inline-flex; align-items: center; justify-content: center; background-color: #fff17f; } .cost-button .cost-button__label { white-space: nowrap; } .cost-button .cost-button__price { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding-left: 10px; border-left: 2px solid rgba(0, 0, 0, 0.15); white-space: nowrap; } .cost-button .cost-button__price .mojo-icon, .cost-button .cost-button__price .dw-token-icon { width: 1.2rem; height: 1.2rem; } .cost-button.is-small .cost-button__price { margin-left: 6px; padding-left: 6px; } .cost-button.is-small .cost-button__price .mojo-icon, .cost-button.is-small .cost-button__price .dw-token-icon { width: 0.9rem; height: 0.9rem; } .button.is-black { background-color: black; color: white; } .button.is-text-purple { color: #a57fff; } .button.is-danger { background-color: darkred; color: white; } .button.is-raised { box-shadow: 3px 3px 0 0 black; transition: box-shadow 0.1s ease-in-out; } .button.is-raised:hover { box-shadow: 4px 4px 0 0 black; } .button.is-signup:hover { background: linear-gradient(140deg, #83ffcd, #ffc183); animation: rotate-color 0.4s infinite; color: black; } .button.is-small { font-size: 0.6rem; padding: 6px 12px; letter-spacing: 1.5px; line-height: 0.8rem; } .button.is-large { font-size: 1rem; padding: 16px 36px; } .button:hover { text-decoration: none; } /* Form Inputs */ .form-inputs .form-group { margin-bottom: 12px; } .form-inputs label { font-weight: bold; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", monospace; display: block; margin-bottom: 6px; } .form-inputs abbr[title] { text-decoration: none; color: #ff7f7f; } .form-inputs input[type=text], .form-inputs input[type=email], .form-inputs input[type=password], .form-inputs input[type=number], .form-inputs textarea, .form-inputs select, .form-control { width: 100%; padding: 12px; border-radius: 6px; border: 3px solid black; background-color: white; } .form-inputs input:focus, .form-inputs textarea:focus, .form-inputs select:focus, .form-control:focus { outline: none; border-color: #83ffcd; } .form-inputs input[type=checkbox] { width: 18px; height: 18px; margin-right: 8px; } .form-inputs .hint { font-size: 0.75rem; color: rgba(0, 0, 0, 0.6); margin-top: 4px; } .form-inputs .error { color: #ff7f7f; font-size: 0.8rem; margin-top: 4px; } .form-inputs .boolean label { font-weight: normal; } .error_notification { background-color: #ffe0e0; border: 3px solid #ff7f7f; border-radius: 6px; padding: 12px; margin-bottom: 1rem; color: #8b0000; } .question { opacity: 0.4; display: inline-block; background-color: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.8); font-weight: 400; border-radius: 100%; width: 1rem; height: 1rem; min-width: 1rem; min-height: 1rem; line-height: 1rem; font-size: 0.6rem; margin-left: 6px; } .question.is-white { background: white; color: black; } .opacity-0 { pointer-events: none; opacity: 0 !important; } .entity-box-container { display: flex; } @media (min-width: 64em) { .entity-box-container { justify-content: center; } } .entity-box-container .entity-box { width: 30px; height: 30px; border-radius: 6px; border: 3px dashed rgba(0, 0, 0, 0.2); transition: transform 0.1s ease-out; } .entity-box-container .entity-box.is-animated { background: linear-gradient(90deg, #6877da 50%, transparent 50%), linear-gradient(90deg, #6877da 50%, transparent 50%), linear-gradient(0deg, #6877da 50%, transparent 50%), linear-gradient(0deg, #6877da 50%, transparent 50%); animation: border-dance 4s infinite linear; } .entity-box-container .entity-box.is-animated-2 { background: linear-gradient(90deg, #6877da 50%, transparent 50%), linear-gradient(90deg, #6877da 50%, transparent 50%), linear-gradient(0deg, #6877da 50%, transparent 50%), linear-gradient(0deg, #6877da 50%, transparent 50%); animation: border-dance 3.5s infinite linear; } .entity-box-container .entity-box.is-large { width: 120px; height: 120px; border-color: rgba(0, 0, 0, 0.4); border-width: 5px; } .entity-box-container .entity-box.filled { border-color: transparent; } .entity-box-container .entity-box .object-card { min-width: auto; min-height: auto; width: 100%; height: 100%; box-shadow: none; } .entity-box-container .entity-box .object-card .object-card-name, .entity-box-container .entity-box .object-card .object-helper, .entity-box-container .entity-box .object-card .object-card-effect { display: none; } .entity-box-container .entity-box .object-card .object-card-image { height: 70px; width: 70px; } .entity-box-container .entity-box .object-card .is-order-remove { display: block; } .entity-box-container .entity-box .object-card .is-order-add { display: none; } .user-entities { display: flex; padding-top: 24px; padding-bottom: 12px; -webkit-overflow-scrolling: touch; overflow-y: hidden; overflow-x: scroll; align-items: flex-end; margin-top: 12px; margin-bottom: 12px; } .user-entities::-webkit-scrollbar-track { background: black; } @media (min-width: 64em) { .user-entities { overflow: auto; } } .user-entities .object-card { min-width: 160px; } .user-entities .object-card .object-card-image { height: 100px; } .user-entities .object-card .object-card-name { line-height: 1.2rem; } .user-entities .object-card .object-card-effect p { font-size: 1rem; } .user-entities .object-card .button.is-order-add, .user-entities .object-card .button.is-order-remove { position: absolute; font-size: 1.2rem; bottom: 6px; right: 6px; transition: all 0.15s ease-out; } .user-entities .object-card .button.is-order-add:hover, .user-entities .object-card .button.is-order-remove:hover { transform: scale(1.1); } .user-entities .object-card .button.is-order-add, .user-entities .object-card .button.is-order-remove { max-width: 60px; } .user-entities .object-card .is-order-remove { display: none; } .filters .is-active { border-radius: 4px; background-color: black; color: white; } .buildings { display: flex; flex-wrap: wrap; } .buildings .building-card { cursor: pointer; flex-grow: 1; position: relative; min-width: 300px; min-height: 120px; max-width: 100vw; background-color: white; border-radius: 6px; border: 4px solid black; box-shadow: 3px 3px 0 0 black; transition: box-shadow 0.1s ease-in-out; padding: 24px; margin-bottom: 24px; margin: 6px; } @media (min-width: 64em) { .buildings .building-card { margin: 24px; min-width: 400px; } } .buildings .building-card:hover { box-shadow: 4px 4px 0 0 black; } .buildings .building-card:hover .building-card-image { animation: bounce-up 1s ease-in-out forwards; } .buildings .building-card .building-card-title { z-index: 2; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; position: absolute; top: 15%; right: 10%; font-size: 1.4rem; max-width: 60%; text-align: right; } .buildings .building-card .building-card-image { z-index: 1; position: absolute; left: 5%; bottom: 0; width: 40%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; } .count-container { position: relative; } .object-count { cursor: default; z-index: 3; position: absolute; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; bottom: 0; right: 0; min-width: 40px; min-height: 40px; width: 40px; height: 40px; line-height: 31px; font-size: 1.1rem; font-weight: 600; background-color: #fff17f; border-radius: 100%; border: 4px solid black; text-align: center; cursor: default; transition: all 0.15s ease-in-out; } .text-purple { color: #a57fff; } .text-red { color: #ff7f7f; } h2.creature-header { border-bottom: 4px solid #a57fff; display: inline-block; } h2.tools-header { border-bottom: 4px solid #7fd8ff; display: inline-block; } h2.materials-header { border-bottom: 4px solid #ffc183; display: inline-block; } .entity-actions { display: flex; flex-wrap: wrap; margin: 0 auto; width: 380px; max-width: 85vw; } .entity-actions .button { display: block; margin-right: 6px; margin-bottom: 6px; } .card { padding: 24px; background-color: white; border-radius: 6px; border: 4px solid black; position: relative; transition: box-shadow 0.15s ease-out; line-height: 1.4rem; } @media (min-width: 37.5em) { .card { padding: 48px; } } .card .character-name { font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; color: rgba(0, 0, 0, 0.5); margin-bottom: 12px; } .card.is-narrative { position: relative; } .card.is-narrative .body-text, .card.is-narrative p { max-width: calc(100% - 120px); } @media (min-width: 37.5em) { .card.is-narrative .body-text, .card.is-narrative p { max-width: calc(100% - 160px); } } .card .card-character { pointer-events: none; background-size: contain; background-position: center bottom; background-repeat: no-repeat; position: absolute; right: 12px; bottom: 0; height: 120px; width: 120px; } @media (min-width: 37.5em) { .card .card-character { height: 160px; width: 160px; } } .card .card-character.is-o { background-image: url("/assets/characters/o/o-df3166ec.svg"); } .card .card-character.is-o-hooded { background-image: url("/assets/characters/o/o_hooded-58f391b7.svg"); } .card .card-character.is-gregory { background-image: url("/assets/characters/gregory/gregory_bust-0465667a.svg"); } .card .card-character.is-rickshaw { background-image: url("/assets/characters/rickshaw/rickshaw_bust-113f84d8.svg"); } .card .card-character.is-hendrick { background-image: url("/assets/characters/hendrick/hendrick_bust-967ca0cf.svg"); } .card .card-character.is-scooter { background-image: url("/assets/characters/scooter/scooter_bust-9127f936.svg"); } .card .card-character.is-egidia { background-image: url("/assets/characters/egidia/egidia_bust-3490a42e.svg"); } .card .card-character.is-giles { background-image: url("/assets/characters/giles/giles_bust-e3719bbf.svg"); } .card .card-character.is-combat-fairy { background-image: url("/assets/characters/combat_fairy/combat_fairy_bust-57a2161e.svg"); } .card.is-raised { box-shadow: 6px 6px 0 0 black; } .card.is-narrow { padding: 12px; } @media (min-width: 37.5em) { .card.is-narrow { padding: 24px; } } .card.is-super-narrow { padding: 6px; } @media (min-width: 37.5em) { .card.is-super-narrow { padding: 12px; } } .card.is-modal { position: fixed; z-index: 1105; width: 100vh; max-width: 95vw; } @media (min-width: 37.5em) { .card.is-modal { width: 65vw; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } } .card.is-dismissed { transform: translateX(100vw); } .card.is-green { border-color: #83ffcd; } .card.is-green.is-raised { box-shadow: 8px 8px 0 0 #83ffcd; } .card.is-bg-green { background-color: #83ffcd; } .card.is-yellow { border-color: #fff17f; } .card.is-yellow.is-raised { box-shadow: 8px 8px 0 0 #fff17f; } .card.is-bg-yellow { background-color: #fff17f; } .card.is-purple { border-color: #a57fff; } .card.is-purple.is-raised { box-shadow: 8px 8px 0 0 #a57fff; } .card.is-bg-purple { background-color: #a57fff; } .card.is-orange { border-color: #ffc183; } .card.is-orange.is-raised { box-shadow: 8px 8px 0 0 #ffc183; } .card.is-bg-orange { background-color: #ffc183; } .card.is-bg-purple { background-color: #ffc183; } .card.is-blue { border-color: #7fd8ff; } .card.is-blue.is-raised { box-shadow: 8px 8px 0 0 #7fd8ff; } .card.is-red { border-color: #ff7f7f; } .card.is-red.is-raised { box-shadow: 8px 8px 0 0 #ff7f7f; } .card.is-bg-purple { background-color: #a57fff; } .card.is-bg-purple.is-raised { box-shadow: 8px 8px 0 0 #a57fff; } .card.is-bg-red { background-color: #ff7f7f; border-color: black; } .card.is-bg-red.is-raised { box-shadow: 8px 8px 0 0 black; } .card.is-orange-dark { border-color: #f5a453; } .card.is-orange-dark.is-raised { box-shadow: 8px 8px 0 0 #f5a453; } .card-tab { transform: translateY(4px); cursor: pointer; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; background-color: black; padding: 12px; border-radius: 6px 6px 0 0; text-decoration: none; color: white; } .card-tab:hover { background-color: #1f0a47; } .card-tab.is-active { border: 4px solid black; border-bottom: 0; z-index: 1; background-color: white; color: black; } .is-text-green { color: #83ffcd; } .is-text-purple { color: #a57fff; } #modal-overlay, .modal-overlay { display: none; background-color: rgba(0, 0, 0, 0.8); position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1100; } #modal-overlay.is-visible, .modal-overlay.is-visible { display: block; } .pagination .disabled { display: none; } .pagination .current { font-weight: bold; } .pagination > * { padding: 6px; } .inline-form { display: inline-block; margin: 0; } .inline-form button { margin: 0; } .flashes { position: fixed; right: 24px; bottom: 24px; width: 100%; max-width: 90vw; z-index: 9999; margin: 0 auto; animation: fade-opacity 4s ease-in-out forwards; } @media (min-width: 37.5em) { .flashes { right: 24px; bottom: 48px; width: auto; } } .flashes.does-not-fade { animation: none !important; } .flashes.flash-error { background-color: #ffadad; } .flashes.flash-success { background-color: #aeffde; } .dw-token-icon, .mojo-icon { display: inline-block; height: 1rem; width: 1rem; background-size: contain; background-position: center; background-repeat: no-repeat; } .mojo-icon { background-image: url("/assets/icons/mojo_icon-ee33a43a.svg"); } .dw-token-icon { background-image: url("/assets/icons/dw_token_icon-789a253a.svg"); } .tag { background-color: black; color: white; border-radius: 3px; font-size: 0.8rem; padding: 0.2rem 0.4rem; text-transform: uppercase; display: inline-block; font-weight: 800; letter-spacing: 0.5px; } .tag.is-common { color: black; background: white; } .tag.is-uncommon { background-color: #367d5e; } .tag.is-rare { background-color: #f5a453; } .tag.is-transmogrify { background: linear-gradient(140deg, #7fd8ff, #ff77d9); color: black; } .tag.is-promo { background-color: #7fd8ff; } .tag.is-limited { background-color: #a57fff; } .tag.on-card { position: absolute; right: 12px; bottom: 12px; } .input.is-underlined { border: 0; border-bottom: 2px solid rgba(0, 0, 0, 0.8); background: transparent; } .fixed-character-pane { position: relative; width: 100%; border-radius: 0; border: 0; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; } .fixed-character-pane .pane-action-buttons { display: flex; background-color: white; border: 4px solid black; } .fixed-character-pane .pane-action-buttons > .button { border-radius: 0; border: 0; flex-grow: 1; } .fixed-character-pane .pane-body { text-align: right; padding: 24px; padding-right: 120px; } @media (min-width: 37.5em) { .fixed-character-pane .pane-body { padding-right: 160px; } } .fixed-character-pane .card-character { pointer-events: none; background-size: contain; background-position: center bottom; background-repeat: no-repeat; position: absolute; right: 12px; bottom: 0; height: 120px; width: 120px; } @media (min-width: 37.5em) { .fixed-character-pane .card-character { height: 160px; width: 160px; } } .fixed-character-pane .card-character.is-o { background-image: url("/assets/characters/o/o-df3166ec.svg"); } .fixed-character-pane .card-character.is-o-hooded { background-image: url("/assets/characters/o/o_hooded-58f391b7.svg"); } .fixed-character-pane .card-character.is-gregory { background-image: url("/assets/characters/gregory/gregory_bust-0465667a.svg"); } .fixed-character-pane .card-character.is-rickshaw { background-image: url("/assets/characters/rickshaw/rickshaw_bust-113f84d8.svg"); } .fixed-character-pane .card-character.is-hendrick { background-image: url("/assets/characters/hendrick/hendrick_bust-967ca0cf.svg"); } .fixed-character-pane .card-character.is-scooter { background-image: url("/assets/characters/scooter/scooter_bust-9127f936.svg"); } .fixed-character-pane .card-character.is-egidia { background-image: url("/assets/characters/egidia/egidia_bust-3490a42e.svg"); } .fixed-character-pane .card-character.is-giles { background-image: url("/assets/characters/giles/giles_bust-e3719bbf.svg"); } .combat-move { position: relative; } .combat-move .move-energy-cost { display: block; background-color: #fff17f; color: black; margin-left: 0.25rem; font-size: 0.8rem; border-radius: 100%; width: 18px; height: 18px; text-align: center; line-height: 18px; font-family: "Roboto", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; font-size: 0.6rem; font-weight: 800; color: rgba(0, 0, 0, 0.9); } .combat-move .move-description { font-family: inherit; display: block; font-size: 0.8rem; color: rgba(0, 0, 0, 0.8); font-family: "Roboto", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; } .combat-move .move-keywords { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; } .combat-move .move-keywords li { background-color: #f1ffe5; border-radius: 999px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.1rem 0.5rem; text-transform: uppercase; color: rgba(0, 0, 0, 0.7); } .combat-move .move-keywords li.is-limited { background-color: #ffe7ac; } .combat-move .move-name { font-size: 1rem; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; } .combat-move.is-ineligible { opacity: 0.8; } .combat-move .color-tags { position: absolute; right: 6px; top: 6px; } .combat-move .color-tags .color-tag { display: block; } .color-tag { width: 8px; height: 8px; max-width: 8px; max-height: 8px; background-color: black; border-radius: 100%; margin: 1px; display: inline-block; } .color-tag.is-blue { background-color: #7fd8ff; } .color-tag.is-orange { background-color: #ffc183; } .color-tag.is-purple { background-color: #a57fff; } .color-tag.is-pink { background-color: #ff77d9; } .color-tag.is-yellow { background-color: #fff17f; } .color-tag.is-green { background-color: #83ffcd; } .text-white { color: white; } .move-bar { cursor: pointer; display: block; position: fixed !important; z-index: 200; min-width: 60px; min-height: 100vh; background-color: rgba(0, 0, 0, 0.2); animation: fade-invisible 2s ease-in-out forwards; } @media (min-width: 64em) { .move-bar { min-width: 100px; } } .move-bar.move-east { cursor: e-resize; right: 0; top: 0; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(215, 199, 239, 0.7) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(215, 199, 239, 0.7) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(215, 199, 239, 0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .move-bar.move-west { cursor: w-resize; left: 0; top: 0; background: -moz-linear-gradient(left, rgba(215, 199, 239, 0.7) 0%, rgba(125, 185, 232, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(215, 199, 239, 0.7) 0%, rgba(125, 185, 232, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(215, 199, 239, 0.7) 0%, rgba(125, 185, 232, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .move-bar:hover { animation: none; } img:not([alt]) { filter: grayscale(100%); } .creature-stats { display: flex; align-items: center; justify-content: center; position: absolute; bottom: -15px; width: auto; left: 50%; font-weight: 600; transform: translateX(-50%); background-color: black; padding: 0.5rem; border-radius: 6px; z-index: 6; } .creature-stats .creature-stat { margin: 0 6px; display: flex; align-items: center; } .creature-stats .creature-stat.mojo-boost { position: absolute; right: 0; } .creature-stats .mojo-icon, .creature-stats .hp-icon, .creature-stats .energy-icon { display: inline-block; background-size: cover; background-position: center; width: 16px; height: 16px; margin-right: 4px; } .creature-stats .hp-icon { background-image: url("/assets/icons/hp-c78529d0.svg"); } .creature-stats .energy-icon { background-image: url("/assets/icons/energy-dfa9624c.svg"); } .creature-stats .hp-info { color: rgba(255, 255, 255, 0.95); } .creature-stats .energy-info { color: rgba(255, 255, 255, 0.95); } .creature-stats .hp-max-value, .creature-stats .energy-max-value { color: rgba(255, 255, 255, 0.6); } .creature-stat.mojo-boost { width: 30px; height: 30px; line-height: 24px; border: 4px solid black; font-weight: 600; border-radius: 100%; position: absolute; right: -16px; top: 6px; font-size: 0.8rem; } .tippy-popper { font-family: "Roboto", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; } .tippy-content { font-size: 0.85rem; font-family: "Roboto", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; font-weight: 500; letter-spacing: 0.3px; line-height: 1.4; } .baloo { font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; } .jiggle { animation: jiggle-1 1400ms linear both; } .heal { position: relative; filter: brightness(1.2); } .heal:before { font-size: 2rem; display: block; left: 90%; top: 100px; position: absolute; content: "✨"; animation: emoji-float-up 380ms ease-out forwards; } .heal:after { font-size: 1.6rem; opacity: 0; display: block; left: 10px; top: 140px; position: absolute; content: "✨"; animation: emoji-float-up 500ms ease-out forwards; width: 40px; height: 40px; } .freeze { position: relative; filter: saturate(0.3); } .freeze:before { font-size: 2rem; display: block; left: 90%; top: 100px; position: absolute; content: "❄️"; animation: emoji-float-up 490ms ease-out forwards; } .freeze:after { font-size: 1.6rem; opacity: 0; display: block; left: 10px; top: 140px; position: absolute; content: "❄️"; animation: emoji-float-up 800ms ease-out forwards; width: 40px; height: 40px; } .shake { animation: shake 200ms linear both; } blockquote { border-left: 4px solid #ffcb97; padding-left: 6px; } .object-card { cursor: default; width: 380px; max-width: 85vw; padding: 24px; background-color: white; border-radius: 6px; box-shadow: 4px 4px 0 0 black; border: 4px solid black; position: relative; transition: all 0.15s ease-out; text-align: center; } .object-card .object-helper { cursor: help; opacity: 1; z-index: 1; position: absolute; left: 6px; bottom: 6px; background-color: rgba(0, 0, 0, 0.2); border-radius: 100%; color: white; font-weight: 900; text-align: center; line-height: 1.6rem; width: 1.6rem; height: 1.6rem; z-index: 6; transform: scale(1.2); } @media (min-width: 37.5em) { .object-card .object-helper { transform: scale(0.8); opacity: 0; } } .object-card .object-helper:hover, .object-card .object-helper:focus, .object-card .object-helper:active { background-color: black; opacity: 0 !important; transform: scale(2); } .object-card .object-helper:hover + .object-card-effect, .object-card .object-helper:focus + .object-card-effect, .object-card .object-helper:active + .object-card-effect { opacity: 1; } .object-card a { color: inherit; text-decoration: none; } .object-card input.creature-name { width: 100%; border: 0; text-align: center; border-bottom: 3px solid transparent; } .object-card input.creature-name:hover { border-bottom: 3px dashed rgba(0, 0, 0, 0.3); } .object-card:hover .object-helper { opacity: 1; } .object-card:hover a { text-decoration: underline; } .object-card.is-center { margin: 0 auto; display: block; } .object-card.is-planted { background-color: #aeffde; } .object-card.is-crew { background-color: #bce8fb; } .object-card.is-shed, .object-card.is-collection { font-size: 0.8rem; padding: 12px; width: 150px; min-width: 150px; } @media (min-width: 37.5em) { .object-card.is-shed, .object-card.is-collection { width: 200px; min-width: 200px; min-height: 200px; } } .object-card.is-shed .object-card-name, .object-card.is-collection .object-card-name { cursor: default; font-size: 1rem; } .object-card.is-shed .object-card-owner, .object-card.is-collection .object-card-owner { display: none; } .object-card.is-shed .object-card-image, .object-card.is-collection .object-card-image { width: 80px; height: 80px; } @media (min-width: 37.5em) { .object-card.is-shed .object-card-image, .object-card.is-collection .object-card-image { width: 120px; height: 120px; } } .object-card.is-shed .object-card-effect p, .object-card.is-collection .object-card-effect p { padding: 12px; font-size: 0.8rem; line-height: 1.1rem; } @media (min-width: 37.5em) { .object-card.is-shed .object-card-effect p, .object-card.is-collection .object-card-effect p { line-height: 1.4rem; font-size: 1.2rem; } } .object-card.is-shed .object-card-effect, .object-card.is-collection .object-card-effect { margin-bottom: 0; color: rgba(255, 255, 255, 0.9); } .object-card.is-shed .effect-mojo, .object-card.is-collection .effect-mojo { height: 32px !important; width: 32px !important; line-height: 26px !important; font-size: 0.8rem !important; right: -10px; top: -10px; } .object-card.is-collection.is-empty { box-shadow: none; opacity: 0.2; } .object-card.is-foil .shimmer { pointer-events: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(-70deg, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.7) 52%, rgba(255, 255, 255, 0) 56%); background-size: 300% 100%; animation: shimmer 2.5s linear infinite; } .object-card .object-card-name { margin: 0; margin-bottom: 6px; font-weight: 500; } .object-card .object-card-owner { color: rgba(0, 0, 0, 0.5); } .object-card .object-card-owner .belongs-to { color: rgba(0, 0, 0, 0.5); } .object-card .object-card-effect { position: absolute; top: -1px; left: 0; z-index: 5; min-width: calc(100% + 2px); min-width: 101%; min-height: 101%; transition: all 0.1s ease-in-out; opacity: 0; display: flex; flex-direction: column; justify-content: center; background-color: black; pointer-events: none; } .object-card .object-card-effect p { font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; font-size: 1.4rem; display: block; font-weight: 400; padding: 24px; line-height: 1.6rem; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.1px; text-align: left; } .object-card .object-card-effect .effect-trigger { display: block; font-size: 1rem; color: rgba(255, 255, 255, 0.7); } .object-card .object-card-image { width: 180px; height: 180px; background-size: contain; background-position: center; background-repeat: no-repeat; margin: 0 auto; animation: bounce-1 1s ease-in-out; } .object-card.is-new { animation: new-shake 0.4s ease-in-out; } @keyframes new-shake { 0% { transform: rotate(0deg); } 20% { transform: rotate(-3deg); } 30% { transform: rotate(3deg); } 50% { transform: rotate(-2deg); } 70% { transform: rotate(3deg); } 80% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } } .card-details, .creature-boosts { margin: 0 auto; padding-top: 6px; width: 380px; max-width: 85vw; overflow-y: auto; } .card-details .boost, .creature-boosts .boost { margin: 6px 24px; } .creature-save-button { position: absolute; width: 70px; right: -4px; top: -4px; } background-size: contain; background-position: center; margin-right: 12px; background-repeat: no-repeat; } } } opacity: 1; pointer-events: auto; } .card.is-shop-listing { position: relative; } /* listing-cost removed: cost now shown in buy button .card.is-shop-listing .listing-cost { position: absolute; font-family: "Baloo", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, monospace; top: -16px; right: -16px; min-width: 50px; min-height: 50px; line-height: 43px; font-size: 1.2rem; font-weight: 600; background-color: #83ffcd; border-radius: 100%; border: 4px solid black; text-align: center; cursor: default; transition: transform 0.2s ease-in-out; } */ .card.is-shop-listing .listing-text { font-size: 0.8rem; } @media (min-width: 37.5em) { .card.is-shop-listing .listing-text { font-size: inherit; } } .card.is-shop-listing .listing-image { align-self: center; background-size: contain; background-position: center; background-repeat: no-repeat; margin-right: 12px; width: 60px; height: 60px; } @media (min-width: 64em) { .card.is-shop-listing .listing-image { width: 80px; height: 80px; } } .card.is-shop-listing .listing-info { flex-grow: 1; } .card.is-shop-listing .poster-name { color: rgba(0, 0, 0, 0.5); opacity: 0; transition: all 0.1s ease-in; font-size: 0.7rem; letter-spacing: 0.6px; text-transform: uppercase; } .card.is-shop-listing a { text-decoration: none; } .card.is-shop-listing:hover { box-shadow: 3px 3px 0 0 black; } .card.is-shop-listing:hover .listing-image.is-creature { animation: jiggle-1 2400ms ease-out both; } .card.is-shop-listing:hover .poster-name { opacity: 1; } .card.is-shop-listing:hover a { text-decoration: underline; } .card.is-shop-listing .effect-trigger { opacity: 0.35; font-weight: bold; } position: fixed; top: 12px; left: 50%; transform: translate(-50%); } @keyframes fade-invisible { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-opacity { 0% { opacity: 1; pointer-events: all; } 80% { opacity: 1; pointer-events: all; } 100% { opacity: 0; pointer-events: none; } } .button-reset { border: none; background: none; padding: 0; font: inherit; } .company-footer { margin-top: 4rem; padding: 2rem 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } .company-footer .footer-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .company-footer .footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .company-footer .footer-copyright { text-align: center; opacity: 0.7; font-size: 0.875rem; } .company-footer .footer-copyright a { color: inherit; text-decoration: none; } .company-footer .footer-copyright a:hover { text-decoration: underline; }