html {
padding: 0;
scroll-behavior: smooth;
width: 100vw;
height: 100vh;
-webkit-font-smoothing: antialiased;
scrollbar-color: #164D6B #00243B;
}
@-moz-document url-prefix() {
html {
scrollbar-color: #164D6B #00243B;
}
}
main {
min-height: calc(100vh);
scrollbar-color: #164D6B #00243B;
}
/* custom scrollbar (retired)
::-webkit-scrollbar {
border-image: transparent;
border-image-source: url('/assets/scrollbar.png');
border-image-width: 8px;
border-image-slice: 7 fill;
border-image-repeat: repeat;
border-radius: 100px;
}
::-webkit-scrollbar-thumb {
border-image: url('/assets/scrollbar-thumb.png');
border-image-width: 8px;
border-image-slice: 7 fill;
border-image-repeat: repeat;
border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
border-image-source: url('/assets/scrollbar-thumb-hover.png');
}::-webkit-scrollbar {
border-image: transparent;
border-image-source: url('/assets/scrollbar.png');
border-image-width: 8px;
border-image-slice: 7 fill;
border-image-repeat: repeat;
border-radius: 100px;
transition: all 5s;
scrollbar-color: #003759 #00243B;
}
::-webkit-scrollbar-thumb {
border-image: url('/assets/scrollbar-thumb.png');
border-image-width: 8px;
border-image-slice: 7 fill;
border-image-repeat: repeat;
border-radius: 100px;
transition: all 5s;
}
::-webkit-scrollbar-thumb:hover {
border-image-source: url('/assets/scrollbar-thumb-hover.png');
transition: all 5s;
}
*/
/* body */
body {
margin: 0;
background-color: #336587;
background-image: url(images/triangle3-seamless2.jpg);
background-size: 100%;
background-attachment: fixed;
background-repeat: repeat;
width: 100%;
height: 100%;
overflow-y: scroll;
/* Show vertical scrollbar */
overflow-x: hidden;
font-family: "Helvetica", "Baskerville", serif;
text-align: center;
padding-bottom: 120px;
word-wrap:break-word;
scrollbar-width: thin;
scrollbar-color: #003759 #00243B;
}
.header {
z-index: 10000;
}
.container-header {
background-image: url(images/header9.png);
background-attachment: fixed;
width: 100%;
min-width: 100%;
height: 120px;
background-repeat: repeat-x;
position: fixed;
z-index: 1000000;
display: block;
}
.container-header-gallery {
background-image: url(/images/header9.png);
background-attachment: inherit;
width: 100%;
min-width: 100%;
height: 120px;
background-repeat: repeat-x;
position: relative;
z-index: 1000000;
display: block;
}
@media only screen and (max-width: 870px) {
.container-header {
background-image: url(/images/header9.png);
background-attachment: scroll;
width: 100%;
min-width: 100%;
height: 120px;
background-repeat: repeat-x;
position: relative;
z-index: 1000000;
display: block;
}
#splashart {
position: relative;
width: 90vw;
right: 20px;
}
}
/* Matches your header height */
.blocker {
height: 100px;
}
@media only screen and (max-width: 870px) {
.blocker {
height: 50px;
}
}
;
/* containers */
.container {
margin: auto;
margin-top: 150px;
padding: 15px 15px;
}
.container2 {
margin: auto;
margin-top: 139px;
max-width: 1500px;
padding: 15px 15px;
}
.container3 {
margin: auto;
max-width: 1500px;
padding: 15px 15px;
margin-top: 0px;
height: auto;
}
.container4 {
margin: auto;
max-width: 1600px;
padding: 15px 15px;
margin-top: 0px;
height: auto;
}
.container-textimage {
display: flex;
align-items: center;
justify-content: left;
margin: auto;
}
.text {}
/* content boxes */
.boxed {
background:
repeating-conic-gradient(
#003759 0 90deg,
#00243B 0 180deg)
0 0/100px 100px round;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
sans-serif;
color: white;
letter-spacing: 1px;
border-radius: 15px;
padding: 15px 15px;
outline: 5px solid #000e1c;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: 60%;
height: auto;
min-width: 90%;
max-width: 100%;
line-height: 25px;
margin-right: 15px;
text-shadow: black -2px 2px 2px;
box-shadow: -0px 0px 10px black;
transition: 0.1s;
transition-timing-function: ease;
margin-top: 10px;
margin-bottom: 20px;
box-sizing: border-box;
z-index: 5;
overflow: visible;
}
.boxed2 {
background-color: #003759;
background-image: linear-gradient(
45deg,
#00243B 25%,
transparent 25%,
transparent 75%,
#00243B 75%,
#00243B
),
linear-gradient(
-45deg,
#00243B 25%,
transparent 25%,
transparent 75%,
#00243B 75%,
#00243B
)
;
background-size: 70px 70px;
background-repeat: repeat;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
sans-serif;
color: white;
letter-spacing: 1px;
border-radius: 15px;
padding: 30px 15px;
outline: 5px solid #000e1c;
text-align: center;
text-decoration: none;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: 50%;
height: inherit;
align-self: center;
margin-right: 15px;
text-shadow: black -2px 2px 2px;
box-shadow: -0px 0px 10px black;
transition: 0.3s;
transition-timing-function: ease;
margin-top: 10px;
margin-bottom: 20px;
box-sizing: border-box;
max-height: 900px;
overflow-x: hidden;
}
@media only screen and (max-width: 870px) {
.boxed2 {
max-height: 1220px;
}
img.boxheader {
background-size: 100% !important;
}
}
.boxed3 {
background:
repeating-conic-gradient(
#003759 0 90deg,
#00243B 0 180deg)
0 0/100px 100px round;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
sans-serif;
color: white;
letter-spacing: 1px;
border-radius: 15px;
padding: 15px 15px;
outline: 5px solid #000e1c;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: auto;
height: inherit;
line-height: 30px;
margin-right: 15px;
text-shadow: #062c40BF -2px 2px 2px;
box-shadow: 0px 0px 10px black;
transition: 0.1s;
transition-timing-function: ease;
margin-top: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
.boxed4 {
background: repeating-linear-gradient(45deg, #003759, #003759 20px, #00243B 20px, #00243B 40px);
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
sans-serif;
color: white;
letter-spacing: 1px;
border-radius: 15px;
padding: 15px 15px;
outline: 5px solid #000e1c;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: 90%;
height: auto;
min-width: 70%;
max-width: 100%;
line-height: 25px;
margin-right: 15px;
text-shadow: black -2px 2px 2px;
box-shadow: -0px 0px 10px black;
transition: 0.1s;
transition-timing-function: ease;
margin-top: 10px;
margin-bottom: 20px;
box-sizing: border-box;
z-index: 1;
overflow: visible;
}
}
.boxed-gallery {
background: url(images/checker.png);
background-size: 100%;
border: none;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
sans-serif;
color: white;
letter-spacing: 1px;
border-radius: 15px;
padding: 15px 15px;
outline: 5px solid #00243B;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: auto;
height: inherit;
line-height: 30px;
margin-right: 15px;
text-shadow: #062c40BF -2px 2px 2px;
box-shadow: 0px 0px 10px black;
transition: 0.1s;
transition-timing-function: ease;
margin-top: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
.boxed-grid {
background:
repeating-conic-gradient(
#003759 0 90deg,
#00243B 0 180deg)
0 0/100px 100px round;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
sans-serif;
color: white;
letter-spacing: 1px;
border-radius: 15px;
padding: 15px 15px;
outline: 6px solid #000e1c;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: 200px;
max-width: 300px;
overflow: hidden;
min-width: 100%;
height: 500px;
line-height: 25px;
margin-right: 15px;
text-shadow: black -2px 2px 0px;
box-shadow: -0px 0px 10px black;
transition: 0.1s;
transition-timing-function: ease;
margin-bottom: 5px;
box-sizing: inherit;
overflow-y: auto;
overflow-wrap: anywhere;
}
.grid-container {
display: grid;
grid-column-gap: 30px;
grid-row-gap: 20px;
grid-template-columns: auto auto auto;
padding: 10px;
height: auto;
}
@media only screen and (max-width: 870px) {
.grid-container {
grid-template-columns: auto;
}
}
/* header styles */
h1 {
font-size: 22px;
line-height: 30px;
margin-top: 5px;
margin-bottom: 5px;
text-shadow: black -2px 2px 2px;
}
h2 {
text-shadow: black -2px 2px 2px;
}
/* paragraph / text styles */
p {
font-size: 16px;
text-align: left;
margin-left: 10px;
line-height: 30px;
margin-right: 10px;
text-shadow: #062c40BF -2px 2px 2px;
}
.bolded {
font-weight: bold;
color: #fff;
}
.emphasis {
font-size: 20px;
color: #2064d6;
}
.action {
color: #0f4caf;
font-style: italic;
}
/* list styles */
ul {
text-align: left;
margin: 0;
padding: 0;
}
.ul-nostyle {
padding-left: 0px;
text-align: left;
}
li {
}
.li-boxed {
}
.li-boxed-updatelog {
columns: 3;
list-style-type: none; max-width: 100%;margin: auto; text-align: center;columns:3;
}
@media screen and (max-width: 600px) {
.li-boxed-updatelog {
columns:1;
}
}
.li-boxed li {
border:5px;
border-style:outset;
padding: 5px;
border-color: #00568C;
margin-bottom: 5px;
margin:auto;
overflow: auto;
background-image: url(/images/header12.png);
background-size: 140%;
list-style-type: none;
max-width: 900px;
text-align: center;
}
.li-boxed-updatelog li {
border:5px;
border-style:outset;
padding: 5px;
border-color: #00568C;
margin-bottom: 5px;
margin:auto;
overflow: auto;
background-image: url(/images/header12.png);
background-size: 140%;
list-style-type: none;
max-width: 900px;
text-align: center;
}
.li-sitemap li {
padding-left: 0px;
list-style-type: none;
line-height: 25px;
text-align: left;
}
.li-nested li {
padding-left: 20px;
padding-top:3px;
padding-bottom:3px;
width: auto;
}
li.nobg {
padding: px;
background-image: none;
border:none;
margin-bottom: 5px;
margin-left: 10px;
}
/* horizontal rule styles */
hr {
border: none;
height: 5px;
/* Set the hr color */
color: white;
/* old IE */
background-color: white;
/* Modern Browsers */
margin-top: 10px;
margin-bottom: 5px;
border-radius: 15px;
}
hr.small {
height: 5px;
margin-top: 2px;
margin-bottom: 2px;
outline: 3px solid #00243B;
/* Set the hr color */
color: #164D6B;
/* old IE */
background-color: #164D6B;
/* Modern Browsers */
width: 50%;
border-radius: 15px;
}
/* tooltips */
.tooltip .tooltiptext {
visibility: hidden;
width: auto;
background-image: url(/images/triangle3-seamless.png);
background-size: 200%;
color: #fff;
text-align: center;
border-radius: 15px;
padding: 7px 7px 7px 7px;
outline: 3px solid #00243B;
/* Position the tooltip */
position: absolute;
z-index: 1;
padding-left: 7px;
margin-left: 7px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* image styles */
img {
max-width: 100%;
pointer-events: auto;
}
.img2 {
width: 20%;
pointer-events: auto;
}
img.rounded {
object-fit: cover;
border-radius: 50%;
margin-top: 20px;
height: 250px;
width: 250px;
box-shadow: 12px 17px 0px #000e1c;
transition: .5s;
pointer-events: none;
}
img.rounded2 {
object-fit: cover;
border-radius: 15px;
margin-top: 5px;
max-height: 90px;
max-width:20%;
outline: 3px solid #00243B;
box-shadow: 15px 12px 0px #00243B;
transition: .5s;
}
.smallthumb {
border-radius: 15px; width: 150px;
}
img.boxheader {
margin-top: -50px;
position: relative;
z-index: 0;
left: 0px;
top:-1;
}
.recentart {
object-fit: cover;
border-radius: 50%;
margin-top: 5px;
margin: 4px;
height: 150px;
width: 150px;
outline: 6px solid #00243B;
transition: .5s;
}
img.sm {
transition: 0.05s;
transition-timing-function: ease-in-out;
pointer-events: auto;
height: auto;
}
img.slide {
border-radius: 15px;
box-shadow: 0 0 0 4px #00243B;
}
img.sm:hover {
transform: scale(1.1);
}
@media only screen and (max-width: 980px) {
img.rounded {
object-fit: cover;
border-radius: 50%;
height: 150px;
width: 150px;
box-shadow: 15px 12px 0px #00243B;
}
}
.img-float {
position: fixed;
bottom: 10px;
right: -250px;
max-height: 30%;
z-index: -1;
padding-bottom: 5px;
}
.img-float2 {
position: fixed;
bottom: 0px;
left: -280px;
max-height: 30%;
z-index: -1;
padding-bottom: 5px;
}
/* button styles */
button {
background: url(/images/button2.png);
background-size: 120%;
border: none;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
user-select: none;
color: white;
letter-spacing: 1px;
outline: 3px solid #00243B;
border-color: white;
border-radius: 5px;
padding: 0px;
padding-top: 8px;
padding-bottom: 8px;
text-decoration: none;
display: inline-block;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: 170px;
line-height: 30px;
margin-right: 15px;
text-shadow: black -2px 2px 0px;
box-shadow: 0px 0px 5px black;
cursor: pointer;
transition: 0.1s;
transition-timing-function: ease;
margin-top: 15px;
margin-bottom: 2px;
box-sizing: border-box;
overflow-x: hidden;
}
button:hover {
background-color: #2899b0;
box-shadow: 0 0 0 5px white;
color: #bde9ff;
}
input[type=button] {
background: url(images/checker3.png);
background-size: 200%;
border: none;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
user-select: none;
color: white;
letter-spacing: 1px;
border-color: white;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: 200px;
line-height: 30px;
margin-bottom: 5px;
margin-right: 15px;
text-shadow: #062c40BF -2px 2px 2px;
box-shadow: 0px 0px 5px black;
cursor: pointer;
transition: 0.1s;
transition-timing-function: ease;
box-sizing: border-box;
overflow-x: hidden;
}
input[type=button2] {
background: url(/images/button2.png);
background-size: 120%;
border: none;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
user-select: none;
color: white;
letter-spacing: 1px;
outline: 3px solid #00243B;
border-color: white;
border-radius: 5px;
padding: 0px;
padding-top: 8px;
padding-bottom: 8px;
text-decoration: none;
display: inline-block;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: 170px;
line-height: 30px;
margin-right: 15px;
text-shadow: black -2px 2px 0px;
box-shadow: 0px 0px 5px black;
cursor: pointer;
transition: 0.1s;
transition-timing-function: ease;
margin-top: 15px;
margin-bottom: 2px;
box-sizing: border-box;
overflow-x: hidden;
}
input[type=button]:active {
transform: scale(0.90);
}
.button2 {
background: url(images/checker3.png);
background-size: 200%;
border: none;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
user-select: none;
color: white;
letter-spacing: 1px;
border-color: white;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
width: 200px;
line-height: 30px;
margin-bottom: 5px;
margin-right: 15px;
text-shadow: black -2px 2px 2px;
box-shadow: 0px 0px 5px black;
cursor: pointer;
transition: 0.1s;
transition-timing-function: ease;
box-sizing: border-box;
overflow-x: hidden;
z-index: 1;
}
@media only screen and (max-width: 870px) {
button {
width: 90px;
font-size: 10px;
text-align: center;
padding: 0px 0px;
background-size: 150%;
border-radius: 5px;
margin-top: 6px;
}
img.sm {
width: 30px !important;
height: 30px !important;
}
ul.li-sitemap {
font-size: 12px;
}
img.rounded {
width: 50px;
height: 50px;
}
img.rounded2 {
object-fit: cover;
border-radius: 15px;
margin-top: 5px;
max-height: 90px;
max-width:30%;
outline: 3px solid #00243B;
box-shadow: 15px 12px 0px #00243B;
transition: .5s;
}
}
body {
padding:0;
}
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
max-width: auto;
}
.left {
max-width: 40%;
float: left;
//display: inline-flex;
margin-left: 15px;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 12px;
color: white;
}
.right {
max-width: 40%;
float: left;
//display: inline-flex;
margin-right: 60px;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
color: white;
}
element {
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
}
/* unvisited link */
a:link {
color: lightblue;
text-decoration: none;
}
/* visited link */
a:visited {
color: lightblue;
}
/* mouse over link */
a:hover {
color: #2899b0;
transition: 0.1s;
}
/* selected link */
a:active {
color: #2899b0;
}
body nav {
position: sticky;
top: 0;
}
$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
...
}
);
twitch-embed {
width: 5008px;
}
.scroll-top {
background-color: #00243B;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
sans-serif;
color: white;
letter-spacing: 1px;
border-radius: 10px;
padding: 5px 5px;
width: 35px;
position: fixed;
bottom: 10px;
right: 47px;
max-height: 30%;
z-index: 10;
}
/* scroll to top / bottom button styles */
.scroll-top:hover {
background-color: #003759;
;
box-shadow: 0 0 0 2px white;
color: #bde9ff;
justify-content: center;
align-items: center;
}
.scroll-bot {
background-color: #00243B;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
sans-serif;
color: white;
letter-spacing: 1px;
border-radius: 10px;
padding: 5px 5px;
width: 35px;
position: fixed;
bottom: 10px;
right: 10px;
max-height: 30%;
z-index: 10;
}
.scroll-bot:hover {
background-color: #003759;
;
box-shadow: 0 0 0 2px white;
color: #bde9ff;
justify-content: center;
align-items: center;
}
/* footer styles */
footer {
background-image: url(images/footer2.png);
position: relative;
text-align: center;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background-repeat: repeat;
z-index: 5;
overflow: auto;
}
.footercontent {
padding-top: 70px;
float: inherit;
top: 70px;
font-weight: bolder;
text-decoration-line: none pointer-events: none;
font-size: 16px;
color: white;
text-align: center;
margin: auto;
}
* {
box-sizing: border-box
}
/* Slideshow container */
.slideshow-container {
padding: 15px;
max-width: 1000px;
margin: auto;
z-index: 0;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
position: inherit;
cursor: pointer;
margin: 50px;
width: auto;
padding: 10px;
top: 250px;
color: white;
font-weight: bold;
font-size: 30px;
transition: 0.2s ease;
border-radius: 3px 0 0 3px;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 230px;
border-radius: 3px 0 0 3px;
}
/* Position the "prev button" to the left */
.prev {
left: 250px;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: #062c40;
border-radius: 10px;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 3px 3px;
background-color: #062c40;
border-radius: 50%;
display: inline-block;
transition: background-color 0.2s ease;
}
.active,
.dot:hover {
background-color: white;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 0.2s;
}
.gallery {
width:100%;
height: 50%;
margin:auto;
display: flex;
columns: 15rem 3;
column-gap: 20px;
}
img.emote {
width: 40px;
vertical-align: middle;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#rounded {
outline: 3px solid #00243B;
border-radius: 15px;
height: auto;
width:auto;
max-height: 222px;
pointer-events: auto;
cursor: pointer;
overflow-x: hidden;
}
#rounded-t {
border-radius: 15px;
height: auto;
width: auto;
max-height: 222px;
}
#rounded:hover, .rounded2:hover {
outline: 3px solid white;
}
.recentart:hover {
outline: 3px solid white;
}
#featuredart {
}
.featuredart:hover {
outline: 3px solid white;
transition: 0.3s;
}
#img-blog {
max-width: 80%;
max-height: 400px;
outline: 3px solid #00243B;
border-radius: 15px;
}
#img-blog-t {
max-width: 80%;
max-height: 400px;
border-radius: 15px;
}
#gallery {
pointer-events: none;
}
img::before {
content: 'not found';
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 200px;
background-image: url(images/sm-blank.png);
color: currentColor;
text-align: center;
border-radius: 2px;
display: block;
width: 200px;
height: 200px;
overflow: hidden;
}
/* Header/Blog Title */
.blogheader {
padding: 30px;
font-size: 40px;
text-align: center;
outline: 5px solid #00243B;
background-image: url(images/header12.png);
margin-bottom: 20px;
border-radius: 15px;
color: white;
background-size: 90%;
pointer-events: none;
font-family: "Prompt";
,
"Bradley Hand";
,
"Comic Sans MS";
,
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content {
height: auto;
width: auto;
font-size: 24px;
text-align: center;
margin: 5px;
display: none;
}
#loadMore {
width: 200px;
color: #fff;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 10px;
border: 1px solid transparent;
background-image: url(images/checker3.png);
background-size: 200%;
transition: .3s;
}
#loadMore:hover {
background-color: #fff;
border: 1px solid white;
text-decoration: none;
}
.noContent {
pointer-events: none;
color:white;
}
details > img {
content-visibility: hidden;
}
details[open] > img {
content-visibility: auto;
}
#kofiframe {
border-radius: 15px;
}
.lbimg {
}
/* transparent text box */
.tbox {
background:rgba(0, 0, 0, .5);
border-radius: 15px;
margin:inherit;
padding:20px;
}
/* hr with text in middle */
fieldset.title {
border-radius: 10px;
border-top: 7px solid white;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
fieldset.title legend {
padding: 5px 10px;
}
.lastupdate {
}
.webbuttons {
image-rendering: crisp-edges;
display: block;
}
.image-hover-highlight {
-webkit-transition: all 0.10s;
transition: all 0.10s;
box-shadow: 0 0 0 2px transparent;
&:hover {
border-radius: 5px;
filter: brightness(110%);
-webkit-filter: brightness(110%);
-moz-filter: brightness(110%);
-o-filter: brightness(110%);
-ms-filter: brightness(110%);
-webkit-transition: all 0.10s;
transition: all 0.10s;
transform: scale(1.05);
}
}
/* no select / no drag */
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer / Edge */
user-select: none;
/* Non-prefixed version */
}
/* index page code (3 column layout) */
/* container */
.content-with-sidebars {
display:flex;
flex-wrap:wrap;
margin-right: 10vw;
margin-left: 10vw;
padding: 0;
}
.main-column {
}
.left-column {
}
.right-column {
}
/* columns */
.content-with-sidebars > * {
width:100%;
}
/* tablet breakpoint */
@media (min-width:768px) {
.content-with-sidebars > * {
width:50%;
margin-right: 0px;
margin-left: 0px;
}
.li-nested li > * {
padding-left: 0px;
}
.content-with-sidebars > *:nth-child(1) {
width:100%;
}
}
/* desktop breakpoint */
@media (min-width:1024px) {
.content-with-sidebars > * {
width:25%;
}
.content-with-sidebars > *:nth-child(1) {
width:50%;
}
.content-with-sidebars > *:nth-child(2) {
order:-1;
}
}
/* CSS Animations */
.swivel {
z-index: -5;
color: white;
animation: mymove 0.6s ease-in-out infinite alternate;
}
@keyframes mymove {
0% {transform: rotate(3deg);}
100% {transform: rotate(-3deg);
}
}
#shake {
animation: shake 0.2s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(2px, 2px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* BLOGPOST LISTS */
.post-list {
padding-inline-start: var(--gap);
list-style-type: "";
text-indent: calc(-1 * var(--gap));
font-size: var(--interface-font-size);
}
#tag-index {
padding-inline-start: 0;
list-style-type: "";
details {
margin-block: 0;
}
[open] {
margin-block-end: 1rem;
}
summary {
font-size: var(--interface-font-size);
}
}
/* animated scroll */
#animatedBackground {
top: 0;
left: 0;
background-repeat: repeat;
background-position: 0 0;
background-size: auto 100%;
/*adjust s value for speed*/
animation: animatedBackground 1000s linear infinite;
}
@keyframes animatedBackground {
from {
background-position: 0 0;
}
/*use negative width if you want it to flow right to left else and positive for left to right*/
to {
background-position: 10000px 0;
}
}
#animatedBackground2 {
top: 0;
left: 0;
background-repeat: round;
background-position: 0 0;
background-size: auto 100%;
/*adjust s value for speed*/
animation: animatedBackground2 150s linear infinite;
}
@keyframes animatedBackground2 {
0% {
background-position: 0 0;
}
100% {
background-position: 100vw 100vw;
}
}
/* BLOG POSTS */
article > header {
margin-block-end: 1rem;
h1 {
margin-block-end: 0.5rem;
font-size: 2.2rem;
}
& + * {
margin-block-start: 0;
}
}
#post-tags {
margin-block: 0;
& > li:not(:last-child)::after {
content: ",\a0"; /* comma + non-breaking space */
}
a::before {
content: "#";
}
}
#post-nav > ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
padding-inline-start: 0;
list-style-type: "";
& > :first-child > a::before {
content: "\2190 \a0"; /* left arrow + non-breaking space */
}
& > :last-child {
text-align: right;
a::after {
content: "\2192 \a0"; /* right arrow + non-breaking space */
}
}
}
#post-nav2 > ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
padding-inline-start: 0;
list-style-type: "";
& > :first-child > a::before {
content: "\2190 \a0"; /* left arrow + non-breaking space */
}
& > :last-child {
text-align: right;
a::after {
content: "\2192 \a0"; /* right arrow + non-breaking space */
}
}
}
/* infinite marquee */
#marquee {
width:100%; /* probably be best at 100% within a containing element like a sidebar or header */
margin:auto; /* keeps it centered lol */
overflow: hidden;
white-space: nowrap;
padding: .5em;
}
#marquee:hover #stamps {
animation-play-state: paused; /* remove this line if you'd rather the stamps not pause when the visitor hovers over them */
}
#stamps {
display: inline-block;
will-change: transform;
animation: marquee 50s linear infinite; /* here, 100s denotes 100 seconds, so change it to the speed you'd like your marquee to flow. slower is better imho */
}
#stamps img {
width: 99px;
height:100%; /* since most stamps are 56px tall and 99 px wide, i've set the defaults to this */
transition: all 0.2s;
position: relative;
display: inline-block;
z-index: 1;
}
#stamps img:hover {
transform: scale(1.2); /* remove this if you'd rather they not explode on hover */
opacity:1;
z-index: 100;
}
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-550%);
}
}
/* status cafe */
#statuscafe {
padding: .5em;
}
#statuscafe-username {
margin-bottom: .5em;
}
#statuscafe-content {
margin: 0 1em 0.5em 1em;
}
#splashart {
}
#song {
text-align: center;
}
/* `webrings */
#rhythmring *{
margin:auto;
color: white !important;
fill: white !important;
}
#rhythmring-img{
content: url("https://maddycha.com/rhythm-ring/imgs/widget/g1.png") !important;
}
#cdr{
font-family: "Prompt" !important;
,
"Bradley Hand";
,
"Comic Sans MS";
,
sans-serif !important;
color: white;
font-size: 10px !important;
}
#cdr p{
font-size: 10px !important;
text-align: center;
}
.cdr-widget {
font-family: "Prompt" !important;
font-size: 10px !important;
}
/* `show only on mobile / hide on mobile */
.show-on-mobile {
display:none;
}
@media screen and (max-width:800px) {
.show-on-mobile {
display: block;
}
@media screen and (max-width:800px) {
.hide-on-mobile {
display: none;
}
canvas {
width: 100%;
height: 100%;
margin: auto;
padding: 0;
display: block;
}
}