* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background: rgb(13, 14, 31);
    
}
.site {
    width: 40vw;
    height: 100%;
    margin: auto;
}
h1 {
    font-size: calc(2vw + 15px);
    color: #fff;
    letter-spacing: 1vw;
    text-align: center;
    position: absolute;
    padding-top: 30px;
}
.center {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}
header {
    height: 40vh;
    background: url("images/bg-desktop-dark.jpg");
    position: relative;
    background-size: cover;
}
.button {
    background: rgb(26, 27, 59);
    position: relative;
    padding: 15px 30px;
    cursor: pointer;
    font-size: 0.5em;
    border-radius: 10px;
    width: 100%;
    min-width: 400px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40vw;
}
.cercle {
    width: 20px;
    height: 20px;
    border: 1px solid rgb(173, 173, 173);
    border-radius: 50%;

    left: 10%;
}
.button h2 {
    margin-left: 2vw;
    color: rgb(173, 173, 173);
    font-size: 1.5vw;
}

.todo {
    background: rgb(26, 27, 59);
    box-shadow: 0 0 10px black;
    border-radius: 10px;
    height: auto;
    width: 100%;
    min-width: 400px;
    position: relative;
    bottom: 3vw;
    /* display: none; */
}
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.todoFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    text-align: center;
}
.todoFooter p {
    color:rgb(173, 173, 173);
    width: 25%;
}
.todoFooter h3 {
    margin-right: 5px;
    color:rgb(173, 173, 173);
    cursor: pointer;
}
.todoFooter h3:hover {
    color: rgb(255, 255, 255);
}
.todoFooterWidth {
    width: 10%;
    font-size: calc(8px + 0.1vw);
}
.buttonText {
    display: none;
    background: rgb(26, 27, 59);
    padding: 10px 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    bottom: 3vw;
    margin-bottom: 20px;
    box-shadow: 0 0 100px 10px rgba(0,0,0, 0.9);
}

.animation-target {
    -webkit-animation: animation 2000ms linear both;
    animation: animation 2000ms linear both;
  }
  
  /* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bs%3A%5B%7BT%3A%22t%22%2Ce%3A%22b%22%2Cd%3A2000%2CD%3A0%2Cf%3A%7Bx%3A0%2Cy%3A-80%7D%2Ct%3A%7Bx%3A0%2Cy%3A0%7D%2Cs%3A5%2Cb%3A0%7D%5D%7D */
  
  @-webkit-keyframes animation { 
    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -80, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -80, 0, 1); }
    3.2% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -46.648, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -46.648, 0, 1); }
    6.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -27.596, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -27.596, 0, 1); }
    9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -16.286, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -16.286, 0, 1); }
    12.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.588, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.588, 0, 1); }
    18.82% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.242, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.242, 0, 1); }
    25.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.103, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.103, 0, 1); }
    50.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.013, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.013, 0, 1); }
    100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
  }
  
  @keyframes animation { 
    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -80, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -80, 0, 1); }
    3.2% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -46.648, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -46.648, 0, 1); }
    6.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -27.596, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -27.596, 0, 1); }
    9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -16.286, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -16.286, 0, 1); }
    12.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.588, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.588, 0, 1); }
    18.82% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.242, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.242, 0, 1); }
    25.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.103, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.103, 0, 1); }
    50.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.013, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.013, 0, 1); }
    100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

  
  
.buttonText h3 {
    text-transform: uppercase;
    margin: 10px;
    color: #fff;
}
#text {
    padding: 10px 15px;
    background: rgb(13, 14, 31);
    border: none;
    border-radius: 10px;
    color:white;
    font-size: calc(0.5vw + 10px);
}
#valide {
    background: rgb(32, 104, 29);
    padding: 5px;
    border: none;
    border-radius: 5px;
    width: 30px;
    color:rgb(23, 75, 21);
    cursor: pointer;
}
#valide:hover {
    background: rgb(40, 128, 37);
    color:rgb(32, 104, 29);
}
#remove {
    background: rgb(148, 37, 22);
    padding: 5px;
    border: none;
    border-radius: 5px;
    width: 30px;
    color:rgb(92, 22, 13);
    cursor: pointer;
}
#remove:hover {
    background: rgb(184, 51, 26);
    color:rgb(148, 37, 22);
}
input {
    margin:  5px 0px;
}

.item {
    margin: 10px;
    padding: 10px;
    background: rgb(13, 14, 31);
    border-radius: 10px;
    color: rgb(226, 226, 226);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: auto;
    flex-wrap: wrap;
}
.item p {
    margin-left: 30px;
    margin: auto 30px;
    font-size: calc(1vw + 15px);
    width: 80%;
}
.item .circle {
    width: 20px;
    height: 20px;
    border: 1px solid rgb(173, 173, 173);
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    background: rgb(26, 27, 59);
}
.item .circle:checked {
    background: rgb(0, 0, 0);
}
.item .removeClick {
    width: 30px;
    height: 30px;
    border: none;
    border-bottom-left-radius: 50px;
    border-top-right-radius: 5px;
    background: #731b74;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    content: "x";

}
.item .removeClick:hover {
   background: RGB(140, 27, 113);

}

.activeColor {
    color:rgb(255, 255, 255) !important;
}

.menuActive {
    color: RGB(121, 27, 113) !important;
}

.divHours {
    display: flex;
    justify-content:left;
    align-items: center;
    border-radius: 20px;
    margin: 0;
    padding: 0;
    background: RGB(47, 23, 161);

}
.divHours p {
    font-size: calc(0.5vw + 5px) !important;
    width: auto;

}

.bgRemoved {
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0, 0.33) 0px, rgba(0,0,0, 0.33) 50px,transparent 50px, transparent 100px),repeating-linear-gradient(90deg, rgba(0,0,0, 0.33) 0px, rgba(0,0,0, 0.33) 50px,transparent 50px, transparent 100px),linear-gradient(90deg, rgb(13,14,31),rgb(13,14,31));
}

.block {
    display: block;
}