@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

header>div {
    background: url("./p4.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 700px;
    font-family: roboto;
    font-size: 50px;
    color: white;
    padding: 100px 200px;
}

header span {
    font-size: 2rem;
    background-color: white;
    color: black;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.dev-text {
    font-weight: bold;
    font-family: roboto;
    font-size: 72px;
    text-align: center;
    background-color: black;
    color: white;
}

.dev-text>span {
    font-size: 100px;
}

.card-group {
    display: flex;
    /* justify-content: space-around; */
    gap: 20px;
    flex: 1 1 20%;
    max-width: 80%;
    margin: 0 auto;

}

.card {
    margin: 10px;
    border: 1px solid gray;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px gray;
    transition: all 0.5s;

    /* max-height: 50%; */
    /* max-width: 50%; */
}

.card>img {
    width: 100%;
    border-radius: 10px;
}

.card>p {
    font-family: roboto;
    ;
    text-align: justify;
    margin: 10%;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 6px 6px 10px gray;
}

footer {
    display: flex;
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */
    flex: 1 1 50%;
    color: white;
    font-family: roboto;
}

.contact {
    background-color: #515603;
    padding: 20px;
    text-align: justify;
}

.about {
    background-color: #722300;
    padding: 20px;
    text-align: justify;
}

footer .title {
    font-weight: bold;
    font-size: xx-large;
}

@media (max-width: 600px) {

    .card-group {
        flex-wrap: wrap;
        margin: 0 auto;
        justify-content: center;
    }

    footer {
        flex-wrap: wrap;
    }

}