@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
@font-face {
  src: url(/fonts/Rawkbrush.otf);
  font-family: "BrushFont";
}
.dark {
  --TextColor: white;
  --BackgroundColor: #121212;
}
.light {
  --TextColor: black;
  --BackgroundColor: white;
}
:root {
  --GalaxyGradient: linear-gradient(
    90deg,
    rgba(0, 100, 102, 1) 0%,
    rgba(6, 90, 96, 1) 10%,
    rgba(11, 82, 91, 1) 20%,
    rgba(20, 69, 82, 1) 30%,
    rgba(27, 58, 75, 1) 40%,
    rgba(33, 47, 69, 1) 50%,
    rgba(39, 38, 64, 1) 60%,
    rgba(49, 34, 68, 1) 70%,
    rgba(62, 31, 71, 1) 80%,
    rgba(77, 25, 77, 1) 90%
  );
  --BodyFont: "Poppins", sans-serif;
  --BrushFont: "BrushFont";
}

* {
    box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: background-color 2s, background 2s;
}

*,*:focus,*:hover{
    outline:none;
}

body {
  background-color: var(--BackgroundColor);
  font-family: var(--BodyFont);
/*   transition: 2s; */
}

section {
  height: 100vh;
  width: 100%;
  /*   background-color: red; */
}
section#contactsection {
  
  align-items: center;
}
section#header {
  background-image: var(--GalaxyGradient);
}
section#header div#title {
  clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%);
  height: 100%;
  width: 100%;
  background-color: var(--BackgroundColor);
  
}

section#header div#title h1 {
  
  font-size: 3em;
  font-family: var(--BrushFont);
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  padding: 1em;
  background-image: var(--GalaxyGradient);
/*   background-clip: text; */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translate(-50%, -50%);
}

section#header div#title a#explorebutton {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-80%, -50%);
  color: var(--TextColor);
  font-family: var(--BodyFont);
  cursor: context-menu;
  /*   font-size: */
}

section h2.header {
  text-align: center;
  font-size: 3em;
  font-family: var(--BrushFont);
  background: var(--GalaxyGradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
section#newsection card-list {
    display: flex;
    justify-content: center;
    padding: 3rem;
    
    overflow-x: hidden;
}
card {
  height: 450px;
  width: 300px;
  margin: 3em;
  border-radius: 16px;
  background-color: var(--BackgroundColor);
  color: var(--TextColor);
  box-shadow: -1rem 0 3rem #000;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "painting-image"
    "painting-details";

}

card:hover {
    transform: translateY(-1em);
transition: transform 0.5s;
}

card input{
  color: var(--TextColor);
  border: none;
	border-bottom: 0.125rem solid #4d194d;
	width: 100%;
	height: 2rem;
	font-size: 1.0625rem;
	padding-left: 0.875rem;
	line-height: 147.6%;
	padding-top: 0.825rem;
	padding-bottom: 0.5rem;
}

/* card input texta{
  color: var(--TextColor);
  font-family: var(--BodyFont);
} */
card input:hover {
    border-bottom: 0.125rem solid #006466;
}
.painting-image {
  grid-area: painting-image;
  border-radius: 16px;  
  background-color: var(--BackgroundColor);
  background-position: center;
}

.painting-details {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 1fr;
  gap: 0px 0px;
  grid-template-areas: "painting-title" "painting-description";
  grid-area: painting-details;
}

.painting-title {
  grid-area: painting-title;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--BrushFont);
  font-size: 2em;
  background: var(--GalaxyGradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.painting-description {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "painting-medium painting-price-button";
  grid-area: painting-description;
  padding: 1em;
}

.painting-medium {
  grid-area: painting-medium;
}

.painting-price-button {
  grid-area: painting-price-button;
}

button#backtotop, button#darkbutton {
   border: none;
  font-size: 2em;
  position: fixed;
  padding: 1em;
  bottom: 0.5em;
  right: 0.5em;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  background-color: var(--PastelPink);
  box-shadow: -1rem 0 3rem #000;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--TextColor);
}

button#darkbutton {
  bottom: 2.75em;
}

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
form input, form textarea, form button {
  font-family: var(--BodyFont);
  width: 50%;
  font-size: 1rem;
  margin-top: 2rem;
  border: none;
  border-bottom: 2px solid var(--TextColor);
  background-color: var(--BackgroundColor);
  color: var(--TextColor);
  transition: 1s;
}
form button {
  border: 2px solid var(--TextColor);
  width: 20%;
}
form button:hover {
  background-color: var(--TextColor);
  color: var(--BackgroundColor);
  
}

@media screen and (max-width: 600px) {
  card {
    width: 80%;
  }
  section#newsection card-list {
    flex-direction: column;
    margin: 0;
    padding: 0;
  }
  button#backtotop, button#darkbutton {
   right: 1em;   
   bottom: 1em;
  }
  button#backtotop {
  display: none;
}
}