@font-face {
  font-family: "BalooTamma2";
  src: url("../fonts/BalooTamma2.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  font-size: 16px;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  float: left;
}

body {
  background: #F0EFED;
  background-image: linear-gradient(to bottom, #E5E4E5, #C2C1C2);
  font-family: "ProximaNova-Regular", Helvetica neue, sans-serif;
}

.container {
  max-width: 350px;
  width: 100%;
  height: 100%;
  position: relative;
  margin: auto;
}

.card-profile {
  float: left;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 500px;
  background: #fff;
  border-radius: 10px;
  z-index: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.card-profile:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  box-shadow: 0 36px 64px -34px black, 0 16px 14px -14px rgba(0, 0, 0, 0.6), 0 22px 18px -18px rgba(0, 0, 0, 0.4), 0 22px 38px -18px black;
  transform: scaleX(0.7) scaleY(1.3) translateY(-15%);
  z-index: -1;
  opacity: 0.25;
}

.card-profile_visual {
  height: 68%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(to bottom, #3b3c3f, #263d85, #172551);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card-profile_visual:before,
.card-profile_visual:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background: url('./profile.jpg') no-repeat center center/cover;
  opacity: 0.75;
  mix-blend-mode: lighten;
}

.card-profile_visual:before {
  filter: grayscale(100%);
}

/* .card-profile_visual:after {
  z-index: 2;
  mix-blend-mode: lighten;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAABUUlRERkRMSkxMTkxEQkT490VOAAAAAXRSTlMAQObYZgAAAoxJREFUOI0dlImR5DAIRRXDbgaAEwCcAOAEZE/+qczTdFf1JQH/otd4SJWWf5+m7GjR28Z0TZW38pLjj1aWJl9eWaGfaCq/y4y012hPhqySnnbXe7Q6ulK6nZeV5bpjhyo9xLj7apvFSk3zSXEmtEZmNngYbhWhkmKne7XalnDrYcZMNwMlwuQuj/ezS2dJmpjEFwLe7T7zWE0zo22icr4dNZnfOLUp72rNcA8vcx3Y8r3MZpYOPSAC6mfSGRQBD1sZyFPd9b0mohN70CQTSa6+Ik15RifUaCjWq6zp2/9T697e5VsRKGUl4I4WnWpOxVAI7FoMEsrp2gLUCgH9J84B8o1Sgrb+0auEdrpocIQzU94mHBmMuliIlFemt0s8w3mUe0ssLnaecjllDunTW20d33ZxkUOoSIJbrWxZiHjdhV190e5AzjwONn4ASvTCC5CcKfywuFMBe1QpYjG0x38nJYAcR26k54o8YiXqeC7Hcth54lfwSPlHOBfOE9F0rGguJsr1V+GroafdEC+3qK2HX8Qsf0lWEwX0J29Pkh2lmFB33wKZBB8Rlhpj5AVBd6mTMYBC4cZzKNb6SygJJ3dnNIqkHnuwVgvaoCFcomyI6c+QEvxq0tKEiQCe9QoS18kaKFMl7wqEqJ2A6XkQMejE1dEcu7G/g1JRmHMOkjGIvqXHErayVgdJIIJsGBw1LzaijlFdExOIInKEOZ/oReBCsDlepSPBvRCAj/n10gfjFIml8rVSUDz2ISKeDxmFuviLVSzJOCqxtXToeJpNJr9Pnij+LQ4A/cgXDyuATWyPkrJ1En1cvPk3sB8VfMLIvwO5CKu+uC1OFNLvvoe0h97ieKNjsUkc/zQ6V/0CAoboTZwdKY4AAAAASUVORK5CYII=);
  opacity: 0.0;
} */

.card-profile_user-infos {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  margin: auto;
  top: calc(68% - 100px);
  color: #fff;
  text-align: center;
}

.card-profile_user-infos a {
  width: 64px;
  height: 64px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #2196F3;
  background-image: linear-gradient(#2196F3, #1565C0);
  display: block;
  clear: both;
  margin: auto;
  border-radius: 100%;
  top: calc(500% + 66px);
  box-shadow: 0 2px 0 #0D47A1, 0 3px 10px rgba(13, 71, 161, 0.15), 0 0px 10px rgba(13, 71, 161, 0.15), 0 0px 4px rgba(0, 0, 0, 0.35), 0 5px 20px rgba(13, 71, 161, 0.25), 0 15px 40px rgba(13, 71, 161, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.card-profile_user-infos a:after {
  content: "";
  font-style: normal;
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("./telegram-icon.svg");
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center center;
  left: 0;
  top: 0;
}

.card-profile_user-infos .infos_name,
.card-profile_user-infos .infos_nick {
  display: block;
  clear: both;
  padding: 0.5em 0;
  padding-top: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 18px;
  top: -20px;
  font-weight: 800;
}

div.infos_name {
  font-size: 30px !important;
  font-weight: bold !important;
  text-align: center !important;
  margin-top: 15% !important;
  font-family: 'BalooTamma2' !important;
}

div.infos_nick {
  font-size: 20px !important;
  text-align: center !important;
  /* margin-top: 4% !important; */
  font-family: 'BalooTamma2' !important;
}

.card-profile_user-infos .infos_nick {
  top: 32px;
  font-size: 14px;
  font-weight: 300;
}

.card-profile_user-stats {
  background: #fff;
  float: left;
  width: 100%;
  height: calc(100% - 68% + 2px);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.card-profile_user-stats .stats-holder {
  position: absolute;
  width: 100%;
  top: calc(70% + 4em);
  display: flex;
}

.card-profile_user-stats .user-stats {
  flex: 1;
  text-align: center;
}

.card-profile_user-stats .user-stats strong {
  display: block;
  float: left;
  clear: both;
  width: 100%;
  color: #B3B1B2;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.card-profile_user-stats .user-stats span {
  font-size: 26px;
  color: #5E5E5E;
  padding: 0.18em 0;
  display: inline-block;
}