/* Remove default spacing */
body {
  margin: 0;
  background-image: url("images/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;
  backdrop-filter: blur(1.7px);

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

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

/* Positioning */
.top-left {
  display: flex;
  flex-direction: row;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  border: 3px solid rgb(34, 34, 34);
  background-color: #00000065;
  backdrop-filter: blur(5px);
}
.Main {
  color: rgb(231, 231, 231);
  font-size: 55px;
  margin-top: 6px;
}

.top-right {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 3px solid rgb(32, 32, 32);
  background-color: #00000065;
  backdrop-filter: blur(5px);
  margin-top: -25px;
}
.buttons {
  padding: 2px;
  width: 200px;
  height: 45px;
  font-size: 29px;
  font-weight: 200;
  border: 3px solid rgb(65, 65, 65);
  background-color: rgba(75, 75, 75, 0.747);
  color: rgb(219, 219, 219);
  backdrop-filter: blur(2px);
  cursor: pointer;
  border-radius: 12px;
  margin-right: 12px;
  position: relative;
  top: 11px;
  left: 240px;
}
.Visits {
  color: rgb(207, 207, 207);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-style: normal;
  font-size: 46px;
}
.Bio {
  padding-left:6px;
  background-color: rgba(0, 0, 0, 0.438);
  backdrop-filter: blur(10px);  
  border: 2px solid rgb(49, 49, 49);
  border-radius: 10px 50px 50px 10px;
  max-width: 1235px;
  min-width: 900px;
  height: fit-content;
}
.h1bio {
  font-size: 40px;
  color: #e0e0e0;
}
.h2bio {
  font-size: 30px;
  color: #e0e0e0;
}
.Pbio {
  font-size: 25px;
  color: #c2c2c2;
}

.middle {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: row;
  color: rgb(216, 216, 216);
}
.Contact-Me {
  position: relative;
  left: 70px;
  padding-left:3px;
  background-color: rgba(0, 0, 0, 0.514);
  backdrop-filter: blur(10px);  
  border: 2px solid rgb(24, 24, 24);
  border-radius: 10px 10px 10px 10px;
  max-width: 700px;
  min-width: 500px;
  height: 430px;
}
.h1contact {
  position: relative;
  bottom: 6px;
  text-align:center;
  font-size:33px;
}
.bottom {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  background-color: #00000065;
  backdrop-filter: blur(5px);
  height: 100%;
}



.copyright {
  font-size: 22px;
  text-align: center;
  margin-top: 12px;
  color: rgb(209, 209, 209);
}
.Main {
  width: 30px ;
  height: 30px ;
  padding-left: 12px;
}
.Login {
  width: 30px ;
  height: 30px ;
  padding-left: 16px;

}
.Contact {
  width: 30px ;
  height: 30px ;
  padding-left: 15px;
}
.buttons:hover {
  background-color: rgba(92, 92, 92, 0.993);
  transform: scale(1.02);
  transition: all 0.1s ease;
}
.UwU {
  color: rgb(214, 209, 190);
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  border: solid rgba(105, 105, 105, 0.253);
}
.Picture {
  width: 700px;
}
.download {
  color: rgb(255, 255, 255);
  font-weight: 10;
}