/* soris plantd */

:root{

  /* colors */
  
  --clr-main: hsla(212, 45%, 58%, 0.5);  
  
  --clr-nav-top: hsla(0, 0%, 100%, 1);
  --clr-nav-link-hover: hsla(205, 33%, 52%, 0.3);

  --clr-txt-logo: hsla(212, 45%, 45%, 1);
  --clr-txt-main: hsla(0, 0%, 0%, 1);
  
  /* dimensions */

  --fnt-size-label-01: 1rem;
  --fnt-weight-label-01: 600;
  
  --hgt-header: 0rem;

  --pdg-01: 1rem;
  --pdg-02: 1.5rem;
  
  --wdt-nav: 86%;
  --wdt-main-01: 1050px;
  

  /* border radius */

  --bdr-rad-01: 0.5rem;

  

  
  /* transitions */
  
  --trn-main: all 400ms ease;
  
  
  }
  
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
  }
  
  body{
    background: var(--clr-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  main{  
    min-height: 90vh;
    margin-top: var(--hgt-header);
    max-width: var(--wdt-main-01);
    width: 90%;
    margin-inline: auto;
    overflow: hidden;
  }

  /* nav top */
  .mynav-top{
    background: white;
    position: sticky;
    height: 4.5rem;    
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--clr-txt-logo);
  }

  .mynav-top-items{    
    width: var(--wdt-nav);
    max-width: var(--wdt-main-01);
    margin-inline: auto;
  }
  
  .mylogo{
    background: linear-gradient(to right, var(--clr-main), white);
    margin: 0;
    padding: 1rem;
    width: 15rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    

    & h1{
      text-align: center;
      font-size: 1.5rem;
      color: var(--clr-txt-logo);
    }

    & span{
      color: var(--clr-txt-logo);
      font-weight: 700;
    }
  }


  /* page */

  .myheader-main{
    background: var(--clr-nav-top);
    position: fixed;
    top: 4.5rem;
    max-width: var(--wdt-main-01);
    width: 90%;
    height: 4rem;   
    padding: 1rem;
    font-size: 1.5rem;
    border-radius: var(--bdr-rad-01);
    box-shadow: 0.5rem 0.5rem 0.5rem var(--clr-nav-link-hover);
    z-index: 900;
  }

  .create-list-wrapper{    
    margin-top: 6rem;
  }

  .list-wrapper{    
    background: white;
    margin: 1rem 0;
    padding: .7rem;
    font-size: 1.2rem;
    border-radius: var(--bdr-rad-01);
  }

  .list-wrapper-each{
    background:  hsla(212, 45%, 58%, 0.15);;
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--bdr-rad-01);
  }

  .list-edit-wrapper{
    /* background:  hsla(212, 45%, 58%, 0.2); */
    height: 0.5rem;    
    display: flex;
    justify-content: flex-end;
  }

  .list-item-wrapper{
    /* background:  hsla(212, 45%, 58%, 0.2); */
    background: blue;
  }

  /* forms */

  .myform-wrapper{
    background: white;
    max-width: 27rem;
    width: 94%;
    padding: 1rem;
    margin: 1rem 0 ;
    border-right: 2px solid var(--clr-nav-link-hover);
    border-bottom: 2px solid var(--clr-nav-link-hover);
    box-shadow: 0.5rem 0.5rem 2rem hsla(212, 45%, 58%, 1);
  }

  .myform{
    background: white;

    & input{
      background: hsla(212, 45%, 58%, 0.2);
    }
  }

  .mycenter{ 
    width: 100vw;
    height: 100vh;   
    display: flex; 
    flex-direction: column;   
    align-items: center;
    justify-content: center;
    
  }

  .mydate{    
    max-width: var(--wdt-main-01);
    width: 100%;
  }

  .myform-ceate{
    background: white;
    padding: var(--pdg-01);
    border-radius: var(--bdr-rad-01);
  }

  .myform-group{
    background: white;
    font-size: var(--fnt-size-label-01);
    margin: 1rem 0;
  }

  label{
    background: white;
    color: var(--clr-txt-main); 
  }

  .mylistbox{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 4rem;
  }

  .mysearch{
    background: hsla(206, 100%, 94%, .5);
    display: flex;    
  }

  .mysearch input{
    width: 50%;
    min-width: 325px;
  }

  .mysearch-icon{
    background: hsla(0, 0%, 50%, .05);
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px var(--clr-txt-logo);
  }

  /* buttons */

  .mybtn-create{
    background: white;
    width: 100%;
    height: 3rem;
    margin: 0 0 1rem;
    padding: 1rem;
    text-align: left;
    font-size: var(--fnt-size-label-01);
    font-weight: var(--fnt-weight-label-01);
  }
  
  
  /* animations */

  @keyframes showslow {

    0%{
      opacity: 0;
    }

    100%{
      opacity: 1;
    }
    
  }

  .showslow{
    animation-name: showslow;
    animation-duration: 1000ms;
  }