@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Jersey+10&family=Luckiest+Guy&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Science+Gothic:wght@100..900&display=swap');

#Shane {

        position: relative;
    color: white;
    border-radius: 5px;
    border: none;

    
    padding: 10px;
    margin: 10px;
    backdrop-filter: blur(10px);
    width: 90%;
    font-size: 20px;
    font-family: "Montserrat";
    transition: 0.3s;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

#Shane::before {
    border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../Freunde IMG/channels4_banner 1.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  transform: scale(1.1);
  z-index: -1;
}


#Rev {

        position: relative;
    color: white;
    border-radius: 5px;
    border: none;
    -webkit-text-stroke: 0px black;
    
    padding: 10px;
    margin: 10px;
    backdrop-filter: blur(10px);
    width: 90%;
    font-size: 20px;
    font-family: "Montserrat";
    transition: 0.3s;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

#Rev::before {
    border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../Freunde IMG/channels4_banner 2.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(3px);
  transform: scale(1.1);
  z-index: -1;
}

.fri {
  background-color: rgba(255, 255, 255, 0.068);
  
  border-radius: 20px;
}

.friendbtn {
transition: 0.3s;
}

.friendbtn:hover {
transition: 0.3s;
transform: scale(1.03);
}

.friendimg {
    position: absolute;
border-radius: 300px;
height: 100%;
border: 2px solid;
align-self: center;
left: 0px;
margin: 10px;
transform: scale(0.85);
}