/* Remove default spacing */
body {
  margin: 0;
  background-image: url("background.avif");
  background-size: cover;
  background-position: center;
}

/* Full-page grid */
.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 80px 1fr 80px;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, rgba(73, 73, 73, 0.507) 10%, rgba(206, 206, 206, 0.507), rgb(73, 73, 73, 0.507) 10%);
  backdrop-filter: blur(5px);

  color: rgb(0, 0, 0);
}

/* Boxes */
.box {
  background: #6362621c;
  border: 1px solid rgba(255, 255, 255, 0);
  box-sizing: border-box; /* keeps borders inside grid */
}

/* Positioning */
.top-left {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  align-items: center;
  gap: 10px;           
  background-color: rgba(196, 196, 196, 0.651);
  border-radius: 0px 0px 50px 0px;
}
.Header1 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding-left: 15px;
    margin-top: 45px;
    font-size: 60px;
    color: rgb(17, 17, 17);
    text-shadow: 5px 1px 3px rgba(107, 107, 107, 0.7);
}
.Header1info {
    padding-left: -1px;
    margin-top: 31px;
    font-family: "Special Elite", system-ui;
    font-weight: 320;
    font-style: normal;
    color: rgb(17, 17, 17);
    text-shadow: 1px 1px 3px rgba(107, 107, 107, 0.7);
}
.top-right {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  height: 34px;
  background-color: rgba(196, 196, 196, 0.651); 
}

.middle {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  color: rgb(216, 216, 216);
}

.bottom {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background-color: rgba(0, 0, 0, 0.349);
  align-content: center;
  margin-top: 40px;
  height: 30px;
}
.copyright {
  font-size: 20px;
  text-align: center;
  margin-top: 1px;
  color: rgb(122, 122, 122);
}
.Main {
  width: 30px ;
  height: 30px ;
  padding-left: 12px;
}
.Login {
  width: 30px ;
  height: 30px ;
  padding-left: 16px;

}
.Contact {
  width: 30px ;
  height: 30px ;
  padding-left: 15px;
}