:root {
    --yellow: rgb(255, 236, 147);
    --body-bg: #dcffaa;
    --dropdown-hover-bg: #ffe373;
    --light-blue: rgb(125, 186, 255);
    --nav-bg: rgb(255, 215, 93);
    --green: rgb(139, 228, 90);
    --yellow: rgb(255, 192, 0);
    --orange: rgb(238, 137, 77);
    --transparent-light-blue: rgba(101, 190, 243, 0.541);
    --dropdown-bar-color: white;
    --dropdown-bar-hover-color: var(--yellow);
    --dropdown-link-hover-bg: var(--nav-bg);
    --nav-bar-height: 70px;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.sipu.li/Karla.ttf) format('truetype');
}
@font-face {
  font-family: 'Rowdies';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.sipu.li/Rowdies.ttf) format('truetype');
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.sipu.li/Ubuntu Mono.ttf") format('truetype');
}
@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.sipu.li/Fjalla One.ttf") format('truetype');
}
/* Start https://www.cursors-4u.com */ * {cursor: url(https://ani.cursors-4u.net/nature/nat-11/nat1054.cur), auto !important;} /* End https://www.cursors-4u.com */
html {
    overflow-x: hidden;
    min-height: 100vh;
}
body {
    background-color: var(--body-bg);
    margin: 0px;
    font-family: 'Karla', sans-serif;
}
h1 {
    color: white;
    text-align: center;
    font-family: 'Fjalla One', cursive;
    font-size: 37px;
    margin: 0px auto;
    padding: 9px 0px;
    width: 200px;
    text-decoration: underline 1.5px wavy var(--yellow);
}
h2, h3 {
    color: var(--orange);
    font-family: 'Karla', sans-serif;
}
h2 {
    font-size: 29px;
    text-decoration: underline 2px dashed var(--light-blue);
}
h3 {
    font-size: 25px;
}
.header.kukka a:link, .header.kukka a:visited, .header.kukka a:active {
    text-decoration: none;
}
p, li {
    font-family: 'Karla', sans-serif;
    font-size: 18px;
}
li {
    padding: 3px 10px;
}
.navbar .header {
    position: relative;
    align-self: auto;
}
#navbar > * {
    flex: 1;
    box-sizing: border-box;
    z-index: 3;
}
nav {
    height: var(--nav-bar-height);
    width: 100%;
    border-bottom: 1px solid white;
    background-color: var(--nav-bg);
    position: relative;
    display: flex;
    align-items: center;
}
#content {
    width: 85%;
    max-width: 1130px;
    margin: auto;
    padding: 20px;
    background-color: white;
    border-left: 3px double var(--green);
    border-right: 3px double var(--green);
    border-bottom: 3px double var(--green);
    /*border-left: 22px solid;
    border-right: 22px solid;
    border-image: url("https://64.media.tumblr.com/01022cdc35cf42aca5469591819d3df5/tumblr_inline_mrhrj7Dept1qz4rgp.gif");
    border-image-slice: 0 24 0 24;
    border-image-width: 25px;
    border-image-outset: 24px;
    border-image-repeat: repeat;*/
}


@media only screen and (max-width: 1000px) {        
    #content {
        padding: 10px;
    }
}
code, samp {
    background-color: rgb(255, 185, 223);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'Ubuntu Mono', monospace;
}
pre > code, pre > samp {
    width: 93%;
    max-width: 928px;
    margin: 10px;
    padding: 10px;
    /*background-color: rgb(198, 232, 255);*/
    background-color: rgb(255, 181, 209);
    display: block;
    /*border: 2px solid rgb(142, 204, 255);*/
    border-radius: 10px;
    font-size: 17px;
    overflow-x: auto;
}
pre > code::selection, pre > samp::selection {
    background-color: var(--yellow);
    color: rgb(245, 56, 204);
}
::selection {
    background-color: rgb(255, 142, 204);
    color: white;
}

.loader-container {
	width: 25px;
	height: 25px;
	position: absolute;
    z-index: 100;
    pointer-events:none;
}
@keyframes size {
    from {
        width: 100%;
        height: 100%;
    }
    to {
        width: 0%;
        height: 0%;
    }
}
@keyframes down {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(500px);
    }
}
@keyframes downleft {
    from {
      transform: translateY(0px) translateX(0px);
    }
    to {
      transform: translateY(500px) translateX(-100px);
    }
}
@keyframes downright {
    from {
        transform: translateY(0px) translateX(0px);
      }
      to {
        transform: translateY(500px) translateX(100px);
      }
}
.loader {
		border-radius:10px;
		height:100%;
		width: 100%;
        animation-duration: 2s;
        animation-name: down;
        animation-timing-function: ease-in;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        user-select: none;
        pointer-events:none;
}
.loader::after {
            background-image: url(/images/yellowflower.png);
            background-position: center;
            background-size: cover;
			content:'';
			position:absolute;
			height: 80px;
			width:80px;
			left:10px;
			top:10px;
            animation-name: size;
            animation-duration: 2s;
            animation-timing-function: ease-in;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            pointer-events: none;
}
.dropdown {
    position: relative;
    height: 100%;
    width: max-content
}
.menu-button-container {
    cursor: pointer;
    padding: 0 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    transition: 0.15s padding;
}
.dropdown-container {
    height: 100%;
}
.bar {
    width: 32px;
    height: 6px;
    background-color: var(--dropdown-bar-color);
    border-radius: 2px;
    transition: background-color 0.3s;
}
.dropdown:hover .bar {
    background-color: var(--dropdown-bar-hover-color);
}
.dropdown-content {
    display: none;
    position: absolute;
    top: var(--nav-bar-height);
    left: -7px;
}
.dropdown-content a {
    width: 160px;
    background-color: rgb(255, 255, 255);
    padding: 10px 20px;
    display: block;
    font-size: 18px;
    color: var(--dropdown-link-color);
    text-decoration: none;
}
.dropdown-content a:hover {
    background-color: var(--dropdown-link-hover-bg);
}
.dropdown:hover .dropdown-content {
    display: block;
}

#content > ul a {
    color: var(--orange);
}
#content > ul li::marker {
    color: var(--orange);
}
#header {
    /*background-image: url(https://64.media.tumblr.com/98170f640344f09f68227e07650a6a4a/tumblr_inline_mrhsfuBsIW1qz4rgp.gif);*/
    background-color: inherit;
    background-blend-mode: multiply;
    background-size: 70px;
    background-position: -10px 0px;
    width: 100%;
}
#header h2 {
    background-color: inherit;
    width: fit-content;
}
.pageslist li p {
    margin: 7px 0px;
}
#content a {
    color: var(--orange);
}
#content a:hover {
    color: var(--yellow);
}
#randombutton {
    border-radius: 15px;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    border-color: var(--green);
    background-color: rgb(200, 246, 175);
    font-family: 'Karla', sans-serif;
    font-size: 0.9em;
}
#randombutton:hover {
    background-color: rgb(209, 249, 187);
    border-top-color: rgb(164, 234, 127);
    border-left-color: rgb(164, 234, 127);
    
}