:root {
    --background-color: #fefefe;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.screen {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    height: 100vh;
}

input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
}

input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
}

.uname-upostalcode {
    display: flex;
    gap: 2%;
}

.uname {
    width: 70%;
}

.upostalcode {
    width: 28%;
}

.ustreet-unumber {
    display: flex;
    gap: 2%;
}

.ustreet {
    width: 65%;
}

.unumber {
    width: 35%;
}

.ucomplement-uneighborhood {
    display: flex;
    gap: 2%;
}

.ucomplement {
    width: 50%;
}

.uneighborhood {
    width: 55%;
}

.ucity-ustate {
    display: flex;
    gap: 2%;
}

.ucity {
    width: 48%;
}

.ustate {
    width: 50%;
}

.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s;
}

@-webkit-keyframes animatezoom {
    from {
        -webkit-transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
    }
}

@keyframes animatezoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

div.container-google {
    -ms-flex: 25%;
    flex: 2%;
    padding: 16px;
}

@media (max-width: 800px) {
    div.container-google {
        margin-bottom: 20px;
    }
}

div.infocontainer a {
    text-decoration: none;
    color: black;
}

.container-cart {
    display: flex;
    margin: 0 auto;
    background-color: #f2f2f2;
    padding: 5px 20px 0 20px;
    border-radius: 3px;
    border: 1px solid lightgrey;
}

.imgcontainer {
    position: relative;
    margin: 40px 5px 20px 10px;
}

img.avatar {
    width: 5vw;
    border-radius: 50%;
}

.infocontainer {
    position: relative;
    text-align: left;
    margin: 5px 5px 10px 20px;
}

hr {
    border: 1px solid lightgrey;
}