@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /*border: 1px solid red;*/
}

body {
  background-color: #211f3b;
  opacity: 1;
  background: radial-gradient(
      circle,
      transparent 20%,
      #211f3b 20%,
      #211f3b 80%,
      transparent 80%,
      transparent
    ),
    radial-gradient(
        circle,
        transparent 20%,
        #211f3b 20%,
        #211f3b 80%,
        transparent 80%,
        transparent
      )
      25px 25px,
    linear-gradient(#3d405b 2px, transparent 2px) 0 -1px,
    linear-gradient(90deg, #3d405b 2px, #211f3b 2px) -1px 0;
  background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
}

main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 50px;
}

h1 {
  color: #fff;
  z-index: 1000;
  font-family: "Rubik", sans-serif;
  letter-spacing: 2px;
}

.user {
  height: 120px;
  width: 120px;
  background-image: url(https://masikaabdoul.pages.dev/user.jpg);
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  z-index: 1000;
  margin: 10px;
}

.user-links {
  position: relative;
  z-index: 1000;
}

.user-links ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.user-links ul li {
  width: 120pt;
  height: 40pt;
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-links ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: #fff;
  width: 120pt;
  height: 40pt;
  font-size: 12pt;
  border: 1px solid #fff;
  border-radius: 5px;
  font-family: "Poppins", sans-serif;
  letter-spacing: 2px;
  backdrop-filter: blur(100px);
}

.user-links ul li a:hover {
  border: none;
  background-color: #3d405b;
  color: #4dccbd;
}

#myPopup {
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  width: 70%;
  height: 60%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(50px);
  border: 1px solid #31ffe7;
  padding: 25px;
  z-index: 9999;
}

.popheader{
    display: grid;
    place-items: center;
    color: #31ffe7;
    border-bottom: 1px solid #31ffe7;
    padding: 0 0 10px;
    margin: 0 0 10px;
    font-family: "Rubik", sans-serif;
    font-size: 15pt;
    font-weight: 700;
}

.popbody{
    text-justify: justify;
    color: #abb2f0;
    font-size: 12pt;
    letter-spacing: 1px;
    font-family: "Poppins", sans-serif;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-2-25 23:53:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-fwd-center
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}