*, *::before, *::after{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

*:focus{
   outline:0.3rem solid blue;
}

button:hover, .dashboardheader__mode:hover{
    cursor: pointer !important;
}

:root{
    --background-color: #212730;
    --font-color: #d4d4d4;
    --gradient: linear-gradient(to bottom right, #721c3e,10%, #7445f7);
    --product-border-color: rgba(212,212,212,0.4);
    --product-border: 0.3rem dashed var(--product-border-color);
}

html{
    font-size: 62.5%;
}

body{
    font-size: 2rem;
   min-height: 100vh;
   display: grid;
   grid-template-columns: 25% 75%;
   color: var(--font-color);
   font-family: 'Roboto', sans-serif;
   padding: 4rem;
   background: var(--gradient);
}

aside{
  padding:4rem;
  background: var(--background-color);
  box-shadow: 0 0 2rem 0 rgb(0,0,0,0.2);
  z-index: 1;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius:0.5rem;
}

.navigation{
 height:100%;
display:flex;
flex-direction: column;
justify-content: space-between;
gap:0rem;
}

.navigation__list{
    display:flex;
    flex-direction: column;
    gap:2rem;
}

.navigation__listItem{
list-style:none;
}

.navigation__link{
text-decoration: none;
color: var(--font-color);
width: 100%;
display: block;
position: relative;
display: flex;
}

.navigation__link:visited{
    color: var(--font-color);
}

.navigation__message{
   font-size: 70%;
   width: 2rem;
   height: 2rem; 
   background: var(--gradient);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   transform:translate(0%, -50%);
}

.navigation__premium{
    border: none;
    color: var(--font-color);
    background: var(--gradient);
    width: 20rem;
    font-size: 80%;
    padding: 2rem;
    border-radius: 5rem;
}

main{
 background:  var(--background-color);
 color: var(--font-color);
 padding:4rem;
 display: flex;
 flex-direction: column;
 gap:2rem;
 border-top-right-radius: 0.5rem;
 border-bottom-right-radius: 0.5rem;
}

.dashboardheader{
    display: flex;
    justify-content: space-between;
}

.dashboardheader__heading{
    font-size: 300%;
    font-weight: 700;
}

.dashboardheader__mode{
   -webkit-appearance: none;
    appearance: none;
    width: 8rem;
    height: 4rem;
    background:#F9F3EE;
    border-radius: 5rem;
    position: relative;
}

.dashboardheader__mode:checked::after{
transform: translate(-50%, -50%);
}

.dashboardheader__mode::after{
 content:"";
 width: 5rem;
 height: 5rem;
 border-radius: 5rem;
 background: var(--gradient);
 position: absolute;
 top: 50%;
 left: 30%; 
 transform: translate(30%, -50%);
 transition: 0.4s all;
 transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.products{
display: flex;
gap:2rem;
flex-wrap: wrap;
}


.products__product{
    list-style: none;
    width:20rem;
    height: 30rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:2rem;
    border:  var(--product-border);
    border-radius: 0.5rem;
    flex-grow: 0;
}

.products__addButton{
    border: none;
    color:  var(--font-color);
    background: var(--gradient);
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    font-size: 120%;
}

.products__text{
    font-size:80%;
    opacity: 0.8;
}

@media screen and (max-width: 62.5rem) {
    body{
        grid-template-columns: 100%;
        color: var(--font-color);
        font-family: 'Roboto', sans-serif;
        padding:2rem;
    }

    main,aside{
        border-radius: 0;
    }

    .navigation{
      gap:2rem;
       }

       .products__product{
flex-grow: 1;
       }
}

@media  screen and (max-width: 37.5rem) {
    .dashboardheader{
      flex-direction: column-reverse;
        justify-content:baseline;
    }
}