@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,700&display=swap");

:root {
  --clr-dark: hsl(253, 69%, 8%);
  --clr-white: hsl(0, 0%, 100%);
  --clr-darkblue: hsl(240, 32%, 27%);
  --clr-whitegreen: hsl(157.71, 100%, 50%);
  --clr-whitegreenHover: hsl(158, 100%, 70%);
  --clr-background: hsl(240,52%,4.9%);
  --clr-lighterbg: hsl(240,16.3%,16.9%);
  --clr-grey: hsl(240,31%,11.4%);
  --clr-categoryHover: hsl(240,6.5%,36.1%);
 

  

  --ff-sans: "DM sans", sans-serif;
}




body {  
    background-color: var(--clr-background);
}

nav {
    width:30rem;
    margin-left:15rem;
    margin-top: 4rem;
    
    
}


nav h1 {
    font-size: xx-large;
}
.back_boutton{
    text-decoration: none;
    color: black;
    background-color: var(--clr-whitegreen);
    padding: 0.5rem;
}
.back_boutton:hover{
    transition: ease-in-out;
    scale: 1.1;
    background-color: var(--clr-whitegreenHover);
}

form {
    width:30rem;
    margin-left:15rem;
    margin-top: 3em;
    display: flex;
    flex-direction: column;
    color: var(--clr-categoryHover);
}
.back_title{
    color: #fff;
}
form select {
    font-size: medium;
    border-style: none;
}

form input, select {
    margin-top: 1rem;
    font-size: medium;
    border-style: none;
    display: inline-block;
    height: 2rem;
}

form input[type=submit] {
    background-color: var(--clr-whitegreen);
    color:black;
   
}

form h3 {
    color:white;
    border-bottom-style:solid;
    border-width: 1px;
    height: 1.5em;
}