@font-face {
  font-family: "Special Elite";
  src: url("font_special.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Andika";
  src: url("font_andika.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Andika";
  src: url("font_andika_ital.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}
html {
overflow-x: hidden;
}
body {
background-image: url("paintspace.png");
image-rendering: pixelated;
margin: 0;
padding: 0;
color: #cfcfcf;
font-family: "Special Elite", system-ui;
overflow: hidden;
background-color: black;
letter-spacing: 0.06em;
background-attachment: fixed;
background-size: cover;
}
#mainwidth {
width: 55%;
margin: 0 auto;
display: block;
padding: 2em;
font-size: 1.1em;
line-height: 1.8em;
margin-bottom: 4em;
margin-top: 3em;
padding: 2em;
background-color: black;
border: 4px white double;
position: relative;
font-family: "Andika", sans-serif;
}
a {
color: #76fcdf;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: underline;
}
dialog {
box-shadow: white 10px 10px;
width: 80%;
line-height: 1.5em;
color: white;
background: black;
border: 4px white double;
max-width: 500px;
font-size: 0.9em;
rotate: 2deg;
top: -50px;
font-family: "Andika", sans-serif;
}
dialog::backdrop {
background-color: rgb(0 0 0 / 0.7);
}
#counter {
background-color: black;
border: 1px solid white;
width: 280px;
padding: 0;
display: block;
margin: 0 auto;
height: 53px;
display: none;
}
.hitcounter {
width: 40px;
image-rendering: pixelated;
}
#footer {
text-align: center;
font-size: 0.9em;
background-color: black;
border-top: 1px solid white;
padding-top: 2em;
padding-bottom: 3em;
}
.weathericon {
width: 18px;
position: relative;
top: 3px;
margin-right: 5px;
}
#footer a {
font-size: 0.9em;
line-height:1.4em;
}
#mikehive {
width: 400px;
margin-left: 1em;
filter: drop-shadow(5px 5px 0 rgb(0 4 103 / 70%));
position: relative;
rotate: -4deg;
top: 0;
transition: top, filter 0.2s ease;
animation: sway 3s ease-in-out infinite;
}
#mikehive:hover {
top: -3px;
filter: drop-shadow(5px 8px 0 rgb(0 4 103 / 70%));
}
#nav {
margin: 0;
position: absolute;
top: 70px;
right: 10px;
width: 750px;
text-align: right;
rotate: 1deg;
font-family: "Special Elite", system-ui;
}
#nav li {
list-style: none;
display: inline;
position: relative;
}
#nav li a {
color: white;
}
.nav-item-inner {
padding: 10px;
border: 1px solid white;
margin-right: 0.5em;
display: inline-block;
margin-bottom: 1em;
background-color: black;
transition: background, color ease 0.6s;
}
.nav-item-inner:hover {
background: #e0e0e0;
color: black;
}
#portrait {
width: 200px;
border-radius: 50%;
margin: 0 auto;
display: block;
margin-bottom: 2em;
margin-top: 1em;
}
.twopix {
top: 5px;
}
.fivepix {
top: -5px;
}
#brachio {
rotate: -12deg;
position: absolute;
image-rendering: pixelated;
display: block;
left: -240px;
bottom: 600px;
width: 300px;
z-index: 10;
animation: sway 1s ease-in-out infinite;
}
#greattitart {
position: absolute;
image-rendering: pixelated;
display: block;
right: -100px;
top: -100px;
width: 200px;
z-index: 10;
animation: sway 1.2s ease-in-out infinite;
text-shadow: 3px 3px 0 black;
}
h1 {
text-align: center;
font-family: "Special Elite", system-ui;
background: #cc2d2d;
display: inline-block;
rotate: -2deg;
padding: 5px;
margin: 0 auto;
text-shadow: 3px 3px 0 black;
vertical-align: bottom;
margin-right: 10px;
}
h2 {
margin-top: 1.5em;
font-family: "Special Elite", system-ui;
background: #cc2d2d;
display: inline-block;
padding: 5px;
text-shadow: 3px 3px 0 black;
vertical-align: bottom;
margin-right: 10px;
}
h2:nth-of-type(odd):not(.char-name, .media-title) {
transform: rotate(2deg);
}
h2:nth-of-type(even):not(.char-name, .media-title) {
transform: rotate(-2deg);
}
hr {
border: 1px solid white;
margin-top: 2em;
margin-bottom: 3em;
}
#linkbuttons {
display: block;
margin: 0 auto;
width: max-content;
}
.linkbutton {
border: 1px solid white;
box-shadow: 2px 2px 0 white;
}
.colourglowcycle {
color:yellow;
animation: colourglowcycle 2s ease-out infinite;
}
#button88 {
rotate:1.5deg;
}
#button200 {
rotate:-2.5deg;
}
h1.centre {
display: block;
margin: 0 auto;
width: max-content;
font-size:3em;
margin-top:0.5em;
margin-bottom:0.5em;
}
.ticklist {
list-style-image: url('tick.png');
}
.ticklist li {
margin-bottom: 1em;
}
ul.ticklist {
margin-bottom: 2em;
}
.smallicon {
width: 24px;
position: relative;
top: 5px;
}
.emoji {
width: 18px;
position: relative;
top: 3px;
}
.emojibig {
width: 24px;
position: relative;
top: 3px;
}

/* Scrolling weather marquee shit */

.marquee-wrapper {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
background-color: black;
color: white;
padding-top: 0.5em;
padding-bottom: 0.9em;
font-size: 0.9em;
border-bottom: 2px solid white;
margin-bottom: 1em;
box-shadow: 0 10px 20px rgb(0 0 0 / 0.5);
font-family: "Andika", sans-serif;
}

.marquee-content {
display: inline-block;
white-space: nowrap;
animation: marquee 12s linear infinite;
}

@keyframes marquee {
0% {
transform: translateX(100vw); /* Start fully offscreen to the right */
}
100% {
transform: translateX(-100%); /* Move fully offscreen to the left */
}
}

/* MEDIA QUERIES */

@media (max-width: 1200px) {
#nav {
position: initial;
float: right;
}
#mainwidth {
margin-top: 8em;
}
}
@media (max-width: 1000px) {
#mainwidth {
width: 80%;
padding: 1.5em;
font-size: 1em;
}
#brachio {
width: 200px;
left: -140px;
}
#greattitart {
width: 180px;
right: -70px;
}
#nav {
width: 700px;
}
}
@media (max-width: 800px) {
#brachio {
top: 1000px;
}
#nav {
width: 500px;
}
#greattitart {
top: -130px;
left: -30px;
animation: swayflipped 1.2s ease-in-out infinite;
}
}
@media (max-width: 550px) {
#nav {
width: 400px;
margin-top: 1em;
}
}
@media (max-width: 500px) {
.marquee-content {
animation: marquee 10s linear infinite;
}
#greattitart {
top: -80px;
left: -40px;
width: 150px;
}
#mainwidth {
margin-top: 9em;
}
h1.centre {
font-size:2.5em;
margin-top: 1.1em;
}
}
@media (max-width: 420px) {
#nav {
width: 300px;
}
#mainwidth {
margin-top: 14em;
}
#mikehive {
width: 300px;
}
#greattitart {
top: -100px;
left: 5px;
}
}


/* Mike's little multipurpose animations... jitter / quake / sway etc */

@keyframes quake {
0%,
100% {
}
50% {
transform: translateY(-0.3em);
}
}
.quake {
animation: quake linear 0.15s 0s infinite;
display: inline-block;
}
.jitter span {
display: inline-block;
position: relative;
animation: jitter 0.4s infinite;
}
@keyframes jitter {
0%,
100% {
transform: translateY(0);
}
33% {
transform: translateY(-2px);
}
66% {
transform: translateY(2px);
}
}
.jitter span:nth-child(odd) {
animation-duration: 0.41s;
}
.jitter span:nth-child(even) {
animation-duration: 0.47s;
}

@keyframes sway {
0% {
transform: rotate(-2deg);
}
50% {
transform: rotate(2deg);
}
100% {
transform: rotate(-2deg);
}
}

@keyframes swayflipped {
0% {
transform: rotate(-2deg) scaleX(-1);
}
50% {
transform: rotate(2deg) scaleX(-1);
}
100% {
transform: rotate(-2deg) scaleX(-1);
}
}

@keyframes colourglowcycle {
0% {
color:yellow;
text-shadow: 0 0 15px yellow;
}
25% {
color:limegreen;
text-shadow: 0 0 15px limegreen;
}
50% {
color:#cb7bff;
text-shadow: 0 0 15px pink;
}
75% {
color:skyblue;
text-shadow: 0 0 15px skyblue;
}
100% {
color:yellow;
text-shadow: 0 0 15px yellow;
}
}

/* BIRD PAGE */

.birdcards {
display: grid;
grid-gap: 1rem;
margin: 0 auto;
margin-top: 2em;
margin-bottom: 3em;
grid-template-columns: repeat(2, 1fr);
}
.cardimg {
width: 100%;
}
.birdcard {
border: 3px solid #3f6549;
padding: 18px;
box-shadow: 5px 5px 0 #2b2b2b;
height: max-content;
background: #263321;
border-radius: 20px;
}
.birdfact {
margin-bottom: 1em;
}
.birdname {
font-weight: bold;
color: limegreen;
font-size: 1.2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.notegif {
  max-width: 15px;
}
@media (max-width: 1000px) {
.birdcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.birdcards { grid-template-columns: repeat(1, 1fr); }
.birdcard { padding: 15px; font-size: 0.95em; line-height: 1.75em; }
}
.birdcard:nth-child(1n) {
rotate:-0.6deg;
}
.birdcard:nth-child(2n) {
rotate:0.2deg;
}
.birdcard:nth-child(3n) {
rotate:0.7deg;
}
#birdcount {
color: limegreen;
}

/* contact form styles */

.required {
color: red;
}
textarea#message {
width: 80%;
height: 200px;
}
label {
margin-bottom: 0;
}
input {
margin-top: 0;
margin-bottom: 1em;
width: 50%;
}
@media (max-width: 600px) {
input, textarea { width: 80%; }
}
input, textarea {
font-family: "Andika";
font-size: 1em;
background: black;
font-color: white;
border: 1px solid white;
border-radius: 13px;
padding: 5px;
color: #e0e0e0;
}
input[type=submit] {
color: #e0e0e0;
background: #14b44b;
font-family: "Special Elite", system-ui;
text-shadow: 3px 3px 0 black;
border: none;
font-size: 1.5em;
padding: 0.5em;
margin-top: 1em;
width: 200px;
rotate:-2deg;
}
input[type=submit]:hover {
background: #76fcdf;
cursor: pointer;
}
#mysteryobject {
margin-top:1em;
}