* {
    margin: 0;
    padding: 0;

}

.hero {
    height: 20vh;
    width: 100%;
    background-color: aqua;
    background-image: url(/static/image/search3.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -5;
    margin-bottom: 100px;

}

.searchbox {
    height: 8vh;
    width: 60%;
    font-size: 5vmin;
    border: 1px solid;
    border-radius: 25px;
    text-align: center;
    margin-right: 20px;
    opacity: .75;
    background-color: rgb(79, 143, 14, .25);
    color: black;

}

input::placeholder {
    color: whitesmoke;
    font-style: italic;
}


.searchbutton {
    height: 8vh;
    width: 20%;
    border-radius: 25%;
    position: relative;
    bottom: 8px;
    opacity: .75;
    color: white;
    background-color: rgb(79, 143, 14);
}

.base {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-template-rows: auto;

    gap: 50px;

}


.box {
    height: 250px;
    width: 250px;

    border: 2px solid rgb(15, 15, 115);
    border-radius: 15px;
    margin-top: 100px;
    background-color: #FFF720;
    margin-bottom: 50px;
    margin-left: 50px;


}

.im {
    height: 60%;
    width: 100%;

    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.tex {
    height: 40%;
    width: 100%;

    border-radius: 13px;
}

.ta {
    height: 60%;
    width: 100%;
    margin-left: 10px;
}

.ba {
    display: flex;
    justify-content: center;
    margin-top: 10px;

}

hr {
    background-color: black;
    height: 2px;
    width: 60%;
    margin-left: 50px;
}

.box:hover {
    transform: scale(1.1);
    box-shadow: 4px 4px 4px rgb(71, 71, 156);
}

.bt {

    background-image: linear-gradient(135deg, #FFF720 10%, #3CD500 100%);
}

.bt:hover {
    transform: scale(1.15);
}