@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/Comfortaa-Light.eot") format("embedded-opentype"),
    url("../fonts/Comfortaa-Light.woff") format("woff"),
    url("../fonts/Comfortaa-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --ion-safe-area-top: 20px;
  --ion-safe-area-bottom: 22px;
}
* {
  font-family: "Comfortaa" !important;
  color: #000;
}

.bgcolor {
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
}

.profilepic {
  width: 11em;
  height: 11em;
  border: #fff solid 5px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
  margin-bottom: 10px;
  display: block;
}

ul {
  list-style-type: none;
  vertical-align: middle;
}

a {
  color: #000;
  text-decoration: none !important;
}

/* Style the tab */
.tab {
  border-radius: 10px;
  background-color: #1552A5;
  color: #fff;
}

/* Style the tab content */
.tabcontent {
  display: none;
  width: 100%;
  margin: -1em 0 0 0;
  font-size: 12px;
  color:#fff;
}

.tablink{
  padding: 5px 0 5px 0;
  color:#fff;
}

.profiletab {
  margin: -1em 0 0 0;
  padding: 0;
}

.selector {
  backdrop-filter: blur(10px);
  padding: auto;
  background: transparent;
  border-radius: 10px;
  box-shadow: 10px 10px 10px #2d302f;
}

/* @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .selector {
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
        }
      } */

.btn-selector {
  backdrop-filter: blur(5px);
  background: transparent;
  border: solid 2px #1552A5;
  width: 100%;
  height: 5em;
  border-radius: 10px;
  /* box-shadow: 25px 25px 50px #1b1c1b, 500px 500px 50px #2d302f; */
}

.gallery-img {
  border-radius: 10px;
}

.names {
  text-align: center;
}

.profilecard h3 {
  color: #fff;
}

.banner {
  margin: 0 0 -20px 0;
}

ion-segment-button {
  --indicator-color: #ffffff30;
}