body::before {
  content:"";
  position:fixed;
  top:-20px;
  left:-30px;
  width:105%;
  height:105%;
  background-image:url("images/background3.jpg");
  background-size:cover;
  background-position:center;
  filter:blur(12px);
  opacity:.92;
  z-index:-1;
  background-color:rgba(0,0,0,.5);
}

/*The menu features*/
.menu {
  background:linear-gradient(
    to right,
    rgba(47,79,79,.3) 0%,
    rgba(47,79,79,1) 15%,
    rgba(47,79,79,1) 85%,
    rgba(47,79,79,.3) 100%
  );
  text-align:center;
  overflow:hidden;
  gap:75px;
  display:flex;
  justify-content:center;
  padding:15px;
  margin:0px;
  font-size:30px;
  text-decoration:none;
  z-index:10;
  position:relative;
  box-shadow:5px 5px 5px rgba(0,0,0,.5);
}

.menu a {
  text-decoration:none;
  opacity:50%;
  color:whitesmoke;
  transition:color 0.2s ease, opacity 0.2s ease;
  width:100px;
  padding-top:9px;
  text-shadow:2px 2px 2px rgba(0,0,0,.8);
  text-align:center;
}

.menu a:hover {
  color:salmon;
  opacity:75%;
}

.menu a.active {
  color:whitesmoke;
  opacity:85%;
}

.menu a.active:hover {
  color:salmon;
}


html, body {
  margin:0;
  padding:0;
  font-family:'Courier New', monospace;
  position:relative;
}

.horizontal-line {
  width:100%;
  height:2px;
  z-index:15;
  position:absolute;
  top:69px;
  background-color:black;
}

.name {
  font-family: 'Courier New', cursive;
  text-decoration:underline;
  opacity:90%;
  color:whitesmoke;
  transition:color 0.2s ease, opacity 0.2s ease;
  width:320px;
  padding-top:4px;
  padding-bottom:0px;
  text-shadow:2px 2px 2px rgba(0,0,0,.8);
  font-size:38px;
  margin:0px;
  text-align:center;
}

.horizontal-box {
  width:100%;
  min-height:755px;
  height:100%;
  z-index:0;
  position:absolute;
  top:50px;
  left:50%;
  background:linear-gradient(
    to right,
    rgba(29,48,48,0) 0%,
    rgba(29,48,48,1) 20%,
    rgba(29,48,48,1) 80%,
    rgba(29,48,48,0) 100%
  );
  transform:translateX(-50%);
}

.main-content {
  display:flex;
  flex-wrap:wrap;
  position:relative;
  z-index:10;
  flex-direction:row;
  align-items:flex-start;
  justify-content:center;
  gap:25px;
  padding:100px;
}

.me {
  max-width:350px;
  width:100%;
  height:auto;
  z-index:11;
  box-shadow:5px 5px 5px rgba(0,0,0,.5);
  padding:4px;
  border:1px solid whitesmoke;
  background-color:rgba(0, 0, 0, 0);
}

.about-me {
  font-size:18px;
  color:whitesmoke;
  max-width:700px;
  width:100%;
  z-index:11;
  line-height:1.5;
}

.about-title {
  text-decoration:underline;
  z-index:11;
}

.horizontal-line {
  background-color:whitesmoke;
  height:1px;
  width:1150px;
  top:91.5%;
  left:50%;
  transform:translateX(-50%);
  z-index:11;
}

.links {
  display:flex;
  position:relative;
  z-index:11;
  align-items:center;
  flex-direction:row;
  justify-content:center;
  gap:50px;
  padding:25px;
  top:-50px;
}

.icon {
  max-width:100px;
  height:auto;
}

.contact-info {
  color:whitesmoke;
  line-height:1.5;
}

@media screen and (max-width: 1275px) {
  .main-content {
    display:flex;
    flex-wrap:wrap;
    position:relative;
    z-index:10;
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    gap:25px;
    padding:100px 20px;
  }
  .horizontal-box {
    width:100%;
    min-height:740px;
    height:105%;
    z-index:0;
    position:absolute;
    top:50px;
    left:50%;
    background:linear-gradient(
      to right,
      rgba(29,48,48,1) 0%,
      rgba(29,48,48,1) 20%,
      rgba(29,48,48,1) 80%,
      rgba(29,48,48,1) 100%
    );
    transform:translateX(-50%);
  }
  .horizontal-line {
    background-color:whitesmoke;
    height:1px;
    width:100%;
    top:95.5%;
    left:50%;
    transform:translateX(-50%);
    z-index:11;
  }
}