@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap");
* { box-sizing: border-box; font-family: "Montserrat", cursive; }

body { background-image: url(../images/mapa.jpg); }

button { padding: 4px; margin: 20px; border: 1px solid black; background-color: #e6e6e6; border-radius: 10px; color: black; box-shadow: 2px 2px 3px #6d6d6d; font-family: 'Boogaloo', cursive; text-transform: uppercase; font-size: 16px; cursor: pointer; }

button:hover { background: #afc2cf; }

input { border-radius: 10px; padding: 10px 10%; border: 1px solid black; font-size: 20px; }

input:focus { box-shadow: 0 0 0 1px #95afc0; outline: none; }

.container { width: 100%; max-width: 768px; margin: 50px auto; }

.country-card { background: #f4f4d7; margin-top: 20px; border: 1px solid #95afc0; padding: 20px; border-radius: 5px; box-shadow: 2px 2px 15px #535c68; }

.card-header { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.country-flag { width: 30%; height: 80px; }

.country-flag img { height: 100%; box-shadow: 2px 2px 15px #535c68; }

.country-name { width: 70%; font-size: 35px; padding-left: 50px; line-height: 40px; }

.card-body { border: 1px solid #95afc0; margin: 10px 0; }

.body-header { background: #999999; padding: 10px; }

.position-wrapper { background: lighten #535c68; display: -ms-flexbox; display: flex; padding: 0 10px; border-top: 1px solid #95afc0; }

.position-title { width: 40%; border-right: 1px solid #95afc0; padding: 10px 0; font-weight: 600; }

.position-description { padding: 10px 10px; }