body {
    --c1: beige;
    --c2: sienna;
    background: radial-gradient(circle at top left,transparent 25%,var(--c1) 25.5%, var(--c1) 36%, transparent 37%, transparent 100%),radial-gradient(circle at bottom right,transparent 34%,var(--c1) 34.5%, var(--c1) 45.5%, transparent 46%, transparent 100%);
        background-size: 2em 2em;
        background-color: var(--c2);
        opacity: 1;
    margin: 0
    }

header {
    background-color: maroon;
    padding-bottom: 2%;
}
footer {
    background-color: #021f4f;
    padding: 2%;

}

button {
    max-width:90%;
    display:inline-block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#card {
    background-color: white;
    width: 75%;
    padding: 2% 0 5% 0;
    vertical-align: middle;
}

img.logo {
    display: inline-block;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 2%;
    vertical-align: middle;
}

#combobox {
    margin-bottom: 2%;
    width: 37.5%;
    aspect-ratio: 6/1;
    max-width:90%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    float: left;
    margin-top: 5%;
}

#card_img {
    border-style: solid;
    border-color: black;
    border-width: thin;
    width: 50%;
}

#answer {
    font-size: large;
    color: black;
}

.aligned {
    width: 75%;
    margin: 2%;
}

#embaralhar {
    width: 37.5%;
    aspect-ratio: 6/1;
    margin-top: 5%;
    float: right;
    margin-bottom: 2%;
}

#proximo {
    float:right;
}

#anterior {
    float: left;
}

#card_txt {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 3%;
    font-size: x-large;
    
}

#full_width {
    width: 100%;
}

.colored_item {
    color: beige;
    background-color: maroon;
    border-color: beige;
    font-weight: bold;
}

.bottom_btn {
    width: 25%;
    margin-bottom:10%;
    aspect-ratio: 4/1;
}

.footer_txt {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: large;
    color:#e5e900;
    
}


/* body {
    margin: 0;
    --s: 100px;  
    --c1: #021f4f;
    --c2: #355C7D;
    
    --_g: 
        var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
        var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
    background:
        radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
        radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
        var(--c1);
    background-size: var(--s) var(--s);
      
    }

header {
    background-color: #021f4f;
    padding-bottom: 2%;
}
footer {
    background-color: #021f4f;
    padding: 2%;

}

button {
    max-width:90%;
    display:inline-block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    background-color: #e5e900;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#card {
    background-color: white;
    width: 75%;
    padding: 2% 0 5% 0;
    vertical-align: middle;
}

header {
    margin-bottom: 3%;    
}

img.logo {
    display: inline-block;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 2%;
    vertical-align: middle;
}

#combobox {
    margin-bottom: 2%;
    width: 37.5%;
    aspect-ratio: 6/1;
    max-width:90%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    float: left;
    margin-top: 5%;
}

#card_img {
    border-style: solid;
    border-color: black;
    border-width: thin;
    width: 80%;
}

#answer {
    font-size: large;
    color: black;
}

.aligned {
    width: 75%;
    margin: 2%;
}

#embaralhar {
    width: 37.5%;
    aspect-ratio: 6/1;
    margin-top: 5%;
    float: right;
    margin-bottom: 2%;
}

#proximo {
    float:right;
}

#anterior {
    float: left;
}

#card_txt {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 3%;
    font-size: x-large;
    
}

#full_width {
    width: 100%;
}

.colored_item {
    color:#e5e900;
    background-color: #021f4f;
    border-color: #e5e900;
    font-weight: bold;
}

.bottom_btn {
    width: 25%;
    margin-bottom:10%;
    aspect-ratio: 4/1;
}

.footer_txt {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: large;
    color:#e5e900;
    
} */