/* Media query for the entire file since animations are only for tablets and larger */
@media screen and (min-width:600px) {
.bubble .title {
    animation-name: grow;
    animation-duration: .1s;
    animation-fill-mode: forwards;
}

/**********************
*        HOVER        *
*---------------------*
*  Triggered when a   *
*   user's mouse is   *
*      a bubble       *
**********************/
/* General CSS for bubbles */
.bubble:hover {
    background-color: #FFCB05;
}

.bubble:hover > .title {
    border-radius: 0px;
    top: 50%;
    transform: translateY(-50%);
    shape-outside: circle();
    clip-path: circle();
    float: left;
    margin-right: 1em;
    padding: 3em;
    animation-name: shrink;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.bubble:hover >  .title h2 {
    visibility: hidden;
}
.bubble:hover > h2 {
    transition: .5s visibility .25s, .5s font-size ease .25s;
    position: relative;
    left: -48.4%;
    top: 42%; 
    visibility: visible;
    font-size: 18px;
}
.bubble:hover > ul {
    transition: .5s visibility, .5s font-size ease .25s;
    visibility: visible;
    font-size: 16px;
}

/* CSS measurements to center each specific bubble */
#skills:hover > h2 {
    left: -50.4%;
}
#skills:hover > .title {
    display: block;
    margin: 0em 2.5em -.5em 0em;
}
#skills:hover > ul {
    top: 50%; 
    transform: translate(0, -50%);
    margin-top: -15%;
}

#languages:hover > h2 {
    display: block;
    left: -50%;
}
#languages:hover > .title {
    display: block;
    margin: 0em 1.5em 1.5em 0em;
}
#languages:hover > ul {
    display: block;
    top: 50%; 
    transform: translate(5%, -40%);
    margin-top: -20%;
    margin-left: 40%;    
}

#technologies:hover > h2 {
    display: block;
    left: -50%;
}
#technologies:hover > .title {
    display: block;
    margin: 0em 1.5em 1.5em 0em;
}
#technologies:hover > ul {
    display: block;
    top: 50%; 
    transform: translate(0, -33%);
    margin-top: -27.5%;
}

#libraries:hover > h2 {
    display: block;
    left: -48.8%;
}
#libraries:hover > .title {
    display: block;
    margin: 0em 1.5em 0em 0em;
}
#libraries:hover ul {
    display: block;
    top: 50%;
    transform: translate(10%, -35%);
    margin-top: -30%;
}

/**********************
*        FOCUS        *
*---------------------*
*  For accessibility  *
* Allows users to tab *
*  through the page   *
*   with animations   *
**********************/
/* General CSS for bubbles */
.bubble:focus {
    background-color: #FFCB05;
}

.bubble:focus > .title {
    border-radius: 0px;
    top: 50%;
    transform: translateY(-50%);
    shape-outside: circle();
    clip-path: circle();
    float: left;
    margin-right: 1em;
    padding: 3em;
    animation-name: shrink;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.bubble:focus >  .title h2 {
    visibility: hidden;
}
.bubble:focus > h2 {
    transition: .5s visibility .5s, .5s font-size ease .25s;
    position: relative;
    left: -48.4%;
    top: 42%; 
    visibility: visible;
    font-size: 18px;
}
.bubble:focus > ul {
    visibility: visible;
    font-size: 16px;
}

/* CSS measurements to center each specific bubble */
#skills:focus > h2 {
    left: -50.4%;
}
#skills:focus > .title {
    display: block;
    margin: 0em 2.5em -.5em 0em;
}
#skills:focus > ul {
    top: 50%; 
    transform: translate(0, -50%);
    margin-top: -15%;
}

#languages:focus > h2 {
    display: block;
    left: -50%;
}
#languages:focus > .title {
    display: block;
    margin: 0em 1.5em 1.5em 0em;
}
#languages:focus > ul {
    display: block;
    top: 50%; 
    transform: translate(5%, -40%);
    margin-top: -20%;
    margin-left: 40%;
}

#technologies:focus > h2 {
    display: block;
    left: -50%;
}
#technologies:focus > .title {
    display: block;
    margin: 0em 1.5em 1.5em 0em;
}
#technologies:focus > ul {
    display: block;
    top: 50%; 
    transform: translate(0, -34%);
    margin-top: -15%;
}

#libraries:focus > h2 {
    display: block;
    left: -48.8%;
}
#libraries:focus > .title {
    display: block;
    margin: 0em 1.5em 0em 0em;
}
#libraries:focus > ul {
    display: block;
    top: 50%; 
    transform: translate(5%, -40%);
    margin-top: -10%;
    margin-left: 40%;
}

/**********************
*    REDUCED MOTION   *
**********************/
@media screen and (prefers-reduced-motion: reduce) {
    .bubbles h2 {
        transition: none;
    }
    .bubbles ul {
        transition: none;
    }
    * {
        animation-duration: 0s !important;
    }
}
/**********************
*      ANIMATIONS     *
*---------------------*
*  Used for effects   *
*   too complex for   *
*  normal transitions *
**********************/
@keyframes shrink {
    from {
        width: 300px;
        height: 300px;
        /* background-color: #00274C; */
    }
    to{
        /* background-color: rgb(249, 224, 0); */
        width: 150px;
        height: 136.7px;
    }
}

@keyframes grow {
    from{
        /* background-color: rgb(249, 224, 0); */
        width: 150px;
        height: 136.7px;
        top: 50%;
        transform: translateY(-50%);
        float: left;
        margin-right: 1em;
        padding: 3em;
    }
    to {
        width: 300px;
        height: 300px;
        /* background-color: #00274C; */
    }
}

}