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

body {
  background: #1f1f1f;
  font-family: sans-serif;
  max-width: 100vw;
  min-height: 100vh;
}
header{
  text-align: center;
}

/* primera pantalla */
#screen-one {
  display: flex;
  width: 100%;
  height: 90vh;
  background-image: url('https://media.graphassets.com/no_metadata/auto_image/quality=v:80/compress/cache=e:max/6pz9uvpMS0iS0MIrnxJd');
  background-size: cover;
  align-items: center;
  text-shadow: black 0.1em 0.1em 0.2em
}
.welcome-content{
  margin: 0px 0px 0px 100px;
}
.welcome-content h3{
  font-size: 2cm;
  color: #f6f6f6;
}
.welcome-content .p1{
  font-size: 1.5cm;
  color: #f6f6f6;
}
.welcome-content form{
  display: flex;
  flex-direction: column;
  align-items: center;
}
input[type=date] {
  height: 35px;
  margin: 0 auto;
  width: 60%;
  font-family: arial, sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  background-color: #959595;
  outline: none;
  border: 0;
  border-radius: 5px;
  padding: 0 3px;
  color: #f6f6f6;
  margin: 10px 0px 10px 0px;
}
.welcome-content form button{
  width: 250px;
  height: 50px;
  background-color:  #e71d1e ;
  border-radius: 5px;
  border: none;
  color: #f6f6f6;
  font-weight: bold;
  font-size: 20px;
  margin:10px 0px 20px 0px;
  text-shadow: black 0.1em 0.1em 0.2em
}
.welcome-content .p2{
  font-size: 0.4cm;
  color: #f6f6f6;
}

/* SEGUNDA PANTALLA */
#screen-two{
  display: flex;
  width: 100%;
  min-height: 90vh;
  background-image: url('https://media.graphassets.com/no_metadata/auto_image/quality=v:80/compress/cache=e:max/Vu8dMy7zQbevYMyU1LGJ');
  background-size: cover;
  background-position: -1px ;
  justify-content: center;
}
.content{
  width: 800px;
  background-color: #f6f6f6;
  margin: 30px 0 30px 0;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tarjeta{
  width: 500px;
  height: 280px;
  background: url(img/bg-tarjeta/poker.jpg);
  background-size: cover;
  margin: 20px 0 10px 0;
  border-radius: 15px;
  padding: 10px;
  z-index: 1;
}
.div-logo{
  margin: 5px 20px 0 0;
  text-align: end;
}
.logo-img{
  width: 100px;
}
.div-chip{
  text-align: start;
  margin: 0 0 10px 30px;
}
.chip{
  width: 50px;
  height: 40px;
}
.numero-grupo{
  display: flex;
  align-content: flex-end;
  text-align: start;
  margin: 20px 0 10px 30px;
}
.datos-grupo{
  display: flex;
  justify-content: space-between;
  text-align: start;
  margin: 0 40px 10px 30px;
}
.label{
  color:#f6f6f6;
  font-size: 15px;
}
.numero,
.nombre,
.expiracion{
  color:#f6f6f6;
  font-size: 20px;
  text-shadow: black 0.1em 0.1em 0.2em;
}

/* FORMULARIO DE TARJETA */
.form-tarjeta{
  background-color: #DCDCDC;
  width: 600px;
  margin: -40px 0 20px 0;
  z-index: 0;
  border-radius: 10px;
  padding: 30px;
}
.form-tarjeta label{
  color:#606060;
  font-size: 14px;
}
.form-nombre,
.form-numero,
.form-expiracion{
  display: flex;
  flex-direction: column;
  text-align: start;
  height: 65px;
}
.form-nombre{
  margin-top: 30px;
}
.form-tarjeta input,
.form-tarjeta select{
  height: 30px;
  border-radius: 5px;
  border: none;
  margin: 3px 0 3px 0;
  padding: 5px;
}
.btn-enviar{
  width: 250px;
  height: 50px;
  background-color:  #e71d1e ;
  border-radius: 10px;
  border: none;
  color: #f6f6f6;
  font-weight: bold;
  font-size: 20px;
  text-shadow: black 0.1em 0.1em 0.2em;
  margin: 10px 0 10px 0;
}
.expiracion-select select{
  width: 267px;
}