@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Josefin+Slab:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
/* Default colors */
:root {
	--color:white;
	--background:rgba(42,40,89,0.95);

	--bordercolor1: #fff;
	--bordercolor2: #000;
	
	--link:#7fffd4;
	--linkhover:#3ed4a2;
	
	--formbg:rgba(45, 31, 48, 1);
	
	--accentbg:rgba(62,40,89,1);
}

/* Alternate colors */
/* Replace "dark" with "light" and add your light mode colors here if you want your site to be in dark mode by default */
@media (prefers-color-scheme: light) {
	:root {
		--color:rgba(42,40,89,1);
		--background:rgba(226, 225, 255, 0.95);
	
		--bordercolor1: #000;
		--bordercolor2: #000;
		
		--link:#306050;
		--linkhover:#0f3c2d;
		
		--formbg:rgb(216, 199, 237);
			
		--accentbg:rgb(226, 198, 232);
	}
}

* {
    box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--link) #24404E;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #24404E;
}

*::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: var(--link);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #46e4ef;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #46e4ef;
}
  
  body {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/68541828_zfQnIZbj2zyUm5i.png);
    background-attachment: fixed;
    color: var(--color);
    font-size: 1.125em;
    font-weight: 400;
    overflow-wrap: break-word;
  }
  
  /* Style the header */
  header {
    background-color:var(--background);
    padding: 5px;
    text-align: center;
    font-size: 2em;
    border-style: dashed;
    border-width: 4px 4px 0 4px;
    border-color: var(--bordercolor2);
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
  }

  h1 {
    margin:10px auto;
  }

  h2, h3, h4, h5, h6 {
    font-family: 'Josefin Slab', serif;
    font-weight: 600;
  }
  
  /* Create three unequal columns that floats next to each other */
  .column {
    float: left;
    padding: 0.25em 1em;
    background-color: var(--background);
    height:450px;
    overflow:auto;
  }
  
  /* Left and right column */
  aside.column {
    width: 30%;
    border-style: dotted dashed dotted dotted;
    border-width: 2px 4px 2px 2px;
    border-color: var(--bordercolor1) var(--bordercolor2) var(--bordercolor1) var(--bordercolor1);
  }
  
  /* Middle column */
  main.column {
    width: 70%;
    border-style: dotted dashed;
    border-width: 2px 0 2px 4px;
    border-color: var(--bordercolor1) var(--bordercolor2) var(--bordercolor1) var(--bordercolor2);
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Style the footer */
  footer {
    background-color:var(--background);
    padding: 5px;
    text-align: center;
    border-style: dashed;
    border-width: 0 4px 4px 4px;
    border-color: var(--bordercolor2);
  }
  
  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media (max-width: 665px) {
    aside.column, main.column {
      width: 100%;
      height: fit-content;
    }
    main.column {
        border-style: dashed;
        border-width: 0 4px;
    }
  }

  input, textarea, select, button { 
    background: var(--formbg);  
    color: var(--color);
    font: 1.1rem sans-serif; 
    border: 1px solid var(--color); 
    padding: 5px; 
    margin: 5px;
    border-radius:5px;
  }
  
  textarea {
    width:90%;
  }
  
  input[type="submit"], input[type="reset"] {
    font-size:1.2rem;
    background:var(--accentbg);
  }
  
  input[type="submit"]:hover, input[type="reset"]:hover {
    background:var(--color);
    cursor:pointer;
  }

a { 
    transition: .2s ease;
    color: var(--link);
} 
a:hover, a:focus { 
    transform: translateY(-10%);
    color: var(--linkhover);
}

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav li::marker {
  content: none;
}

.nav li a {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-decoration: none;
    color:var(--color);
    text-align: center;
    background-color: var(--accentbg);
    border: 2px solid;
    border-image:linear-gradient(#f34e70, #efde68, #7ee380, #0fdb9e, #467c98, #5c4186) 1;
    margin: 20px auto;
}

.nav li a:hover, .nav li a:focus {
    background-color: var(--formbg);
}

li::marker {
  content: "\270E\2000";
}

details > summary {
  cursor: pointer;
  transition: .2s ease;
}

details > summary:hover {
  color: var(--link);
}

img {
  margin: 5px;
  max-height:200px;
}