diff options
| author | LLLL Colonq <llll@colonq> | 2026-07-31 05:00:49 -0400 |
|---|---|---|
| committer | LLLL Colonq <llll@colonq> | 2026-07-31 05:00:49 -0400 |
| commit | ea5332e4a1a035e888709bee278fcafb182f7922 (patch) | |
| tree | 7e1520391e7f04fa3df425fd9ed02008f748cdfd /2026/games_submissions/steeledshield/style.css | |
| parent | 3ec03ba57474aa4320cb7901980b55706adbc111 (diff) | |
Update
Diffstat (limited to '2026/games_submissions/steeledshield/style.css')
| -rw-r--r-- | 2026/games_submissions/steeledshield/style.css | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/2026/games_submissions/steeledshield/style.css b/2026/games_submissions/steeledshield/style.css new file mode 100644 index 0000000..b046eff --- /dev/null +++ b/2026/games_submissions/steeledshield/style.css @@ -0,0 +1,197 @@ +:root {
+ --crt-red: rgb(218, 49, 49);
+ --crt-green: rgb(112, 159, 115);
+ --crt-blue: rgb(40, 129, 206);
+}
+
+body{
+ margin: 0;
+ height: 100vh;
+ font-family: "VT323", monospace;
+ font-weight: 400;
+ font-style: bold;
+ user-select: none; /* standard syntax */
+ -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+ -moz-user-select: none; /* mozilla browsers */
+ -khtml-user-select: none; /* webkit (konqueror) browsers */
+ -ms-user-select: none; /* IE10+ */
+}
+
+#layout{
+ width: 240px;
+ height: 160px;
+ margin: auto;
+ border: 1px solid black;
+ background: linear-gradient(270deg, #03A688, #014040);
+ background-size: 400% 400%;
+
+ -webkit-animation: AnimationName 2s ease infinite;
+ -moz-animation: AnimationName 2s ease infinite;
+ animation: AnimationName 2s ease infinite;
+ background-color: rgb(25, 25, 30);
+ text-shadow: 0 0 0.2em currentColor, 1px 1px rgba(255, 0, 255, 0.5),
+ -1px -1px rgba(0, 255, 255, 0.4);
+ position: relative;
+ &:before,
+ &:after {
+ content: "";
+ transform: translateZ(0);
+ pointer-events: none;
+ opacity: 0.5;
+ mix-blend-mode: overlay;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+ z-index: 2;
+ }
+
+ &:before {
+ background: repeating-linear-gradient(
+ var(--crt-red) 0px,
+ var(--crt-green) 2px,
+ var(--crt-blue) 4px
+ );
+ }
+ &:after {
+ background: repeating-linear-gradient(
+ 90deg,
+ var(--crt-red) 1px,
+ var(--crt-green) 2px,
+ var(--crt-blue) 3px
+ );
+ }
+}
+
+@-webkit-keyframes AnimationName {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+@-moz-keyframes AnimationName {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+@keyframes AnimationName {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+
+#game{
+ width: 40%;
+ height: 100%;
+ margin: auto;
+ overflow: hidden;
+ background: linear-gradient(270deg, #abe2b8, #C2F2CE);
+ background-size: 400% 400%;
+
+ -webkit-animation: AnimationName 2s ease infinite;
+ -moz-animation: AnimationName 2s ease infinite;
+ animation: AnimationName 2s ease infinite;
+}
+
+@-webkit-keyframes AnimationName {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+@-moz-keyframes AnimationName {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+@keyframes AnimationName {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+
+#friend{
+ width: 32px;
+ height: 32px;
+ position: relative;
+ top: 67%;
+ left: 32px;
+ font-size: 28px;
+ text-align: center;
+}
+
+#friend img{
+ width: 32px;
+ height: 32px;
+}
+
+#container{
+ display: flex;
+}
+
+#bomb{
+ width: 22%;
+ height: 22%;
+ font-size: auto;
+}
+
+#blank{
+ width: 22%;
+ height: 22%;
+ font-size: auto;
+}
+
+#food{
+ width: 22%;
+ height: 22%;
+ font-size: auto;
+}
+
+.objects{
+ position: relative;
+ animation: none;
+ animation-timing-function: linear;
+ text-align: center;
+ margin: auto;
+}
+
+#counter{
+ position: absolute;
+ width: 75px;
+ font-size: 25px;
+ top: -10%;
+ color: white;
+ text-align: center;
+ -webkit-text-stroke-width: 6px;
+ -webkit-text-stroke-color: black;
+ paint-order: stroke fill;
+ z-index: 1;
+}
+
+#click_image{
+ position: absolute;
+ width: 50px;
+ right: 10px;
+ top: 10px;
+ z-index: 0;
+}
+
+@keyframes slide {
+ 0% {top: -26.6px;}
+ 100% {top: 200px;}
+}
+#Clonk{
+ position: absolute;
+ width: 30%;
+ height:60%;
+ bottom: 0;
+ opacity: 0.5;
+}
+
+#Mod{
+ position: absolute;
+ width: 30%;
+ height:60%;
+ right: 0;
+ bottom: 0;
+ opacity: 0.5;
+}
\ No newline at end of file |