@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300&display=swap');

:root {
    color-scheme: dark;
    --bg: #131415;
  }
*{
    margin: 0px;
    border: 0px;
    background-color:var(--bg)
}

body{
    background-color: var(--bg);
    scroll-behavior: smooth;
}

#navbar h1{
    /* opacity: 0.5; */
    font-family: 'Manrope', sans-serif;
    padding: 5px;
    text-align: right;
    color: #8d8c8c;
}
#add{
    /* border: 2px solid black; */
    height: 60vh;
    display: flex;
    /* align-items: center; */
    padding-left: 30px;
    padding-bottom: 40vh;
    flex-direction: column;
    justify-content: center;
}
.text{
    font-size: 6vh;
    font-family: 'Poppins', sans-serif;
    opacity: 0.4;
    padding-left: 10px;
}
#input_box{
    background-color:var(--bg);
    color: white;
    outline: none;
}

.list-group{
    background-color: var(--bg);
    display: flex;
    /* justify-content: center; */
    height: 88vh;
    font-size: 3vh;
    margin-left: 10px;
    font-family: 'Manrope', sans-serif;
    opacity: 0.4;
    flex-direction: column;
}
.fancy {
    position: relative;
    white-space: nowrap;
    &:after {
      --deco-height: 0.3125em;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(var(--deco-height) * -0.625);
      height: var(--deco-height);
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40' stroke='%2300FDCF' stroke-width='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h100v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
      background-size: auto 100%;
      background-repeat: round;
      background-position: 0em;
    }   
  }
  h2{
    text-align: center;
    padding-bottom: 20px;
  }
  .btn{
    font-size: 5vh;
    text-align: start;
  }
  #list{
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }
  #add #info{
    font-size: 16px;
    text-decoration: underline;
  }

  #weekend{
    text-decoration: underline;
    font-size: 18px;
    display: flex;
    align-items: end;
    justify-content: end;
    color:rgb(124, 124, 124);
    font-family: 'Poppins', sans-serif;
    padding: 15px;
  }