@import url('https//fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gaegu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coral+Pixels&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ruge+Boogie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bonbon&display=swap');
@font-face {font-family: 'Mazzy'; src: url('fonts/MazzyTM-Regular.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: "Rascal"; src: url('https://disturb-the-premise.neocities.org/fonts/RASCAL__.TTF');}
  
body {cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="25" width="25"><text y="20" font-size="27" fill="black">☆</text></svg>') 12 12, auto;}
a {cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="25" width="25"><text y="20" font-size="27" fill="black">★</text></svg>') 12 12, pointer;}
  
.button-blue {height: 100px; width: 100px; padding: 5px; border: 2.5px solid darkgreen; margin: 5px;}
.centered-div {height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}

.disturb-the-premise {font-size: 20 px;}
.disturb-the-premise:hover {font-family: "Rascal"; font-size: 150%; color:#ffa600}

header {grid-row: 1 / 2; grid-column: 1 / 3;}
nav {grid-row: 2 / 3; grid-column: 1 / 2; height: max-content;}
main {grid-row: 2 / 3; grid-column: 2 / 3;height: max-content;}
footer {grid-row: 3 / 4; grid-column: 1 / 3;}

.box {max-width: 1200px; margin: 50px auto; display: grid; grid-column-gap: 50px; grid-template-columns: 250px minmax0, 1fr}
.first-picture-row, .second-picture-row {height: 40vh; display: flex; flex-direction: row; justify-content: center; align-items: center;}

:root {
  --background-color: #ffffff;
  --content-background-color: ##719ac9;
  --sidebar-background-color: ##a3c9a3;

  --text-color: #ffffff;
  --sidebar-text-color: #ffffff;
  --link-color: #bdb3ff;
  --link-color-hover: #c69de3;
  --link-color-visited: #7db884;
  --link-color-active: #ffd900;
  --font: "Gaegu";
  --heading-font: "Rascal";
  --font-size: 18px;

  --margin: 16px;
  --padding: 24px;
  --border: 3px dotted #ffd829;
  --round-borders: 52px;
  --sidebar-width: 200px;}

* {box-sizing: border-box;}

body {display: flex; align-items: flex-start; justify-content: center; min-height: 100vh; font-size: var(--font-size); margin: 0; padding: var(--margin); color: var(--text-color); font-family: var(--font); line-height: 1.2;background: var(--background-color); background-image: url("https://i.pinimg.com/736x/0f/18/de/0f18deeed436d23afa811a6539897bc2.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed;}

::selection {background: rgba(0, 0, 0, 0.2);}

mark {text-shadow: 1px 1px 4px var(--link-color); background-color: inherit; color: var(--text-color);}

a:link {color: #bdb3ff; text-decoration: none;}
a:visited {color: #7db884; text-decoration: none;}
a:hover {color: #c69de3; font-family: "Henny Penny"; font-size: 110%; text-decoration: none;}
a:active {color: #ffd900;text-decoration: none;}

.layout {width: 1200px; display: grid; grid-gap: var(--margin); grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width);}

main {grid-area: main; overflow-y: auto; padding: var(--padding); background: var(--content-background-color); border: var(--border); border-radius: var(--round-borders);}

header {grid-area: header;font-size: 1.2em;border: var(--border);border-radius: var(--round-borders);background: var(--content-background-color);}

.header-content {padding: var(--padding);}
.header-title {font-family: var(--heading-font); font-size: 3em; font-weight: bold;}
.header-image img {width: 100%;height: auto;}

aside {grid-area: aside;border: var(--border);border-radius: var(--round-borders);overflow: hidden;background: var(--sidebar-background-color);padding: var(--padding);color: var(--sidebar-text-color);}

.left-sidebar {grid-area: leftSidebar;}
.right-sidebar {grid-area: rightSidebar;}

.sidebar-title {font-weight: bold; font-size: 1.5em; font-family: var(--heading-font);}
.sidebar-title:hover {font-family: "Rascal"; font-size: 165%; color:#ffffff}

.sidebar-section {text-align: center};
.sidebar-section:not(:last-child) {margin-bottom: 3em;}
.sidebar-section ul,.sidebar-section ol {padding-left: 1.5em;}
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {margin-top: 10px;}

.sidebar-section blockquote {background: rgba(0, 0, 0, 0.1); padding: 15px; margin: 1em 0; border-radius: 10px; overflow: hidden;}
.sidebar-section blockquote > *:first-child {margin-top: 0;}
.sidebar-section blockquote > *:last-child {margin-bottom: 0;}


.site-button {display: flex; flex-direction: column; align-items: center;}
.site-button textarea {font-family: monospace; font-size: 0.7em;}

footer {grid-area: footer; border: var(--border); border-radius: var(--round-borders); overflow: hidden; font-size: 0.75em; padding: 15px; background: var(--content-background-color); display: flex; justify-content: center;}
footer a, footer a:visited {color: var(--link-color);}
footer a:hover, footer a:focus {color: var(--link-color-hover);}

nav {margin-bottom: 3em;}
nav .sidebar-title {margin-bottom: 0.5em;}
nav ul {margin: 0 -5px; padding: 0; list-style: none; user-select: none;}
nav ul li {margin-bottom: 0;}
nav > ul li > a, nav > ul li > strong {display: inline-block;}
nav > ul li > a, nav > ul li > details summary, nav > ul li > strong {padding: 5px 10px;}
nav > ul li > a.active, nav > ul li > details.active summary {font-weight: bold;}
nav ul summary {cursor: pointer;}
nav ul ul li > a {padding-left: 30px;}

header nav {margin-bottom: 0;}
header nav ul {display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0;}
header nav ul li {position: relative;}
header nav ul li:first-child > a {padding-left: 0;}
header nav ul li:last-child > a {padding-right: 0;}
header nav ul ul {background: var(--content-background-color); display: none; position: absolute; top: 100%; left: 10px;padding: 0.5em; z-index: 1; border: var(--border); min-width: 100%; box-shadow: 0px 1px 5px rgba(0,0,0,0.2);}
header nav ul li:hover ul, header nav ul li:focus-within ul {display: block;}
header nav ul li strong {color: var(--link-color); text-decoration: none; font-weight: normal;}
header nav ul ul li a {display: block; padding-left: 0; padding-right: 0;}

main {line-height: 1.5;}
main a, main a:visited {color: var(--link-color);}
main a:hover, main a:focus {color: var(--link-color-hover);text-decoration-style: none;}
main p, main .image, main .full-width-image, main .two-columns {margin: 0.75em 0;}
main ol, main ul {margin: 0.5em 0; padding-left: 1.5em;}
main ol li, main ul li {margin-bottom: 0.2em; line-height: 1.3;}
main ol {padding-left: 2em;}
main blockquote {background: rgba(0, 0, 0, 0.1); padding: 15px; margin: 1em 0; border-radius: 10px;}
main pre {margin: 1em 0 1.5em;}
main code {text-transform: none;}
main center {margin: 1em 0;padding: 0 1em;}
main hr {border: 0;border-top: var(--border); margin: 1.5em 0;}
main h1, main h2, main h3, main h4, main h5, main h6 {font-family: var(--heading-font); margin-bottom: 0; line-height: 1.5;}
main h1:first-child, main h2:first-child, main h3:first-child, main h4:first-child, main h5:first-child, main h6:first-child {margin-top: 0;}
main h1 {font-size: 1.7em;}
main h2 {font-size: 1.6em;}
main h3 {font-size: 1.5em;}
main h4 {font-size: 1.4em;}
main h5 {font-size: 1.3em;}
main h6 {font-size: 1.2em;}

.two-columns {display: flex;}
.two-columns > * {flex: 1 1 0;margin: 0;}
.two-columns > *:first-child {padding-right: 0.75em;}
.two-columns > *:last-child { padding-left: 0.75em;}

.image {display: block; width: auto; height: auto; max-width: 100%;}
.full-width-image {display: block; width: 100%; height: auto;}
.images {display: flex; width: calc(100% + 5px + 5px); margin-left: -5px; margin-right: -5px;}
.images img {width: 100%; height: auto; padding: 5px; margin: 0; overflow: hidden;}

#skip-to-content-link {position: fixed; top: 0; left: 0; display: inline-block; padding: 0.375rem 0.75rem; line-height: 1; font-size: 1.25rem; background-color: var(--content-background-color); color: var(--text-color); transform: translateY(-3rem); transition: transform 0.1s ease-in;z-index: 99999999999;}
#skip-to-content-link:focus,#skip-to-content-link:focus-within {transform: translateY(0);}

@media (max-width: 800px) {body {font-size: 14px;}

  .layout {width: 100%;grid-template: "header" auto  "main" auto "footer" auto / 1fr;}
  .left-sidebar {display: none;}
  .right-sidebar {display: none;}

  aside {border-bottom: 1px solid;padding: 9px;font-size: 0.9em;}

  nav {padding: 0;}
  nav > ul {padding-top: 0.5em;}
  nav > ul li > a, nav > ul li > details summary, nav > ul li > strong {padding: 0.5em;}

  main {max-height: none;padding: 15px;}

  .images {flex-wrap: wrap;}
  .images img {width: 100%;}

  #skip-to-content-link {font-size: 1rem;}}
.titlehovering:hover {font-family: "Rascal"; font-size: 185%; color:#ffffff}
.centerthis {text-align: center};

.scroll-box {width: 100%; height: 100px; border: 1px dotted #ccc; padding: 10px; overflow: auto;}