html {
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 4rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-bottom: clamp(.5rem, 1rem + 1vw, 1.5rem);
  text-align: center;
  font-weight: 800;
  
  color: yellow;
  color: rgba(50, 150, 255, 1);
  text-shadow: 5px 5px red;
  
  padding: 0 min(2rem, 4%) 0 min(2rem, 4%);
}

h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.5vw, 3rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-bottom: clamp(.5rem, 1rem + 1vw, 1.5rem);
  text-align: left;
  color: purple;
  color: rgba(51, 0, 51, .9);
  text-shadow: 3px 3px rgba(50, 150, 255, .7);
  font-weight: 700;
  
  padding: 0 min(2rem, 4%) 0 min(2rem, 4%);
}

h3 {
  font-size: clamp(1rem, 1rem + 1vw, 2rem);
  /*margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);*/
  margin-bottom: clamp(.5rem, 1rem + 1vw, 1.5rem);
  text-align: left;
  color: purple;
  font-weight: 650;
  
  padding: 0 min(2rem, 4%) 0 min(2rem, 4%);
}

h4 {
  font-size: clamp(1rem, .75rem + .75vw, 1.5rem);
  /*margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);*/
  margin-bottom: clamp(.5rem, 1rem + 1vw, 1.5rem);
  text-align: left;
  color: gray;
  font-weight: 650;
  
  padding: 0 min(2rem, 4%) 0 min(2rem, 4%);
}

p {
  font-size: clamp(1rem, .875rem + .5vw, 1.125rem);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  text-align: left;
  max-width: min(70ch, 100%);
  color: lightgray;
  font-weight: 400;
  
  padding: 0 min(2rem, 4%) 0 min(2rem, 4%);
}

ul {
  font-size: clamp(1rem, .875rem + .5vw, 1.125rem);
  text-align: left;
  line-height: 1.6rem;
  
  color: white;
  
  /*list-style: none;*/
}

body {
  background-color: #13001C;
  background-image: url("paintspacebackground.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  
  min-height: 100vh;
  min-height: 100dvh;
  
  display: grid;
  grid-template-columns: .9fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
  "header header"
  "nav nav"
  "container container"
  "footer footer";
 /* justify-content: center;
  align-content: center;*/
  justify-items: center;

  
  /*text-align: center;*/
}

/*good*/
header {
  grid-area: header;
}

header img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 6 / 1;
}
/**/

nav {
  grid-area: nav;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  
  
  width: min(85%, 120rem);
  margin-bottom: 1rem;
  font-size: clamp(.75rem, .9vw + .5rem, 2rem);
}

nav a {
  background-color: black;
  background-color: rgba(0, 0, 0, .8);
  width: min(18%, 24rem);
  
  color: yellow;
  text-decoration: none;
  text-align: center;
  
  border-color: yellow;
  border-width: calc(.2vw + .1rem);
  border-style: outset;

}

.container {
  grid-area: container;
  
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  
  align-items: space-between;       /*good*/
  justify-content: space-between;
  /*align-content: center;*/
  

  
  border-color: yellow;
  border-width: calc(.1vw + .1rem);
  border-style: double;
  border-radius: 1vw;

  background-color: black;
  background-color: rgba(0, 0, 0, .7);

  width: min(95%, 130rem);
}

main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  align-items: center;
  /*justify-content: center;*/
  
  /*align-content: center;*/

  
  width: 100%;
}

aside {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  
  justify-content: space-between;
  align-items: center;

  /*align-content: center;*/
  
  border-color: gray;
  border-style: double;
  border-width: calc(.1vw + .1rem);
  border-radius: 1vw;
}

aside img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 1vw;
  padding-top: 1vw;
}

aside p {
  border-color: gray;
  border-style: double;
  border-width: calc(.1vw + .1rem);
  border-radius: 1vw;
}

footer {
  grid-area: footer;
  background-color: black;
  background-color: rgba(0, 0, 0, .8);
  
  text-align: center;
  
  border-color: yellow;
  border-width: calc(.1vw + .1rem);
  border-right-style: double;
  border-left-style: double;
  border-bottom-style: double;
  border-radius: 0px 0px 1vw 1vw;
  
  width: min(90%, 120rem);
}

footer img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 8 / 1;
}

article {
  background-color: blue;
  background-color: rgba(50, 150, 200, .25);
  width: min(100ch, 100%);
  
  text-align: center;
  
  border-radius: 1vw;
  padding: min(1rem, 2%) 0 min(1rem, 2%) 0;
  
  margin-bottom: 2%;
}

article a {
  color: white;
}

code p {
  margin-bottom: 0;
  margin-top: 0;
}

.articleAligner { 
  width: min(85ch, 100%);
  margin-left: auto;
  margin-right: auto;
}

.articleAligner img {
    max-width: min(85ch, 95%);
  height: auto;
  aspect-ratio: 16 / 9;

  border-radius: 1vw;
}


.wizard {  
}

.wizard img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  
  border-radius: 1vw;
}

.wizardadvice {
  visibility: hidden;
  background-color: gray;
  color: white;
  text-align: center;
  position: absolute;
  padding: 1rem;
  border-radius: 1rem;
  transform: rotate(-20deg) translate(-3rem, -3rem);
  z-index: 1;
}

.wizard:hover .wizardadvice {
  visibility: visible;
}
  
.bottom-wizard {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.bottom-wizard img {
  width: 100px;
  height: 100px;
}

.bottom-wizardadvice {
  visibility: hidden;
  background-color: gray;
  color: white;

  position: absolute;
  padding: 1rem;
  border-radius: 1rem;
  transform: rotate(20deg) translate(-15rem, -1rem);
  z-index: 1
}

.bottom-wizard:hover .bottom-wizardadvice {
  visibility: visible;
}



/*/////////////////////////TUTORIALS STUFF/////////////////////////////*/

.tutorialsMain {
  max-height: 100vh;
  max-height: 100dvh;
  overflow: auto;
}

.tutorialsAside {
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 30%;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: auto;
}

.tutorialsAside ul {
  list-style-type: none;
  line-height: 3rem;
  padding-left: 0;
}

.tutorialsAside a {
  text-decoration: none;
}

.tutorialsListContainer {
  width: 100%;
}

.lastNext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  
  width: min(85ch, 100%);
}

.lastNext a {
  font-size: clamp(1rem, .875rem + .5vw, 1.125rem);
  color: lightgray;
  font-weight: 400;
  
  padding: 0 min(2rem, 4%) 0 min(2rem, 4%);
  
  border-color: white;
  border-width: calc(.1vw + .1rem);
  border-style: solid;
  border-radius: 1vw;
  
  text-decoration: none;
}

.lastNext a:hover {
      background-color: blue;
  background-color: rgba(50, 150, 200, 1);
}

#gray {
  background-color: gray;
  background-color: rgba(102, 153, 153, .7);
  color: white;
}

#white {
  background-color: white;
  background-color: rgba(255, 255, 255, .7);
  color: black;
}

#gray:hover {
    background-color: blue;
  background-color: rgba(50, 150, 200, 1);
}

#white:hover {
  background-color: blue;
  background-color: rgba(50, 150, 200, 1);
}

.flexContainer {
  display: flex;
  flex-direction: row;
  align-items: space-between;
  justify-content: space-between;
}

.quarter {
  width: 25%;
}

.third {
  width: 33%;
}

.third ul {
  text-align: center;
  list-style: none;
}

.half {
  width: 50%;
}

.half ul {
  text-align: center;
  list-style: none;
}

.threeQuarters {
  width: 75%;
}

.whole {
  width: 100%;
}