:root{
    /*  deafault transitions for the website*/
    --transition: color .2s ease-in-out, background-color .2s ease-in-out,  .2s ease-in-out;
}

/* dark theme colour scheme */
:root[data-theme="dark"]{
    --font-color: #ededed;

    --create-task-filter: brightness(0) saturate(100%) invert(89%) sepia(68%) saturate(0%) hue-rotate(132deg) brightness(96%) contrast(84%);

    --all-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    --bg-layer-0: #202020;

    --bg-layer-1: #282828;
    --bg-layer-1-border: #303030;

    --bg-layer-2: #363636;
    --bg-layer-2-border: #3d3d3d;

    --toggle-bg-color: #386db3;
    --toggle-x-pos: 3.1em;
    --toggle-icon-color: brightness(0) saturate(100%) invert(88%) sepia(5%) saturate(14%) hue-rotate(90deg) brightness(92%) contrast(87%);
}

/* light theme colour scheme */
:root[data-theme="light"]{
    --font-color: #111111;

    --all-box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 15px;

    --create-task-hover: brightness(0) saturate(100%) invert(88%) sepia(5%) saturate(14%) hue-rotate(90deg) brightness(92%) contrast(87%);

    --create-task-filter: unset;

    --bg-layer-0: #dbd9d9;

    --bg-layer-1: #e7e7e7;
    --bg-layer-1-border: #dddddd;

    --bg-layer-2: #f3f3f3;
    --bg-layer-2-border: #ececec;

    --toggle-bg-color: #e6d53c;
    --toggle-x-pos: 0.5em;
    --toggle-icon-color: none;
}

/* host display*/
body{
    display: flex;
    flex-direction: column-reverse;
}

/* theme toggler*/
#theme-toggle {
    display: flex;
    flex-direction: row;
    padding: 15px;
    gap: 15px;
    width: 4.5rem;
    background-color: var(--bg-layer-2);
    border-radius: 50px;
    margin-top: 125px;
    margin-left: 1vw;
    margin-bottom: 10px;
  }

  @media only screen and (min-width: 650px){
    body {
        display: block;
    }
    #theme-toggle {
        display: flex;
        flex-direction: row;
        padding: 15px;
        gap: 15px;
        width: 4.5rem;
        background-color: var(--bg-layer-2);
        border-radius: 50px;
        position: absolute;
        margin-top: 125px;
        margin-left: 1vw;
      }


  }

  #theme-toggle:hover{
    cursor: pointer;
  }

  #theme-toggle::before {
    content: '';
    position: absolute;
    width: 2.9rem;
    height:2.9rem;
    background-color: var(--toggle-bg-color);
    border-radius: 50px;
    z-index: 0;
    left: 0;
    margin-top: -0.4em;
    right: 10px;
    transform: translateX(var(--toggle-x-pos));
    transition: var(--transition);
  }

  #theme-toggle img{
    z-index: 1;
  }

  #sun-icon {
    width: 2rem;
    height: 2rem;
    filter: var(--toggle-icon-color);
    transition: var(--transition);
  }

  #moon-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-block: auto;
    filter: var(--toggle-icon-color);
    transition: var(--transition);
  }