body, html {margin:0; padding:0; font-family:Arial, sans-serif; height:fit-content; background:#343434; color:#fff; overflow-x:hidden}
header {display:flex; align-items:center; justify-content:center; padding:1em 2em; background-color:rgba(0,0,0,.7); font-size:1.5em; font-weight:700; color:#fff}
.container {display:flex; flex-direction:column; align-items:center; text-align:center; padding:2em}
.hero img {max-width:600px; width:100%; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.5); transition:transform .3s ease-in-out}
.hero img:hover {transform:scale(1.05)}
.overlay-text {margin-top:1em; font-size:1.8em; font-weight:700; color:rgba(255,255,255,.9); text-shadow:0 2px 5px rgba(0, 0, 0, .7); padding:.5em 1em; background:rgba(0, 0, 0, .6); border-radius:8px}
.buttons {margin-top:2em; display:flex; flex-wrap:wrap; justify-content:center}
.buttons a {background-color:#daab75; color:#fff; font-size:1em; font-weight:700; text-decoration:none; padding:.8em 1.5em; margin:.5em; border-radius:5px; transition:background-color .3s; display:inline-block}
.buttons a:hover {background-color:#b48960}

@media (max-width:768px) {
.overlay-text {font-size:1.2em}
.hero img {max-width:90%}
.buttons a {padding:.6em 1.2em; font-size:.9em}
}

@media (max-width:480px) {
header {font-size:1.2em; padding:.8em}
.overlay-text {font-size:1em}
.buttons {flex-direction:column}
.buttons a {width:90%; text-align:center}
}

header {max-width:fit-content; margin:0 auto}
.logo {font-weight:700; color:rgba(255,255,255,.8)}
div.logo {font-weight:700; color:rgba(255,255,255,.8)}
.buttons {display:block}
#love {text-align:center}

@media (max-width:480px) {
.buttons {flex-direction:unset; width:10em}
}

@media (max-width:768px) {
.buttons {display:flex; width:15em}
}

@media (min-height:667px) {
body {display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; margin-bottom:0; flex-direction:column; margin:1rem auto 1rem auto}
html {overflow:hidden}
}

@media (max-width:768px) {
body {display:block!important}
}

#xboarder {border:gold 4px solid}

@media (min-height:1px) {
body {display:block!important}
}

h2 {font-size:1.8rem; margin:auto}
.hero img {border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.5); display:block; max-width:600px; transition:transform .3s ease-in-out; width:100%}
.highlight {-webkit-text-stroke-color:#fff; -webkit-text-stroke:.3px; background-color:#000; font-size:14px; font-weight:700; margin:-.75rem auto; max-width:22.9em; padding:.75rem .25rem}
.logo {color:#fff!important}
.padded-box {padding:.25em!important; text-wrap:auto}
.underline-image {border-radius:12px; border:2px solid #1e90ff; display:block; overflow:hidden; transition:border-color .3s ease, box-shadow .3s ease}
.underline-image:hover {border-color:#00bfff; box-shadow:0 0 12px #1e90ff}

@media (max-width:480px) {
.highlight {font-size:.88em}
.logo {max-width:14.8em}
}

@media (max-width:768px) {
h2 {font-size:1rem; margin:auto}
}

div.highlight {margin-top:1.25rem; display:block}
div.highlight {max-width:329px}
#dog {color:rgba(255,255,255,.9); text-shadow:0 2px 5px rgba(0, 0, 0, .7); text-decoration:none}
body, html {height:100%; width:100%; margin:0; font-family:sans-serif; display:flex; justify-content:center; align-items:center}
.buttons {display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:400px; width:90%}
.buttons a {background-color:#daab75; color:#fff; font-size:1em; font-weight:700; text-decoration:none; padding:1em 0; text-align:center; border-radius:5px; transition:background-color .3s; display:block; margin:unset}
#texted {max-width:fit-content; margin:auto; padding:1px .1rem; font-weight:400!important}
#texted {font-family:'Helvetica Neue', sans-serif; font-size:1.8rem; font-weight:300}
#largertext {color:gold; font-size:inherit}

@media (max-width:468px) {
.buttons {justify-content:center; justify-items:center}
}

@media (max-width:468px) {
.buttons {grid-template-columns:repeat(2,1fr)}
}

@media (min-height:1000px) {
html {zoom:1.2}
}

@media (min-height:1300px) {
html {zoom:1.3}
}

#largertext, div.highlight.logo {font-size:1rem; line-height:1}
body, html {min-height:fit-content!important; height:auto!important; width:100%!important; margin:0!important}
section.c2 {display:block}
span.c1 {text-decoration:none}
.button-grid {display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2, auto); gap:10px}
.button-grid a {display:flex; justify-content:center; align-items:center; min-width:5em}
.buttons {height:fit-content; width:fit-content}

@media (min-width:768px) {
h2 {font-size:.8em}
}

.glass {color:rgba(128,0,32,1)!important; background-color:rgba(218, 171, 117, .9)!important}
body, html {background-image:url(https://www.inconsequential.org/files/12345/img/pattern-tile.png); background-repeat:repeat; background-size:3px}
html {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:unset; width:99vw}

@media (min-width:1900px) and (orientation:landscape) {
html {zoom:1; overflow:hidden!important; height:auto!important; width:fit-content!important; max-height:100vh!important}
body {min-height:75vh; min-width:99vw}
}

body {min-height:100%; min-width:100%}
body, html {background:-webkit-linear-gradient(45deg,#1a1a1a 0,#2d2d2d 25%,#1a1a1a 50%,#404040 75%,#1a1a1a 100%)!important; background:linear-gradient(45deg,#1a1a1a 0,#2d2d2d 25%,#1a1a1a 50%,#404040 75%,#1a1a1a 100%)!important; display:block; height:100%!important; width:100%!important}
header {margin-top:1px}
#largertext {font-size:.9rem}

@media (max-height:1345px) and (max-width:320px) and (orientation:portrait) {
html {left:unset; overflow:visible; position:relative; top:1px; transform:none!important; zoom:.8!important}
}

@media (max-height:850px) and (max-width:400px) and (orientation:portrait) {
.hero img {max-width:200px}
}

@media (max-width:1000px) {
nav.noteded {display:none}
}

@media (min-height:1000px) {
html {zoom:1.7!important}
}

@media (min-width:1000px) {
a.glass2 {margin:1rem; width:20em}
a.glass3 {float:right; height:10em; margin:1rem}
a.glass4 {float:right; height:10em; margin:1rem}
a.glass6 {float:left; height:10em; margin:1rem}
a.glass7 {float:left; height:10em; margin:1rem}
main.container {padding-top:1px}
nav.btt {display:grid; margin:0 auto!important}
nav.btt2 {display:block; float:right; margin-top:-.5rem}
nav.btt4 {display:block; float:left; margin-top:-.5rem}
nav.noted {display:none}
.button-grid {display:flex}
}

@media (min-width:1000px) and (min-height:1079px) and (orientation:landscape) {
html {left:unset; margin:auto!important; position:relative; top:unset; transform-origin:unset; transform:none!important; translate:unset; zoom:1.75!important}
#rrr {display:none}
}

@media (min-width:1000px) and (min-height:700px) and (max-height:1000px) and (orientation:landscape) {
html {left:unset; margin:auto!important; position:relative; top:unset; transform-origin:unset; transform:none!important; translate:unset; zoom:1.25!important}
#rrr {display:none}
}

@media (min-width:2400px) and (min-height:1100px) and (orientation:landscape) {
html {zoom:2.1!important}
}

h2.c3 {word-spacing:1px; letter-spacing:1px}
span.c2 {color:red; word-spacing:normal; letter-spacing:normal}
span.c1 {word-spacing:-.11px}
#lnk {text-decoration:none; color:red}

@media (min-width:999px) {
body, html {background:url(https://www.inconsequential.org/files/12345/img/iart2.webp), linear-gradient(45deg,#1a1a1a 0,#2d2d2d 25%,#1a1a1a 50%,#404040 75%,#1a1a1a 100%)!important; background-repeat:no-repeat, repeat!important; background-position:center; background-size:50%, auto!important; background-origin:padding-box!important; background-position-x:50%!important; background-position-y:30%!important}
}

@media (min-height:807px) and (orientation:portrait) and (max-height:1023px) {
body {padding-top:12.5vh}
html {font-size:21px!important}
nav.buttons.button-grid.noted {font-size:.83rem}
}

@media (min-height:694px) and (orientation:portrait) and (max-height:806px) and (min-width:320px) {
body {padding-top:5vh}
html {font-size:18px!important}
nav.buttons.button-grid.noted {font-size:.75rem}
}

@media (max-height:699px) and (max-width:500px) {
html {position:relative; top:unset; left:unset; transform:unset}
body {padding-top:1px}
}

@media (min-width:1000px) and (min-height:595px) and (max-height:2000px) {
#rrr {display:none}
}

@media (min-width:2px) and (max-width:999px) and (min-height:100px) and (max-height:768px) and (orientation:landscape) {
body, html {overflow:visible!important; min-height:100%!important; zoom:1!important; background:gray!important}
}

h2.c3 {word-spacing:1px; letter-spacing:1px}
span.c2 {color:red; word-spacing:normal; letter-spacing:normal}
span.c1 {word-spacing:-.11px}
#lnk {text-decoration:none; color:red}
.center-container {display:flex; justify-content:center; align-items:center; width:100%}
.content-wrapper {width:100%; max-width:1200px; margin:0 auto; padding:20px; box-sizing:border-box}
#ftc1 {margin:0 auto; text-align:center; background-color:#000}
#ftc2 {color:rgba(255,255,255,.75); text-decoration:none; color:#fff}

@media (min-width:999px) {
body, html {background:url(https://www.inconsequential.org/files/12345/img/iart2.webp), linear-gradient(45deg,#1a1a1a 0,#2d2d2d 25%,#1a1a1a 50%,#404040 75%,#1a1a1a 100%)!important; background-repeat:no-repeat, repeat!important; background-position:center; background-size:50%, auto!important; background-origin:padding-box!important; background-position-x:50%!important; background-position-y:30%!important}
}

@media (min-height:807px) and (orientation:portrait) and (max-height:1023px) {
body {padding-top:5vh}
html {font-size:16px!important}
nav.buttons.button-grid.noted {font-size:.83rem}
}

@media (min-height:694px) and (orientation:portrait) and (max-height:806px) and (min-width:320px) {
body {padding-top:5vh}
html {font-size:16px!important}
nav.buttons.button-grid.noted {font-size:.75rem}
}

@media (max-height:699px) and (max-width:500px) {
html {position:relative; top:unset; left:unset; transform:unset}
body {padding-top:1px}
}

@media (min-width:1000px) and (min-height:595px) and (max-height:2000px) {
#rrr {display:none}
}

@media (min-width:2px) and (max-width:999px) and (min-height:100px) and (max-height:768px) and (orientation:landscape) {
body, html {min-height:max-content!important; overflow:visible!important; min-height:100%!important; zoom:1!important; background:#4682b4!important}
}

@media (min-width:1000px) {
footer {max-width:fit-content}
}

@media (max-height:850px) and (max-width:400px) and (orientation:portrait) {
.hero img {max-width:fit-content}
}

@media (min-width:1000px) {
.center-container {align-items:center; justify-content:center}
.content-wrapper {max-width:1000px}
}

@media (max-width:999px) and (orientation:portrait) {
.center-container {align-items:center; justify-content:center}
.content-wrapper {width:100%; max-width:1200px; padding:15px}
}

@media (max-width:999px) and (orientation:landscape) {
.center-container {align-items:flex-start; padding-top:20px}
}

@media (min-width:1000px) and (orientation:landscape) {
body {background-position-x:50%!important; background-position-y:50%!important; min-height:fit-content!important; background-size:45%, auto!important}
}

@media (max-height:850px) and (max-width:400px) and (orientation:portrait) {
.hero img {max-width:200px}
.content-wrapper {padding-top:1px}
footer {padding:1em; font-size:.9em}
}

@media (max-width:999px) and (min-width:376px) and (min-height:741px) and (orientation:portrait) {
footer {bottom:1px; position:absolute; min-width:100%; padding:1em 0}
.content-wrapper {padding:0}
body {padding-top:0}
}

@media (min-width:2px) and (max-width:375px) and (max-height:740px) and (orientation:portrait) {
footer {bottom:1px; position:absolute; min-width:100%; padding:1em 0}
.content-wrapper {padding:0}
body {padding-top:0}
}

@media (min-width:1000px) {
.navigation-wrapper {padding:1px; margin-bottom:1px; width:100%; max-width:100%; flex-direction:column; align-items:center; gap:.5rem}
}

#love, div.logo, header {padding:.2rem!important}

@media (max-width:999px) and (min-width:100px) and (min-height:100px) and (orientation:portrait) {
footer {bottom:1px!important; position:absolute; padding:1em 0; width:100%}
.content-wrapper {padding:1px!important}
section.hero {zoom:1.2}
nav.buttons.button-grid.noted {font-size:.95rem!important}
body {overflow-y:visible!important}
div.highlight.logo.padded-box {zoom:1.05}
}

@media (min-width:1000px) and (orientation:landscape) {
.center-container {height:100%}
body {background-size:520px!important}
.navigation-wrapper {margin-top:1rem}
nav.btt2, nav.btt4 {margin-top:-2.2rem}
}

@media (min-height:1000px) {
html {zoom:1.25!important}
}

@media (min-height:694px) and (orientation:portrait) and (max-height:806px) and (min-width:320px) {
#ftc1 {display:none}
}

@media (max-height:699px) and (max-width:500px) {
footer {display:none}
}

@media (min-width:2400px) and (min-height:1100px) and (orientation:landscape) {
html {zoom:2.1!important}
}