*{ 
    margin: 0;
    padding: 0;
}
body{ 
    background-color: blanchedalmond  ;
}

.hero { 
    width: 100%;
    height: 10vh;
}

.hero h1 { 
    font-size: 70px;
    text-align: center;
    margin: 40px 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.kaban__wrapper{ 
    margin: 100px auto;
    max-width: 90vw;
    height: auto;
    display: flex;
    justify-content: center;
}

.kaban { 

    display: flex;
    padding: 30px;
    width: 750px;
	background-image: 
      linear-gradient(
        rgba(181, 112, 112, 0.6), 
        rgba(112, 122, 181, 0.6)
      ),
      url("https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
    background-size: auto,cover;
    background-position: center;
    border-radius: 5px;
    border: 2px black ridge ;
}


.kaban * { 
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
}

.kaban__column{ 
    flex:1;

}

.kaban__column:not(:last-child) { 
    margin-right: 30px;

}

.kaban__column__title {
    margin-bottom: 20px;
    font-size: 30px;
    color: #fff;
    user-select: none;
}


.kaban__item__input { 
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: aliceblue;
    border-radius: 5px;
    cursor: pointer;

}

.kaban__dropzone { 
    height: 10px;
    transition: background 0.15s , height 0.15s;
}


.kaban__dropzone__active {
    height: 20px;
    background: rgba(0, 0, 0.25);
 }


.kaban__add__item{ 
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    background: rgba(0, 0,0, 0.3);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}