* {margin: 0;padding: 0;border: 0;font: inherit;font-size: 100%;vertical-align: baseline;}canvas[resize] {width: 100%;height: 100%;}body {height: 100vh;overflow: hidden;}h1, h2 {font-family: 'Just Me Again Down Here', 'Just Another Hand', 'Lovers Quarrel', serif;color: #ff4574;font-size: 580%;line-height: 100%;font-weight: 100;text-align: left;text-shadow: 0 0 6px #000;margin: 0;padding: 0;}h2 {font-size: 450%;}#greeting_text {width: 700px;height: auto;z-index: 2;}.background {top: 0;left: 0;padding: 0;margin: 0;width: 100%;height: 100%;position: absolute;z-index: -1;}.love-particle-card {display: flex;flex-direction: row;align-items: center;justify-content: center;width: fit-content;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);canvas {z-index: 1;width: 800px;height: 800px;}}.love-particle-card * {user-select: none;}.background.bg1 {background: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url(pattern1.png);}.background.bg2 {background-image: radial-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgb(101, 21, 3)), url(pattern2.png);}.background.bg3 {background-image: radial-gradient(rgba(255, 255, 255, 0.65), #fff), url(pattern3.png);}.background.bg4 {background-image: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.55), #000), url(pattern4.png);}.background.bg5 {background-image: radial-gradient(rgba(119, 147, 61, 0.5), rgba(238, 56, 3, 0.5), rgb(4, 83, 80)), url(pattern5.png);}.background.bg6 {background-image: radial-gradient(rgba(103, 129, 132, 0.4), rgba(35, 84, 111, 0.4), rgb(18, 39, 82)), url(pattern6.png);}.background.bg7 {background-image: radial-gradient(rgba(255, 255, 255, 0.47), #fff), url(pattern7.png);}.background.bg8 {background-image: radial-gradient(rgba(255, 255, 255, 0), #fff), url(pattern8.png);}.background.bg9 {background-image: radial-gradient(rgba(255, 255, 255, 0), #fff), url(pattern9.png);}.background.bg10 {background-image: radial-gradient(rgb(3, 4, 73, 0), #000), url(pattern10.png);}a {text-decoration: none;}a:link, a:visited {color: #ff4574;}a:hover, a:active {color: #fff;}.bg3+* a:hover, .bg3+* a:active {color: #673AB7;}.bg3+* h1, .bg3+* h2 {color: #2196F3;text-shadow: 0 0 4px #fff;}.bg7+* a:link, .bg7+* a:visited {color: #9C27B0;}.bg7+* a:hover, .bg7+* a:active {color: #ff4574;}.bg7+* h1, .bg7+* h2 {color: #132738;text-shadow: 0 0 4px #fff;}.buttons {display: block;position: absolute;bottom: 0;right: 0;z-index: 3;}.buttons>span {width: 50px;height: 30px;display: block;margin-bottom: 4px;cursor: pointer;position: relative;border: 1px solid currentColor;box-sizing: border-box;transition: all .3s;}span.bt-fullscreen:hover:after {width: 32px;height: 16px;bottom: 1px;left: 1px;}span.bt-fullscreen:after {content: '';width: 24px;height: 12px;bottom: 1px;left: 1px;display: block;background-color: currentColor;position: absolute;transition: all .25s;}:fullscreen span.bt-fullscreen {&:after {width: 46px;height: 26px;bottom: 1px;left: 1px;}&:hover:after {width: 32px;height: 16px;bottom: 1px;left: 1px;}}.bt-speaker {overflow: hidden;display: inline-block;margin-right: 4px;}.bt-speaker span {display: block;width: 8px;height: 8px;background: currentColor;margin: 11px 0 0 13px;}.bt-speaker>span:after {content: '';position: absolute;width: 0;height: 0;border-style: solid;border-color: transparent currentColor transparent transparent;border-width: 10px 14px 10px 15px;left: -13px;top: 5px;}.bt-speaker span:before {transform: rotate(45deg);border-radius: 0 50px 0 0;content: '';position: absolute;width: 5px;height: 5px;border-style: double;border-color: currentColor;border-width: 7px 7px 0 0;left: 27px;top: 9px;transition: all 0.2s ease-out;}.bt-speaker.mute span:before {transform: scale(0.5) translate(-15px, 0) rotate(36deg);}.bt-speaker span:after {content: '';position: absolute;width: 0;height: 0;border-style: solid;border-color: transparent currentColor transparent transparent;border-width: 10px 14px 10px 13px;left: 0;top: 5px;}.bt-speaker:hover span:before {transform: scale(0.8) translate(-3px, 0) rotate(42deg);}.bt-speaker.mute span:before {width: 28px;height: 28px;top: -2px;left: 26px;background: linear-gradient(to bottom, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%), linear-gradient(to right, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%);transform: scale(0.5) translate(-15px, 0) rotate(43deg);border-radius: 0px;border-style: double;border-color: transparent;border-width: 3px;}.curtain {background-color: #ffffff;position: absolute;z-index: 999999;width: 100%;bottom: 0;top: 0;transition: all .75s;}.curtain.inactive {opacity: 0.3;bottom: 100%;overflow: hidden;transition-delay: .25s;}.view-change {position: absolute;z-index: 999;color: #fff;margin: 0 auto;width: 100%;display: block;text-align: center;padding: 20px 0;bottom: 0;font-family: monospace;pointer-events: none;}.loading {display: inline-block;width: 60px;height: 60px;top: 50%;transform: translate(0, -50%);position: absolute;left: 50%;margin: auto auto auto -30px;opacity: 1;transition: opacity 1s;transition-delay: .25s;}.inactive>.loading {opacity: 0;}.loading:after {content: " ";display: block;width: 48px;height: 48px;margin: 2px;border-radius: 50%;border: 4px solid;border-color: #F36 transparent #F36 transparent;animation: rotate-to-360 .5s linear infinite;}@media (orientation: landscape) {.love-particle-card {flex-direction: row;}}@media (orientation: portrait) {.love-particle-card {flex-direction: column;}#greeting_text{width: 800px;}}@keyframes rotate-to-360 {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}