html {
   font-size: 1em;
}

body {
   background-image: url("./Assets/Bgnd.png");
   background-repeat: no-repeat;
   background-position: top;
   font-family: Arial;
}

h1,
h2,
h3 {
   text-align: left;
   color: black;
}

.hlbox {
   width: 1024px;
   height: 111px;
   margin: 0px auto;
   display: grid;
   align-items: center;
   justify-content: center;
}

.hl1 {
   width: 700px;
   text-align: center;
   font-size: 2em;
   font-weight: bold;
}

.hl2 {
   width: 700px;
   text-align: center;
   font-size: 1.5em;
   font-weight: bold;
}

.screen {
   width: 1024px;
   margin: 0px auto;
   display: flex;
   justify-content: center;
}

.content {
   width: 700px;
}

.answer {
   width: 500px;
}

table {
   border: 2px;
   width: 100%;
   font-family: Arial;
}

p {
   font-size: 1em;
   text-align: justify;
}

table {
   border: 2px;
   width: 100%;
   font-family: Arial;
}

td {
   font-size: 1em;
}

th {
   background-color: #f2f2f2;
   color: #333;
   padding: 5px 15px;
   text-align: left;
   border-bottom: 2px solid #ddd;
}

td {
   padding: 5px 15px;
   border-bottom: 1px solid #eee;
}

.end-of-family {
   font-weight: bold;
   text-align: center;
   color: red;
}

button {
   background-color: hsla(220, 47%, 68%, 0.902);
   font-weight: bold;
   font-size: 1em;
   color: yellow;
   padding: 5px 5px 5px 5px;
   cursor: pointer;
   box-shadow: 3px 3px 3px rgb(204, 142, 142);
   border-radius: 5px;
   border-width: 0px;
}

button:hover {
   background-color: green;
}

.recherche {
   width: 200px;
   height: 30px;
}

details {
   cursor: pointer;
}

.formular {
   background-color: hsla(220, 47%, 68%, 0.902);
   box-shadow: 2px 2px 2px grey;
}

.box1col-center {
   padding: 10px;
   align-items: center;
   text-align: center;
}

.box1col-left {
   padding: 10px;
   align-items: start;
   text-align: left;
}

.box2cols {
   display: grid;
   gap: 10px;
   grid-template-columns: 350px 350px;
   padding: 10px;
}

.box3cols {
   display: grid;
   gap: 10px;
   grid-template-columns: 219px 219px 219px;
   padding: 10px;
}

.box4cols {
   display: grid;
   gap: 10px;
   grid-template-columns: 37% 37% 10% 15%;
   padding: 10px;
}

.exitbox {
   padding: 10px;
   text-align: center;
   background-color: rgba(255, 153, 153, 0.902);
   box-shadow: 2px 2px 2px grey;
}

.repeatbox {
   padding: 10px;
   text-align: center;
   background-color: rgba(255, 239, 153, 0.902);
   box-shadow: 2px 2px 2px grey;
}

.errorbox {
   padding: 10px;
   text-align: center;
   font-weight: bold;
   color: black;
   background-color: rgba(255, 0, 0, 0.902);
   box-shadow: 2px 2px 2px grey;
}

.boxhead {
   grid-column-start: 1;
   grid-column-end: 4;
   font-weight: bold;
   color: black;
}

.item1 {
   grid-column-start: 1;
   color: white;
}

.item2 {
   grid-column-start: 2;
   color: white;
}

.item3 {
   grid-column-start: 3;
   color: white;
}

.item4 {
   grid-column-start: 4;
   color: white;
}