/* google font  link  */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap');

* {
    font-family: 'Roboto Mono', monospace;
}

/* css font family  */
#batton:hover {
    color: rgb(45, 41, 246);
    font-weight: 700;
}

#h1 {
    color: lime;
    border-left: 5px solid magenta;
    padding-left: 10px;
    font-weight: 800;
}

#hadding {
    color: black;
}

#card-3 {
    box-shadow: 3px 2px 7px gray;
    transition: transform 0.5s;
}

#card-btn {
    background: rgb(255, 255, 255);
    color: #3F87F5;
    border: 2px solid rgb(255, 252, 252);
    border-radius: 15px;
    padding: 4px 20px;
    font: 600;
    margin: 0 auto;
    display: block;
    border: 1px solid black;
}

#card-btn:hover {
    border: 1px solid black;
    background: rgb(248, 244, 6);
    color: #0767f8;
}

#card,
#card-3 {
    border-radius: 20px;
}

#card {
    transition: transform 0.5s;
}

#card:hover {
    transform: translateY(-10px);
}

#card-3:hover {
    transform: translateY(-10px);
}

.hot {
    width: 60px;
    border-radius: 40%;
    padding: 0 5px;
    border: 1px solid red;
    background-color: #FF4E4E;
    color: #fff;
    position: relative;
    top: -18px;
    left: 215px;
}

#img {
    transition: transform 0.5s;
}

#img:hover {
    transform: translateY(-5px);
}

#footer {
    background-color: #0B0D17;
}