@import "/css/reset.css";
@import "/css/fonts.css";
@import "/css/main.css";

#pfp {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.473);
}

#pfpheader {
    text-align: center;
}

#projectsheader {
    margin-top: 30px;
}

article {
    width: 100%;
    height: calc(100vh - 51px);
    background-color: transparent;
    padding: 0px;
    clip-path: none;
    box-shadow: none;
  }

  body{
    background-color: transparent !important;
  }

  header {
    background-color: rgba(0, 0, 0, 0.342) !important;
    backdrop-filter: blur(5px);
    border-bottom: none !important;
  }

.clickableImage {
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    width: 50px;
    height: 50px;
}

article > div > div {
    margin: 0;

    width: 100%;
}

article > div {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#main-bg {
    background-image: url("/media/main-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.frostedpanel {
    background: rgba(0, 0, 0, 0.295);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.473);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.247);

    width: 500px;
    border-radius: 10px;
    padding: 30px;
}

.frostedpanel > * {
    filter: none;
}

.flex-container {
    display: flex;
}

.rightdiv {
    flex: 1;
}

.leftdiv {
    margin-left: 20px;
}

.frostedtitle {
    filter: drop-shadow(0 0 7px rgb(0, 0, 0));
    font-size: 19.5px;
    position:relative;
    translate: 0px -30px;
    margin-bottom:-20px;
}

#socialslist {
    margin-top: 20px;
    padding: 20px;
    width: 520px;
}

#linkslist {
    margin-top: 20px;
    padding: 20px;
    width: 520px;
}

@media screen and (max-width:1024px) {
    .pfp{
      display: block;
    }
  
    article > div {
      width: 100%;
    }

    #linkslist, #socialslist {
        width: calc(100% - 45px);
        max-width: calc(100% - 45px);
    }

    .frostedpanel {
        width: calc(100% - 65px);
        max-width: calc(100% - 65px);
    }
  }