#hand {
    display:flex;
    width:100%;
    flex-wrap: wrap;
}


#close {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: x-large;
    background-color: white;
    font-weight: bolder;
    text-align: center;
    padding-bottom: 5px;
    opacity: .8;
}

img {
    max-width:100%;
    height:auto;
}

textarea {
    width:100%;
}

.card {
    max-width:200px;
}
.card .popup {
    display:none;
}
#deck .card:hover .popup {
    display:block;
    visibility:inherit;
}
.card-pad {
    grid-column: span 3;

}

#search-container  {
    float:right;
    margin-top:-45px;
    width:50%;
}
#search {
    width:90%;
}

#searched-deck .popup {
    position:absolute;
    left:-250px;
    top:0px;
    width:250px;
    height:300px;
    visibility:hidden;
}

#searched-deck {
    position:relative;
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(25px,1fr));
    margin-right:25px;
    margin-left:250px;
}
#searched-deck .card {
    min-width:50px;
}
#searched-deck img {
    position:relative;
}
#searched-deck img:hover {
    transition: transform .1s;
    transform: translateX(-12.5px) scale(1.2) rotate(-1deg);
}
#searched-deck .popup img,
#searched-deck .popup#hover img {
    transform: none;
}
.future {
    filter: brightness(50%);
}
.discarded {
    filter: brightness(80%);
}

.popup .info {
    background-color:#333;
    color:#eee;
    font-weight:bold;
    text-align:center;
    font-size:larger;
}


#deck .card button {
    display:none;
}

#hand .card {
    position:relative;
}
#hand .card button {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    opacity: .8;
}

#hand textarea {
    width:70%;
    position:absolute;
    left:29%;
    top:5px;
}