* {
   margin: 0;
   padding: 0;
   font-family: Arial, Helvetica, sans-serif;
}

header {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(gettyimages-1354937085.jpg);
   height: 100vh;
   background-size: cover;
   background-position: center;
}


ul {
   list-style-type: none;
   float: right;
}

ul li {
   display: inline-block;
   margin-top: 25px;
   padding: 10px;
}

ul li a {
   text-decoration: none;
   color: white;
   padding: 10px 30px;
   border: 1px solid transparent;
}

ul li a:hover {
   background-color: white;
   color: black;
   transition: 0.6s ease;
}

.main {
   max-width: 1200px;
   margin: auto;
}

ul li.active a {
   background-color: white;
   color: black;
}

.title {
   position: absolute;
   top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.title h1 {
   color: antiquewhite;
   font-size: 50px;
   text-align: center;
   margin-bottom: 20px;
}

.title p {
   color: white;
   font-size: 20px;
   text-align: center;
}

table,
tr,
td {
   border: 1px solid rgba(0, 0, 0, 0.397);
   border-collapse: collapse;
   min-height: 6cm;
   min-width: 3cm;
   padding: 20px;
   background-color: rgba(248, 248, 255, 0.171);
}

.t1 {
   margin-top: 1cm;
   margin-left: 1cm;
}

button {
   padding: 15px 25px;
   background-color: rgb(44, 65, 131);
   color: white;
   font-size: 20px;
}

button:hover {
   box-shadow: 0px 0px 20px black, 0px 0px 10px white;
   transform: scale(1.1);
}

main {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(hx4LX5.webp);
   background-size: cover;
   background-position: center;
   display: flex;
   flex-direction: column;
   align-items: center;
}