#silence, #void, #dark, #absence, #team{
    position: relative;
    left: 5vw;
}
#silence h3, #void h3, #dark h3, #absence h3{
    position: relative;
    left: 150px;
    top: 100px;
}
#silence1, #void1, #dark1, #absence1, #about1{
    position: absolute;
    width: 87px;
    height: 87px;
    border-radius: 100px;
    left: 13px;
    background-image: url('../img/silence1.jpg');
    background-position: center;
    background-size: 100%;
    border: 11px solid #FFFAD0;
}
#silenceLink1-2, #voidLink1-2, #darkLink1-2, #absenceLink1-2, #aboutLink1-2, #aboutLink2-3, #aboutLink3-4, #aboutLink3-5, #aboutLink5-6{
    background-color: #FFFAD0;
    height: 3px;
    width: 250px;
    transform: rotate(43deg);
    position: relative;
    top: 110px;  
}
#silence2, #void2, #dark2, #absence2, #about2{
    position: absolute;
    background-color: #FFFAD0;
    width: 87px;
    height: 87px;
    border-radius: 100px;
    left: 160px;
    top: 175px;
    background-image: url('../img/silence2.jpg');
    background-position: center;
    background-size: 200%;
    border: 11px solid #FFFAD0;
}
#silenceLink2-3, #voidLink2-3, #darkLink2-3, #absenceLink2-3{
    background-color: #FFFAD0;
    height: 3px;
    width: 150px;
    position: relative;
    top: 180px;
    left: 75px;
}
#silence3, #void3, #dark3, #absence3, #about3, #about4, #about5, #about6{
    position: absolute;
    background-color: #FFFAD0;
    width: 87px;
    height: 87px;
    border-radius: 100px;
    left: 13px;
    top: 175px;
    background-image: url('../img/silence3.jpg');
    background-position: center;
    background-size: 150%;
    border: 11px solid #FFFAD0;
}
.bubbles div:hover{
    animation: 1s onHover;
    animation-fill-mode: forwards;
}

#void h3{
    left: 925px;
}
#void1{
    left: 750px;
    background-image: url('../img/void1.jpg');
    background-size: 150%;
}
#void2{
    left: 950px;
    background-image: url('../img/void2.jpg');
}
#void3{
    left: 1200px;
    top: 150px;
    background-image: url('../img/void3.jpg');
}
#voidLink1-2{
    left: 750px;
    transform: rotate(35deg);
    top: 100px;
}
#voidLink2-3{
    left: 975px;
    width: 250px;
    top: 170px;
    transform: rotate(-5deg);
}

#dark{
    top: 200px;
}
#dark h3{
    left: 400px;
    top: 75px;
}
#dark1{
    background-image: url('../img/dark1.jpg');
}
#dark2{
    top: 35px;
    left: 250px;
    background-image: url('../img/dark2.jpg');
}
#dark3{
    top: -50px;
    left: 500px;
    background-image: url('../img/dark3.png');
}
#darkLink1-2{
    transform: rotate(-5deg);
    top: 45px;
    left: 20px;
}
#darkLink2-3{
    top: -10px;
    transform: rotate(-20deg);
    width: 250px;
    left: 300px;
}

#absence{
    left: 950px;
    top: 150px;
}
#absence h3{
    left: 75px;
}
#absence1{
    left: 300px;
    background-image: url('../img/absence1.jpg');
    background-size: 175%;
}
#absence2{
    background-image: url('../img/absence2.jpeg');
}
#absence3{
    background-image: url('../img/absence3.png');
    background-size: 140%;
}
#absenceLink1-2{
    transform: rotate(-45deg);
    left: 150px;
}

/* 
///////////////
//////////////
/// ABOUT /// 
////////////
///////////
*/

#about1{
    top: 50px;
    left: 570px;;
    background-image: url('../img/max.jpg');
    background-size: 100%;
}
#max1{
    position: relative;
    top: 75px;
    left: -850px;
    text-align: right;
}
#aboutLink1-2{
    transform: rotate(90deg);
    width: 150px;
    top: -200px;
    left: 540px;
}
#about2{
    top: 200px;
    left: 570px;
    background-image: url('../img/hen.jpg');
    background-size: 100%;
}
#hen{
    position: relative;
    top: 175px;
    left: 685px;
}
#aboutLink2-3{
    transform: rotate(90deg);
    width: 150px;
    top: -50px;
    left: 540px;
}
#about3{
    left: 570px;
    top: 350px;
    background-image: url('../img/pau.jpg');
    background-size: 100%;
}
#pau{
    position: relative;
    top: 265px;
    left: -850px;
    text-align: right;
}
#aboutLink3-4{
    transform: rotate(-55deg);
    width: 150px;
    top: 150px;
    left: 475px;
}
#about4{
    left: 470px;
    top: 500px;
    background-image: url('../img/aly.jfif');
    background-size: 100%;
}
#aly{
    position: relative;
    top: 350px;
    left: 575px;
}
#aboutLink3-5{
    transform: rotate(25deg);
    width: 200px;
    top: 83px;
    left: 625px;
}
#about5{
    left: 770px;
    top: 425px;
    background-image: url('../img/max2.jpg');
    background-size: 100%;
}
#max2{
    position: relative;
    top: 225px;
    left: -640px;
    text-align: right;
}
#aboutLink5-6{
    transform: rotate(20deg);
    width: 200px;
    top: 140px;
    left: 800px;
}
#about6{
    left: 950px;
    top: 475px;
    background-image: url('../img/sam.jpg');
    background-size: 100%;
}
#sam{
    position: relative;
    top: 220px;
    left: 1050px;
}

@keyframes onHover{
    from { width: 87px; height: 87px; }
    to { width: 130px; height: 130px; }
}