:root {
  /* LIGHT WHITE THEME   */
  --light-white-bg: #e7f1fa;
  --light-white-text-color: #282828;
  --light-white-boxshadow-up: #cedae4;
  --light-white-boxshadow-down: #feffff;
  --light-white-focus-up: #d0d9e1;
  --light-white-focus-down: #feffff;
  --light-white-hover-up: #e7f1fa;
  --light-white-hover-down: #f7ffff;

  /* LIGHT CREAM THEME  */
  --light-cream-bg: #f69783;
  --light-cream-text-color: #353030;
  --light-cream-boxshadow-up: #d1806f;
  --light-cream-boxshadow-down: #ffae97;
  --light-cream-focus-up: #d1806f;
  --light-cream-focus-down: #ffae97;
  --light-cream-hover-up: #dd8876;
  --light-cream-hover-down: #ffa28c;

  /* LIGHT BLUE THEME  */
  --light-blue-bg: #69b3f1;
  --light-blue-text-color: #232329;
  --light-blue-boxshadow-up: #5795c8;
  --light-blue-boxshadow-down: #7bd1ff;
  --light-blue-focus-up: #5795c8;
  --light-blue-focus-down: #7bd1ff;
  --light-blue-hover-up: #5fa1d9;
  --light-blue-hover-down: #70c0ff;

  /* LIGHT ORANGE THEME  */
  --light-orange-bg: #ff8c67;
  --light-orange-text-color: #353535;
  --light-orange-boxshadow-up: #d47455;
  --light-orange-boxshadow-down: #ffa479;
  --light-orange-focus-up: #d47455;
  --light-orange-focus-down: #ffa479;
  --light-orange-hover-up: #e67e5d;
  --light-orange-hover-down: #ff966e;

  /* LIGHT YELLOW THEME  */
  --light-yellow-bg: #f9c87b;
  --light-yellow-text-color: #181b29;
  --light-yellow-boxshadow-up: #cfa666;
  --light-yellow-boxshadow-down: #ffea90;
  --light-yellow-focus-up: #cfa666;
  --light-yellow-focus-down: #ffea90;
  --light-yellow-hover-up: #e0b46f;
  --light-yellow-hover-down: #ffd684;

  /* LIGHT GREEN THEME  */
  --light-green-bg: #47b388;
  --light-green-text-color: #211d2c;
  --light-green-boxshadow-up: #3b9571;
  --light-green-boxshadow-down: #53d19f;
  --light-green-focus-up: #3b9571;
  --light-green-focus-down: #53d19f;
  --light-green-hover-up: #40a17a;
  --light-green-hover-down: #4cc092;

  /* LIGHT PURPLE THEME  */
  --light-purple-bg: #af7bea;
  --light-purple-text-color: #1d1a29;
  --light-purple-boxshadow-up: #9166c2;
  --light-purple-boxshadow-down: #cd90ff;
  --light-purple-focus-up: #9166c2;
  --light-purple-focus-down: #cd90ff;
  --light-purple-hover-up: #9e6fd3;
  --light-purple-hover-down: #bb84fa;

  /* LIGHT PINK THEME  */
  --light-pink-bg: #ff84b5;
  --light-pink-text-color: #282828;
  --light-pink-boxshadow-up: #d46e96;
  --light-pink-boxshadow-down: #ff9ad4;
  --light-pink-focus-up: #d46e96;
  --light-pink-focus-down: #ff9ad4;
  --light-pink-hover-up: #e677a3;
  --light-pink-hover-down: #ff8dc2;

  /* DARK BLACK THEME */
  --dark-black-bg: #141414;
  --dark-black-text-color: #afafaf;
  --dark-black-boxshadow-up: #080808;
  --dark-black-boxshadow-down: #202020;
  --dark-black-focus-up: #080808;
  --dark-black-focus-down: #202020;
  --dark-black-hover-up: #121212;
  --dark-black-hover-down: #151515;

  /* DARK BLUE THEME */
  --dark-blue-bg: #2b2f35;
  --dark-blue-text-color: #afafaf;
  --dark-blue-boxshadow-up: #111315;
  --dark-blue-boxshadow-down: #454b55;
  --dark-blue-focus-up: #111315;
  --dark-blue-focus-down: #454b55;
  --dark-blue-hover-up: #272a30;
  --dark-blue-hover-down: #2e3239;

  /* DARK PURPLE THEME */
  --dark-purple-bg: #46424d;
  --dark-purple-text-color: #c3bb44;
  --dark-purple-boxshadow-up: #1c1a1f;
  --dark-purple-boxshadow-down: #706a7b;
  --dark-purple-focus-up: #1c1a1f;
  --dark-purple-focus-down: #706a7b;
  --dark-purple-hover-up: #3f3b45;
  --dark-purple-hover-down: #4b4752;

  /* DARK GREEN THEME */
  --dark-green-bg: #282a37;
  --dark-green-text-color: #0ea789;
  --dark-green-boxshadow-up: #181920;
  --dark-green-boxshadow-down: #383b4e;
  --dark-green-focus-up: #181920;
  --dark-green-focus-down: #383b4e;
  --dark-green-hover-up: #242632;
  --dark-green-hover-down: #2b2d3b;

  /* DARK GREENISH THEME */
  --dark-green2-bg: #00746b;
  --dark-green2-text-color: #dbfff8;
  --dark-green2-boxshadow-up: #00615a;
  --dark-green2-boxshadow-down: #00877c;
  --dark-green2-focus-up: #00615a;
  --dark-green2-focus-down: #00877c;
  --dark-green2-hover-up: #006860;
  --dark-green2-hover-down: #007c72;

  /* DARK RED THEME */
  --dark-red-bg: #6b0a24;
  --dark-red-text-color: #e4d4d4;
  --dark-red-boxshadow-up: #5a081e;
  --dark-red-boxshadow-down: #7c0c2a;
  --dark-red-focus-up: #5a081e;
  --dark-red-focus-down: #7c0c2a;
  --dark-red-hover-up: #600920;
  --dark-red-hover-down: #720b27;
}


.light-white {
  --cursor: url("../icons/cursor.svg");	
  --background: var(--light-white-bg);
  --text-color: var(--light-white-text-color);
  --boxshadow-up: var(--light-white-boxshadow-up);
  --boxshadow-down: var(--light-white-boxshadow-down);
  --focus-up: var(--light-white-focus-up);
  --focus-down: var(--light-white-focus-down);
  --hover-up: var(--light-white-hover-up);
  --hover-down: var(--light-white-hover-down);
}
.light-cream {
  --cursor: url('../icons/cursor2.svg');	
  --background: var(--light-cream-bg);
  --text-color: var(--light-cream-text-color);
  --boxshadow-up: var(--light-cream-boxshadow-up);
  --boxshadow-down: var(--light-cream-boxshadow-down);
  --focus-up: var(--light-cream-focus-up);
  --focus-down: var(--light-cream-focus-down);
  --hover-up: var(--light-cream-hover-up);
  --hover-down: var(--light-cream-hover-down);
}
.light-blue {
  --cursor: url('../icons/mouse-black.png');	
  --background: var(--light-blue-bg);
  --text-color: var(--light-blue-text-color);
  --boxshadow-up: var(--light-blue-boxshadow-up);
  --boxshadow-down: var(--light-blue-boxshadow-down);
  --focus-up: var(--light-blue-focus-up);
  --focus-down: var(--light-blue-focus-down);
  --hover-up: var(--light-blue-hover-up);
  --hover-down: var(--light-blue-hover-down);
}
.light-orange {
  --cursor: url('../icons/mouse-black.png');	
  --background: var(--light-orange-bg);
  --text-color: var(--light-orange-text-color);
  --boxshadow-up: var(--light-orange-boxshadow-up);
  --boxshadow-down: var(--light-orange-boxshadow-down);
  --focus-up: var(--light-orange-focus-up);
  --focus-down: var(--light-orange-focus-down);
  --hover-up: var(--light-orange-hover-up);
  --hover-down: var(--light-orange-hover-down);
}
.light-yellow {
  --cursor: url('../icons/mouse-black.png');	
  --background: var(--light-yellow-bg);
  --text-color: var(--light-yellow-text-color);
  --boxshadow-up: var(--light-yellow-boxshadow-up);
  --boxshadow-down: var(--light-yellow-boxshadow-down);
  --focus-up: var(--light-yellow-focus-up);
  --focus-down: var(--light-yellow-focus-down);
  --hover-up: var(--light-yellow-hover-up);
  --hover-down: var(--light-yellow-hover-down);
}
.light-green {
  --cursor: url('../icons/mouse-black.png');	
  --background: var(--light-green-bg);
  --text-color: var(--light-green-text-color);
  --boxshadow-up: var(--light-green-boxshadow-up);
  --boxshadow-down: var(--light-green-boxshadow-down);
  --focus-up: var(--light-green-focus-up);
  --focus-down: var(--light-green-focus-down);
  --hover-up: var(--light-green-hover-up);
  --hover-down: var(--light-green-hover-down);
}
.light-purple {
  --cursor: url('../icons/mouse-black.png');	
  --background: var(--light-purple-bg);
  --text-color: var(--light-purple-text-color);
  --boxshadow-up: var(--light-purple-boxshadow-up);
  --boxshadow-down: var(--light-purple-boxshadow-down);
  --focus-up: var(--light-purple-focus-up);
  --focus-down: var(--light-purple-focus-down);
  --hover-up: var(--light-purple-hover-up);
  --hover-down: var(--light-purple-hover-down);
}
.light-pink {
  --cursor: url('../icons/mouse-black.png');	
  --background: var(--light-pink-bg);
  --text-color: var(--light-pink-text-color);
  --boxshadow-up: var(--light-pink-boxshadow-up);
  --boxshadow-down: var(--light-pink-boxshadow-down);
  --focus-up: var(--light-pink-focus-up);
  --focus-down: var(--light-pink-focus-down);
  --hover-up: var(--light-pink-hover-up);
  --hover-down: var(--light-pink-hover-down);
}
.dark-black {
  --cursor: url('../icons/mouse-white.png');	
  --background: var(--dark-black-bg);
  --text-color: var(--dark-black-text-color);
  --boxshadow-up: var(--dark-black-boxshadow-up);
  --boxshadow-down: var(--dark-black-boxshadow-down);
  --focus-up: var(--dark-black-focus-up);
  --focus-down: var(--dark-black-focus-down);
  --hover-up: var(--dark-black-hover-up);
  --hover-down: var(--dark-black-hover-down);
}
.dark-blue {
  --cursor: url('../icons/mouse-white.png');	
  --background: var(--dark-blue-bg);
  --text-color: var(--dark-blue-text-color);
  --boxshadow-up: var(--dark-blue-boxshadow-up);
  --boxshadow-down: var(--dark-blue-boxshadow-down);
  --focus-up: var(--dark-blue-focus-up);
  --focus-down: var(--dark-blue-focus-down);
  --hover-up: var(--dark-blue-hover-up);
  --hover-down: var(--dark-blue-hover-down);
}
.dark-purple {
  --cursor: url('../icons/mouse-white.png');	
  --background: var(--dark-purple-bg);
  --text-color: var(--dark-purple-text-color);
  --boxshadow-up: var(--dark-purple-boxshadow-up);
  --boxshadow-down: var(--dark-purple-boxshadow-down);
  --focus-up: var(--dark-purple-focus-up);
  --focus-down: var(--dark-purple-focus-down);
  --hover-up: var(--dark-purple-hover-up);
  --hover-down: var(--dark-purple-hover-down);
}
.dark-green {
  --cursor: url('../icons/mouse-white.png');	
  --background: var(--dark-green-bg);
  --text-color: var(--dark-green-text-color);
  --boxshadow-up: var(--dark-green-boxshadow-up);
  --boxshadow-down: var(--dark-green-boxshadow-down);
  --focus-up: var(--dark-green-focus-up);
  --focus-down: var(--dark-green-focus-down);
  --hover-up: var(--dark-green-hover-up);
  --hover-down: var(--dark-green-hover-down);
}
.dark-green2 {
  --cursor: url('../icons/mouse-white.png');	
  --background: var(--dark-green2-bg);
  --text-color: var(--dark-green2-text-color);
  --boxshadow-up: var(--dark-green2-boxshadow-up);
  --boxshadow-down: var(--dark-green2-boxshadow-down);
  --focus-up: var(--dark-green2-focus-up);
  --focus-down: var(--dark-green2-focus-down);
  --hover-up: var(--dark-green2-hover-up);
  --hover-down: var(--dark-green2-hover-down);
}
.dark-red {
  --cursor: url('../icons/mouse-white.png');	
  --background: var(--dark-red-bg);
  --text-color: var(--dark-red-text-color);
  --boxshadow-up: var(--dark-red-boxshadow-up);
  --boxshadow-down: var(--dark-red-boxshadow-down);
  --focus-up: var(--dark-red-focus-up);
  --focus-down: var(--dark-red-focus-down);
  --hover-up: var(--dark-red-hover-up);
  --hover-down: var(--dark-red-hover-down);
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;

}

a {
  text-decoration: none;
}

.show {
  display: block;
  transition: all 1s ease-out;
}
.hidden{
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
}
.hide {
  display: none;
  transition: all 1s ease-out;
}

body {
  background-color: var(--background);
  transition: color 0.5s ease-in-out, background 1s ease-in-out;
  cursor: url('../icons/cursor.svg'), auto;
  margin: 0;
}
form{
  
  width: clamp(300px,95%, 700px);
  margin: auto;
  padding: 1rem;
}
label{
  padding: 1rem;
  font-size: 2rem;
  margin: 1rem 0;
  display: block;
}
input {
  width: clamp(200px, 90%, 500px);
  font: small-caps 1.8rem/3rem "Montserrat", sans-serif;
  padding: 1rem;
  margin: 1rem 0;
  background: var(--background);
  border-radius: 1rem;
  color: var(--text-color);
  border: none;
  outline: none;
  -webkit-box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
  box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
}
input:hover {
  background: linear-gradient(145deg, var(--hover-up), var(--hover-down));
}

input:focus {
  background: var(--background);
  -webkit-box-shadow: inset 6px 6px 12px var(--focus-up) inset -6px -6px 12px var(--focus-down);
  box-shadow: inset 6px 6px 12px var(--focus-up), inset -6px -6px 12px var(--focus-down);
}
textarea{
    display: block;
    width: clamp(200px, 90%, 500px);
    height: 200px;
    font: small-caps 1.8rem/3rem "Montserrat", sans-serif;
    padding: 1rem;
    background: var(--background);
    border-radius: 1rem;
    color: var(--text-color);
    border: none;
    outline: none;
    -webkit-box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
    box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
}
textarea:hover {
  background: linear-gradient(145deg, var(--hover-up), var(--hover-down));
}

textarea:focus {
  background: var(--background);
  -webkit-box-shadow: inset 6px 6px 12px var(--focus-up) inset -6px -6px 12px var(--focus-down);
  box-shadow: inset 6px 6px 12px var(--focus-up), inset -6px -6px 12px var(--focus-down);
}

header {
  text-align: center;
}

h1 {
  font-size: clamp(3rem, 15vw, 10rem);
  font-family: "Nanum Brush Script", cursive;
  margin: 0;
  color: var(--text-color);
}

.landing{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap-reverse;
min-height: 100vh;
max-width: 1200px;
margin: auto;
}
.pitch{
  font-family: 'Lato', sans-serif;
  font-size: clamp(3rem, 3vw, 10rem);
}
.landing div:first-of-type{
  text-align: left;
  width: clamp(300px,55%, 500px);
  align-self: center;
}
.landing div:last-of-type{
  width: clamp(300px,40%, 500px);
align-self: center;
}
.landing img{
  width: clamp(100px, 50%,500px);
}
.landing p{
  font-size: clamp(1.6rem,2rem,3rem);
  color: var(--text-color);
}
.pitchbtn{
  font: 3rem/3rem "Nanum Brush Script", cursive;
  position: relative;
  top: 2rem;
  padding: 1rem;
  color: var(--text-color);
  background: var(--background);
  border-radius: 0.7rem;
  outline: solid var(--background) 0.3rem;
  -webkit-box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
  box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
  border: solid 2px green;

}
.pitchbtn:hover{
  border: solid 2px green;
}


header input {
  width: clamp(200px, 90%, 500px);
  text-align: center;
  background: var(--background);
  border-radius: 1rem;
  color: var(--text-color);
  border: none;
  outline: none;
  -webkit-box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
  box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
}

header input:hover {
  background: linear-gradient(145deg, var(--hover-up), var(--hover-down));
}

header input:focus {
  background: var(--background);
  -webkit-box-shadow: inset 6px 6px 12px var(--focus-up) inset -6px -6px 12px var(--focus-down);
  box-shadow: inset 6px 6px 12px var(--focus-up), inset -6px -6px 12px var(--focus-down);
}

header .category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: clamp(200px, 90%, 500px);
  margin: 4rem auto;
}

header .category a {
  font: 3rem/3rem "Nanum Brush Script", cursive;
  padding: 1rem;
  color: var(--text-color);
  background: var(--background);
  border-radius: 0.7rem;
  outline: solid var(--background) 0.3rem;
  -webkit-box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
  box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
}

header .category a:first-of-type {
  border: solid 2px green;
}

header .category a:nth-of-type(2) {
  border: solid 2px orange;
}

header .category a:last-of-type {
  border: solid 2px #d43232;
}

header .category a:hover {
  background: linear-gradient(145deg, var(--hover-up), var(--hover-down));
}

header .category a:active {
  background: var(--background);
  -webkit-box-shadow: inset 6px 6px 12px var(--focus-up), inset -6px -6px 12px var(--focus-down);
  box-shadow: inset 6px 6px 12px var(--focus-up), inset -6px -6px 12px var(--focus-down);
}

main {
  width: clamp(200px, 95%, 1400px);
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: clamp(250px, 95%, 400px);
  padding: 1rem;
  margin: 1rem auto;
  background: var(--background);
  border-radius: 1rem;
  -webkit-box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
  box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
}

.card:hover {
  background: linear-gradient(145deg, var(--hover-up), var(--hover-down));
}

.card img {
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  width: 50px;
  height: 50px;
}

.card h2 {
  font-size: clamp(1rem, 10vw, 3rem);
  font-family: "Oleo Script", cursive;
  margin: 0;
  color: var(--text-color);
}

.card a {
  color: var(--text-color);
  border-bottom: 2px dashed var(--text-color);
  font-size: 1.5rem;
}

.card p {
  width: 90%;
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-color);
}


  /* ASIDE THEME CHANGING CSS */

.theme{
  position: fixed;
  bottom: 0;
  right: 0rem;
  display: flex;
  flex-direction: column;
}
.theme a{
  width: 5rem;
  
}
.theme img{
  width: 5rem;
  height: 5rem;
  margin: 1rem;
  filter: grayscale(100%);
}
.theme img:hover{
  filter: grayscale(0);
}

.colors{
  position: fixed;
  bottom: 3rem;
  right: 10rem;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: clamp(100px, 95%, 150px);
  height: 550px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 100%;
  transition: opacity 0.3s ease-in-out;
}

.colors button:first-of-type{
  background-color: var(--light-white-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(2){
  background-color: var(--light-cream-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(3){
  background-color: var(--light-blue-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(4){
  background-color: var(--light-orange-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(5){
  background-color: var(--light-yellow-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(6){
  background-color: var(--light-green-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(7){
  background-color: var(--light-purple-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(8){
  background-color: var(--light-pink-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(9){
  background-color: var(--dark-black-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(10){
  background-color: var(--dark-blue-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(11){
  background-color: var(--dark-purple-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(12){
  background-color: var(--dark-green-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(13){
  background-color: var(--dark-green2-bg);
  border: 2px solid white;
}
.colors button:nth-of-type(14){
  background-color: var(--dark-red-bg);
  border: 2px solid white;
}
.colors button{
  width: 5rem;
  height: 5rem;
  margin: 0.5rem;
  border-radius: 50%;
}

footer{
  width: 100%;
  margin: 4rem auto auto auto;
  background-color: var(--boxshadow-down);
  color: var(--text-color);
  line-height: 4rem;
  word-spacing: 0.3rem;
}
footer div{
  width: clamp(200px,95%, 1400px);
  margin: auto;
  color: var(--text-color);
  padding: 2rem;
}
footer h2{
  font-size: 3.6rem;
  text-align: center;
}
footer section p,li{
  font-size: 2rem;
}
footer section:last-of-type{
  display: flex;
  justify-content: space-evenly;
  background-color: var(--background);
}
span{
font-size: 3rem;
}
footer button{
  margin: 4rem auto;
  padding: 1rem;
  font: 3rem/3rem "Nanum Brush Script", cursive;
  color: var(--text-color);
  background: var(--background);
  border-radius: 0.7rem;
  border: solid 2px var(--text-color);
  -webkit-box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
  box-shadow: 6px 6px 12px var(--boxshadow-up), -6px -6px 12px var(--boxshadow-down);
  
}