* {
    color: rgb(241, 244, 246);
    font-weight: 500;
    transition-duration: 0.3s;
}

.padd {
    padding-top: 3%;
}

#headshot {
    width: 90%;
    margin-top: 10%;

      transition: transform .3s ease, filter .3s ease, box-shadow .3s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);

}

#flex::after{
  content: "";
  position: absolute;
  inset: -14px;                /* a bit bigger than the img */
  border-radius: 16px;
  background: radial-gradient(120% 120% at 35% 25%,
              rgba(255,255,255,.45),
              rgba(106,169,255,.35) 35%,
              transparent 60%);
  filter: blur(22px) saturate(140%);
  opacity: 0;
  transform: scale(.98);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

#flex::after{
  content: "";
  position: absolute;
  inset: -14px;                /* a bit bigger than the img */
  border-radius: 16px;
  background: radial-gradient(120% 120% at 35% 25%,
              rgba(255,255,255,.45),
              rgba(106,169,255,.35) 35%,
              transparent 60%);
  filter: blur(22px) saturate(140%);
  opacity: 0;
  transform: scale(.98);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

#flex:hover #headshot,
#flex:focus-within #headshot{
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.06) contrast(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

#flex:hover::after,
#flex:focus-within::after{
  opacity: 1;
  transform: scale(1);
}


::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #00000041;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #013d7d62;
    border-radius: 2%;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #013d7daf;
}

body {
    background-color: #00000036;
    overflow: none;


}


#center {
    margin-top: 8%
}

i:hover {
    color: rgb(255, 255, 255);
    text-shadow: 0 0 1px rgb(255, 255, 255), 0 0 5px #ffffff;
}
i{
    text-shadow: none;
}

iframe {
    border: 0px;
}

div.centerr > i:hover{
    color: rgb(255, 255, 255);
}

.align-center {
    text-align: center;
}

.justify {
    text-align: justify;
}

.one-third {
    width: 30%;
}

.big-icon {
    font-size: 30px;
    padding: 10%
}

.block {
    display: block;
}

#mag {
    width: 15px
}

#facebook, #instagram {
    visibility: hidden;
    /* display: none; */
}



a {
    color: rgb(46, 46, 180);
    text-shadow: 0 0 1px rgb(88, 88, 245), 0 0 5px #0000FF;

    font-weight: 600;
}

a:hover {
    color: rgb(14, 14, 117);
    text-decoration: none;
    font-weight: 900;
}

@media (min-width:768px) {
    .hide{
        display: none;
    }
    .hide2{
        display: none;
    }


}


@media (max-width:768px) {
    .centerr {
        text-align: center;
    }
    .hide2{
        display: none;
    }
    .padd{
        width:100%;
    }
    .one-third {
        width: 10%;
    }
    .big-icon{
        padding:7.5%;
    }
    #flex{
        margin-left: 1%;
        margin-top:3%;
    }

}