body {	
    font-family: 'Calibri Light', calibri, Arial, Helvetica, sans-serif;;
    background: #f391db;
}

form {
	margin: auto;
	display: grid;  /* recomendado */
	grid-template-columns: 140px 1fr 1fr 1fr; /* recomendado */
  	width: 600px;
	column-gap: 12px;
	row-gap: 4px;
	padding: 15px;
	border: 1px solid #ff31988c;
    background-color: #f7a5c0;
	box-shadow: 2px 3px 6px #ff45ff60, -4px -2px 12px #a7c1c440;
	text-shadow: 0px 0px 8px #e95dcb;
 	color: rgb(2, 1, 2);
}

p {	grid-column: 2 / 5;}
input{	grid-column: 2 / 5; }
input[type="reset"]{ grid-column: 1; }

form label {
	text-align: right;
	padding: 8px 0;
	align-self: center;  /* recomendado */
}

form label[for="gen"] { /* recomendado */
	justify-self: left;
	padding: 10px 0;
	display: grid;
	place-items: center;
	grid-template-columns: 1fr 40px;
	grid-template-rows: 40px;
}

input[type="radio"]{
    width: 20px;
    height: 20px;
    place-self: stretch;
    align-self: center;
}

input[type="checkbox"]{
    grid-column: 2 / 5;
    width: 440px;
    height: 440px;
}
select{
    grid-column: 2 / 5;
    
}
input[type="submit"], input[type="reset"], input[type="color"], button {
	margin: auto;
	width: 100%;
	height: 48px;
    
}

table {
	margin: 20px auto;
    border-style: hidden;
    border-collapse: collapse;
    width: calc(100vw - 100px);
    max-width: 1000px;
    min-width: 600px;	
    
    border: 1px solid #10303a40;
	background: linear-gradient(0deg, #10303a07 30%, #10303a1c 100%);
	box-shadow: 2px 3px 6px #5f788060, -4px -2px 12px #a7c1c440;
 	color: #000;
}

td {
    border: 1px solid #99a;
    text-align: center;
    padding: 18px;
    white-space: nowrap;
    border: transparent;
}

th {
    color: rgb(0, 0, 0);
	text-shadow: 0px 1px 3px #000000;
    background: linear-gradient(0deg, hsl(240, 0%, 50%) 0%, hsl(240, 0%, 37%) 100%);
    text-align: center;
    padding: 8px;
    top: 0px;
}

thead {
    border: 1px solid rgb(226, 72, 247);

}
tbody tr {
    border: 1px solid #ff10df40;

}

button, input[type="button"], input[type="reset"] {
    color: white;
	text-shadow: 0px 0px 8px #ff1bf4;
    background-color: rgb(255 0 178 / 67%);
    border: 1px solid rgb(248, 95, 202);
    text-align: center;
    padding: 8px;
    top: 0px;
}

button:hover, input[type="button"]:hover, input[type="reset"]:hover {
    background: linear-gradient(0deg, rgb(205, 43, 255) 0%, rgb(64, 64, 64) 100%);
    transition: 0.3s all ease-in-out;
}

button:active, input[type="button"]:active, input[type="reset"]:active {
    background: linear-gradient(0deg, rgb(184, 25, 199) 0%, rgb(32, 32, 32) 100%);
    transition: 0.3s all ease-in-out;
}