body {
    margin: 0;
    font-family: "Century Gothic";
}

.container {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.box {
    width: 300px;
    height: 400px;
    border: 5px solid rgba(2, 2, 95, 0.59);
    background-image: url("images/tehran.jpg"), url("images/pattern.jpg");
    background-size: cover;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.4);
    transition: filter 0.5s;
}

.box:hover {
    filter: grayscale(80%);
    background-blend-mode: difference;
}
