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

* {
    box-sizing: border-box;
}

body {
    font-family: 'Exo 2 Medium', sans-serif;
    background-image:  linear-gradient(to top, rgba(57,57,57,0.7), rgba(25,25,25,0.7)), url("../image/lego-bg.jpg");
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    padding-top: 5rem;
    justify-content: center;
    overflow: hidden;
    margin: 0;
}

.row {
    display: flex;
    width: 600px;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.last-row {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 600px;
    justify-content: center;
    margin-bottom: 3%;
}

.col-header {
    width: 150px;
    box-shadow: 4px 4px 9px rgba(198, 198, 198, 0.36);
    border-radius: 20px;
    padding: 0.8rem 1rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item {
    width: 150px;
    height: 66px;
    border: 1px solid #eee;
    box-shadow: 4px 4px 9px rgba(198, 198, 198, 0.36);
    border-radius: 20px;
    background: #f7f6f7;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    color: #828282;
    text-align: center;
    cursor: grab;
}

.item:active {
    cursor: grabbing;
}

.placeholder {
    width: 150px;
    height: 66px;
}

.start {
    background: linear-gradient(90deg, #ff85e4 0%, #229efd 179.25%);
}

.progress {
    background: linear-gradient(90deg, #209cff 0%, #68e0cf 100%);
}

.done {
    background: linear-gradient(90deg, #84fab0 0%, #8fd3f4 100%);
}

.hold {
    border: 2px solid cyan;
    margin: 2px;

}
.hide{
    display: none;
}

.hovered{

    border-top: 2px solid darkcyan;
    transition: all 0.3s ease-in-out;

}

A {
    color: #c7c7c7;
    text-decoration: none;
}
A:hover {
    color: #c7c7c7;
    text-decoration: underline;
}
A:visited {
    color: rgb(160, 243, 232);
    text-decoration: none;
}
A:active {
    color: darkgray;
    text-decoration: none;
}