/* FONT IMPORT */
@import url('https://fonts.google.com/share?selection.family=Nunito:ital,wght@0,200..1000;1,200..1000');


/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
 /* Background Colors: */
 --fave-bright: #f8f8f8;
 --fave-white: #d5d5d5;
 --fave-pink: #d1195b;
 --fave-black: #201f27;
 --fave-light-black: #16151d;
 --background-color: var(--fave-black);
 --content-background-color: var(--fave-white);
 --sidebar-background-color: var(--fave-white);

 /* Images: */
 --hand-rest: url('/output-1.png') 28 8;
 --hand-point: url('/output-0.png') 28 8;
 --hand-hover: url('/output-2.png') 38 8;
 --hand-grab: url('/output-11.png') 22 32;
 --bg-image: url("https://sketchyrae.neocities.org/bg_text.png");

 /* Text Colors: */
 --text-color: var(--fave-light-black);
 --sidebar-text-color: var(--fave-light-black);
 --link-color: var(--fave-pink);
 --link-color-hover: var(--fave-pink);

 /* Text: */
 --h1: 1.5em;
 --h2: 1.4em;
 --h3: 1.3em;
 --h4: 1.2em;
 --h5: 1.1em;
 --h6: 1em;
 --h7: 0.8em;
 --font: 'Nunito', sans-serif;
 --heading-font: 'Nunito', sans-serif;
 --font-size: 14px;
 --btn-size: 25px;

 /* Other Settings: */
 --margin: 10px;
 --margin-mobile: 5px;
 --padding: 20px;
 --padding-mobile: 8px;
 --border: 3px;
 --lradius: 15px;
 --mradius: 10px;
 --sradius: 5px;
 --sidebar-width: 225px;
 --max-width: 1000px;
 --main-width: calc(var(--max-width) - var(--sidebar-width) - var(--margin));
 --sidecontainer: calc(var(--sidebar-width) - var(--padding));
 --total-margin: calc(var(--margin) + var(--sidebar-width) + var(--padding))
}

/* -------------------------------------------------------- */
/* CURSOR STUFF */
/* -------------------------------------------------------- */

/* Scrollbar styles */
::-webkit-scrollbar {
 cursor: var(--hand-rest), auto;
 height: 12px
}

::-webkit-scrollbar-track {
 border: 1px var(--fave-pink);
 border-radius: 10px
}

::-webkit-scrollbar-corner {
 background: rgba(0,0,0,0)
}

::-webkit-scrollbar-thumb {
 cursor: var(--hand-hover), grab;
 background: var(--fave-pink);
 border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
 cursor: var(--hand-hover), grab; /* fallback if grab cursor is unsupported */
 background: var(--accentcolor)
}

::-webkit-scrollbar-thumb:active {
 cursor: var(--hand-grab), grabbing;
 background: var(--accentcolor)
}

* {
 cursor: var(--hand-rest), auto;
 box-sizing: border-box
}

a:hover{ cursor: var(--hand-point), pointer }

a:active{ cursor: var(--hand-grab), grabbing }

.auto { cursor: var(--hand-rest), auto }

/* -------------------------------------------------------- */
/* BUTTONS */
/* -------------------------------------------------------- */

.buttoncontainer {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-evenly;
 align-items: center;
 align-content: center;
 gap: 5px;
 margin: 25px 50px 0 !important
 }

.buttoncontainer > p {
 align:center
 }

.button{
 background-color: var(--fave-pink);
 border-radius: var(--lradius);
 padding: var(--padding-mobile);
 font-size: var(--h4);
 align-items: center;
 outline: none;
 flex-grow: 5;
 flex-shrink: 0 }

.button.a { flex-basis: 100%; align-self: auto }

.button.b {
 color: var(--fave-light-black) !important;
 background-color: var(--fave-white);
 flex-basis: 100%; align-self: auto }

.button.c { flex-basis: auto; align-self: stretch }

.button:hover, .button.a:hover, .button.b:hover, .button.c:hover {
 cursor: var(--hand-point), pointer;
 color: var(--fave-white) !important;
 background-color: var(--fave-light-black) !important;
 text-decoration: none }

/* -------------------------------------------------------- */

.i > bi:hover{
 cursor: var(--hand-point)
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
 cursor: var(--hand-point);
 text-size:50px;
 display: inline-block;
 font-family: bootstrap-icons !important;
 font-style: normal;
 font-size: var(--btn-size);
 font-weight: 400 !important;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 vertical-align: text-bottom;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: #808080scale
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

#strwbrry-tr {
 min-width:25px;
 max-width: 20%;
 display: block;
 position: absolute;
 top: 158px;
 z-index: 100
}

body {
 opacity: 1;
 transition: 1s opacity;
 display: flex;
 min-height: 100vh;
 font-size: var(--font-size);
 color: var(--text-color);
 font-family: var(--font);
 line-height: 1.2;
 background-color: var(--background-color);
 background-image: var(--bg-image);
 background-attachment: fixed
}

body.fade-out {
 opacity: 0;
 transition: none
}

.block {
 font-size: var(--font-size) !important;
 display: block;
 color: var(--fave-bright);
 background-color: var(--fave-pink);
 font-weight: 700;
 padding: var(--padding);
 border-radius:7% 95% 6% 95%/95% 4% 92% 5%;
 border-width: 3px 4px 3px 5px;
	border-style: solid;
	border-color: var(--fave-light-black);
 margin: 1em 0;
 overflow: hidden
}



.block::selection,
.sidebar-section > .block > p::selection,
.sidebar-section > .block > h1::selection,
.sidebar-section > .block > h2::selection,
.sidebar-section > .block > h3::selection,
.sidebar-section > .block > h4::selection,
block.w > p::selection {
 /* (Text highlighted by the user) */
 background: var(--fave-light-black);
 color: var(--fave-bright)
}

.block.w {
 color: var(--fave-light-black);
 background-color: var(--fave-bright);
 border-width: 3px 3px 5px 5px;
 border-radius:4% 95% 6% 95%/95% 4% 92%
}

.block.b {
 max-height: 114px;
 min-height: 60px;
 overflow-y: scroll;
 overflow-x: hidden;
 border-width: 5px 3px 3px 5px;
 border-radius:95% 4% 97% 5%/4% 94% 3%
	border-color: var(--fave-pink);
 background-image: var(--bg-image)
}

.block.b::selection {
 /* (Text highlighted by the user) */
 background: var(--fave-pink);
 color: var(--fave-bright)
}

.myBox {
border: none;
padding: var(--padding);
width:100%;
 max-height: 114px;
 min-height: 60px;
 background: transparent;
 border-radius: var(--mradius);
 border: var(--border) dashed var(--fave-pink);
 box-sizing: border-box;
 background-clip: padding-box;
 overflow-y: scroll;
 overflow-x: hidden
}

::selection {
 /* (Text highlighted by the user) */
 background: var(--fave-pink);
 color: var(--fave-bright)
}

 main ul li::marker,.right-sidebar > .sidebar-section > ul > li::marker {
 color:var(--fave-pink);
 background: transparent;
 content: "❥ "
}

mark {
 /* Text highlighted by using the <mark> element */
 text-shadow: 1px 1px 4px var(--link-color);
 background-color: inherit;
 color: var(--text-color)
}

/* Links: */
a {
 text-decoration-style: dotted
}

a,
a:visited {
 color: var(--link-color)
}

a:hover,
a:focus {
 color: var(--link-color-hover);
 text-decoration: underline
}

p {
 text-indent:15px
}

/* -------------------------------------------------------- */
/* NAV DROPDOWN */
/* -------------------------------------------------------- */

#navig select {
 cursor: var(--hand-hover), grab;
 border-radius: var(--mradius) !important;
 border: none;
	 padding: var(padding);
 margin: var(--margin) 0px var(--margin);
 padding: 5px 0px 5px;
 border-width: 3px;
 border-style: dashed;
 border-color: var(--fave-light-black);
 width:100%;
 background-color: var(--fave-bright);
 color: var(--fave-light-black);
 font-weight: 700;
 -webkit-appearance: bold;
 text-align:center;
 font-size: var(--h7);
 display: block;
 margin-left: auto;
 margin-right: auto
}

 #navig select:active {
 cursor: var(--hand-hover), hover;
 border-radius: var(--mradius) var(--mradius) 0px 0px
}

#navig select:hover {
 cursor: var(--hand-point), pointer
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
 max-width: var(--max-width) !important;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: auto;
 grid-gap: var(--margin);
 grid-template: "leftSidebar header header" "leftSidebar main rightSidebar" "leftSidebar footer footer";
 /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

.header { grid-area: header;
height:225px;
 position:relative;
 font-size: var(--h4);
 border: var(--border);
 background: var(--content-background-color)
}

.header-content {
 padding: var(--padding)
}

.header-title {
 font-family: var(--heading-font);
 font-size: var(--h1);
 font-weight: 700;
 position: baseline;
 padding: var(--padding)
}

.header-image img {
 object-fit: cover;
 object-position: bottom;
 overflow:hidden;
 height: 100%;
 width: 100%
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside { grid-area: aside;
 border: var(--border);
 min-width:200px;
 max-width: var(--sidebar-width);
 overflow: hidden;
 background: var(--sidebar-background-color);
 padding: var(--padding);
 color: var(--sidebar-text-color)
}

.left-sidebar { grid-area: leftSidebar;
 top: 25%;
 height:100%;
 position:sticky;
 box-sizing: border-box;
 display: block;
 color: var(--fave-white);
 background: var(--fave-pink);
 scrollbar-color: var(--fave-white) var(--fave-pink)
}

.left-sidebar > .sidebar-section {
 top: 0px;
 margin-left:-20px;
 display: inline-block;
 position: fixed;
 padding: var(--padding);
 max-width: var(--sidecontainer);
 position:fixed;
 color: var(--fave-white);
 font-weight: 700;
 font-family: var(--heading-font)
}

.left-sidebar > .sidebar-section > .sidebar-title {
 color: var(--fave-bright);
 font-weight: 700;
 font-size: 1.2em;
 font-family: var(--heading-font)
}

.right-sidebar { grid-area: rightSidebar;
 position:sticky}

.sidebar-title {
 color: var(--fave-pink);
 font-weight: 700;
 font-size: 1.2em;
 font-family: var(--heading-font)
}

.sidebar-section:not(:last-child) {
 margin-bottom: 3em
}

.sidebar-section ul,
.sidebar-section ol {
 padding-left: 1.5em
}

/* Site Button: */

.site-button {
 display: flex;
 flex-direction: column;
 align-items: center
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

.footer { grid-area: footer;
 position:relative !important;
 border: var(--border);
 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)
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

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 {
 cursor: var(--hand-point);
 font-weight: 700
}

nav ul summary {
 cursor: pointer
}

nav ul ul li > a {
 cursor: var(--hand-point);
 padding-left: 30px
}

/* NAVIGATION IN HEADER */

.header nav {
 margin-bottom: 0
}

.header nav ul {
 display: flex;
 flex-wrap: wrap;
 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
}

/* Subnavigation (Drop-Down): */

.header nav ul ul {
 cursor: var(--hand-point);
 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 {
 cursor: var(--hand-point);
 display: block
}

.header nav ul li strong {
 color: var(--link-color);
 text-decoration: underline;
 font-weight: 400
}

.header nav ul ul li a {
 display: block;
 padding-left: 0;
 padding-right: 0
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main { grid-area: main;
 display:flex;
 max-width:700px;
 position:relative;
 line-height: 1.5;
 min-height:700px;
 padding: var(--padding);
 background: var(--content-background-color);
 border: var(--border)
}

main a,
main a:visited {
 color: var(--link-color)
}

main a:hover,
main a:focus {
 color: var(--link-color-hover);
 text-decoration-style: wavy
}

main p,
main .image,
main .full-width-image,

main .two-columns {
 margin: 0.75em 0
}

main ol {
  padding-left: 2em}

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 pre {
 margin: 1em 0 1.5em
}

main code {
 text-transform: none
}

main center {
 margin: 1em 0;
 padding: 0 1em
}

main hr {
 border: none;
 margin-top: 15px;
 border-top: 2px dashed var(--fave-pink);
 color: var(--fave-pink);
 overflow: visible;
 text-align: center;
 height: 5px
}

main hr::after {
 background: var(--fave-white);
 content: "♡";
 padding: 0 5px;
 position: relative;
 top: -10px
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
 color: var(--fave-pink);
 font-weight: 700;
 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: (--h1);
 display: block;
 color: var(--fave-bright);
 background-color: var(--fave-pink);
 font-weight: 700;
 padding: 0px 5px;
 border-radius:95% 40% 97% 50%/40% 94% 3% 32%;
 border-width: 3px 4px 3px 5px;
	border-style: solid;
	border-color: var(--fave-light-black);
 margin: 1em 0;
 overflow: hidden
}

main h1::selection {
 background: var(--fave-light-black)
}

main h2 {
 font-size: 1.4em
}

main h3 {
 font-size: 1.3em
}

main h4 {
 font-size: 1.2em
}

main h5 {
 font-size: 1.1em
}

main h6 {
 font-size: 1em
}

/* -------------------------------------------------------- */
/* sticky NOTE */
/* -------------------------------------------------------- */

/*
.stckynt {
z-index: 1;
position:fixed;
text-align: center;
right:1.5rem;
top:1rem;
max-width:250px;
background: var(--fave-white);
color:#000000;
padding:var(--padding-mobile);
border: var(--border);
border-style:dashed;
border-radius: var(--mradius);
border-color: var(--fave-pink)
}

.stckynt h3 {
 z-index: 1;
 text-align:center;
 font-weight:700;
 font-size:1.1em;
 margin-bottom:12px;
 text-shadow:1px 1px 2px var(--fave-pink)

}
*/

/* -------------------------------------------------------- */
/* STYLE THE TAB */
/* -------------------------------------------------------- */

.tab {
 overflow: visible;
 border-bottom: 3px dashed var(--fave-light-black)
}

/* Style the buttons inside the tab */
.tab button {
 float: none;
 cursor: pointer;
 font-weight:700;
 font-size:var(--h3);
 color: var(--fave-light-black);
 background-color: var(--fave-white);
 border-radius: 15px 15px 0px 0px;
 margin-bottom: -3px;
 padding: 6px 12px 2px
}

/* Change background color of buttons on hover */
.tab button:hover {
 color: var(--fave-bright);
 background-color: var(--fave-pink);
 cursor: var(--hand-point), pointer
}

/* Create an active/current tablink class */
.tab button.active {
 border-bottom: 3px dashed var(--fave-light-black);
 background-color: var(--fave-pink)
}

/* Style the tab content */
.tabcontent {
 display: none;
 padding: 6px 12px
}

/* -------------------------------------------------------- */
/* TABLES: */
/* -------------------------------------------------------- */

div.pinkTable {
  border: 3px solid var(--fave-light-black);
  background-color: var(--fave-white);
  width: 100%;
  height: 200%;
  text-align: left;
  border-collapse: collapse;
}
.divTable.pinkTable .divTableCell, .divTable.pinkTable .divTableHead {
  padding: 4px 4px;
}
.divTable.pinkTable .divTableHeading {
  background: var(--fave-light-black);
}
.divTable.pinkTable .divTableHeading .divTableHead {
  font-weight: bold;
  color: #F0F0F0;
  text-align: center;
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group; border: 1px solid var(--fave-light-black);}
 
/* Mini Buttons */

.minibutton {
  cursor: var(--hand-point), pointer;
  color: var(--fave-white);
  background-color: var(--fave-pink);
  right: 0px;
  border-radius: 25px;
  outline: none;
  padding: 5px 20px;
  min-width: 16px;
}

/* -------------------------------------------------------- */
/* COLUMNS: */
/* -------------------------------------------------------- */

.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
}

/* -------------------------------------------------------- */
/* COMMISSION: */
/* -------------------------------------------------------- */

.commishtype {
 display: flex
}

.commishtype > * {
 flex: 1 1 0;
 margin: 0
}

.commishtype > *:first-child {
 padding-right: 0.75em
}

.commishtype > *:last-child {
 padding-left: 0.75em
}

main .imgcontainer {
 width: 200px;
 height: 150px;
 padding: 10px
}

main .imgcontainer img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: top
}

/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */

.image {
 display: block;
 width: auto;
 height: auto;
 max-width: 100%
}

.full-width-image {
 display: block;
 width: 100%;
 height: auto
}

.type-image {
 display: block;
 width: 100%;
 height: 300px;
}

.type-image:hover {
 overflow: none;
 display: block;
 float:center;
 width: 250px;
 
}

.divTableCell img {
 object-fit: cover;
 object-position: bottom;
 height: 300px;
}

.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
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#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)
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
 max-width: 1000px !important;
 display: grid;
 grid-template-columns: 1fr ;
 grid-template-rows: auto;
 grid-gap: var(--margin);
 grid-template: "leftSidebar header header" "leftSidebar main rightSidebar" "leftSidebar footer footer";
 /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

/* CSS Code for devices < 1000px */
@media (max-width: 1050px) {
 .tab {
 width:90%;
 display:block;
 zoom: 80%;
 }
}

/* CSS Code for devices < 800px */
@media (max-width: 850px) {
 .tab {
 display:block;
 }
}

/* CSS Code for devices < 800px */
@media (max-width: 800px) {

 .layout {
 grid-gap: var(--margin-mobile);
 grid-template-columns: 1fr;
 grid-template: "header" "main" "rightSidebar" "leftsidebar" "footer";
 }

 .left-sidebar{
 position:absolute
 }

 .right-sidebar{
 position:absolute
 }

 header {
 z-index: 1;
 top:0px;
 left:0px;
 position:fixed;
 scrollbar-color: var(--fave-white) var(--fave-pink)
 }

 .header-title {
 padding: var(--padding-mobile)
}

 header-image img {
 background-position: center;
 object-fit: cover
}

 .header-content {
 padding:0px
}

 ul, ol, li {
 padding-left: var(--padding) !important
 }

 aside {
 border-bottom: 1px solid;
 padding: var(--padding-mobile);
 font-size: 0.9em
 }


 nav {
 padding: var(--padding-mobile)
 }

 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;
 overflow: hidden;
 padding: var(--padding-mobile);
 margin-top: 250px !important
 }

 .images {
 flex-wrap: wrap
 }

 .images img {
 width: 100%
 }

 #skip-to-content-link {
 font-size: 1rem
 }
}