@import "compass/css3";
@import url("https://fonts.googleapis.com/css?family=Oswald|Roboto");

body {
    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Gradient */
    background-image: url('3.jpg'); /* Fallback to image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Stays in place while scrolling */
    background-size: cover;
    background-position: center;
    height: 100vh;
  overflow: hidden;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

#canvas, .background-svg, .container-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.container-info {
    position: absolute; /* Position it relative to the container */
    bottom: 20px; /* Push it down near the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center-align horizontally */
    text-align: center; /* Ensure the text is centered */
    z-index: 2; /* Keep it above other elements */
  }

h1 {
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 2px;
  color: #ffee00;
  text-align: left;
  margin: 150px 37px 47px;

  .info {
    font-weight: 300;
    display: block;
    color: #e2e3f1;
    font-size: 16px;
    letter-spacing: 0;
}
}

.box {
  text-align: right;
  padding: 0 40px;
  margin: 60px 0 0 0;

  .box-item {
    display: inline-block;
    color: #fff;
    font-size: 30px;
    padding-right: 15px;
    &:hover {
      opacity: 0.6;
    }
  }
}

.table {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

.container {
  position: relative;
  width: 400px;
  height: 400px;
  max-width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px); /* Applies the blur effect */
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 1;  /* Keeps the container behind the profile photo */
}

#Triangle-1 {
  -webkit-animation: box 42.5s infinite;
  animation: box 42.5s infinite;
}

#Triangle-2 {
  -webkit-animation: box2 12.5s infinite;
  animation: box2 12.5s infinite;
}

.profile-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 5px solid #8565e4;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.3);
  position: absolute; /* Allow precise positioning */
  top: 5px; /* Move it 20px down from the top */
  left: 50%; /* Center horizontally relative to the container */
  transform: translateX(-50%); /* Center-align horizontally */
  z-index: 3; /* Ensure it remains on top */
}

footer {
  margin-top: 20px;
  font-size: 14px;
  color: #777;
  position: absolute;
  top: 600px;
  left: 50%;
  transform: translateX(-50%);
}