.dropdownWrapper{
        position: relative;
        display: inline-block;
        margin: 15px 5px 10px;
        font-size: 12px;
        border-radius: 15px;
        cursor: pointer;
    }
    .dropdownTitle ,.dropdownButton{
        display: inline-block;
        padding: 7px 10px;
        height: inherit;
        font-size: inherit;
    }
    .dropdownTitle{
        margin-right: 2px;
        border-radius: 10px 0 0 10px;
    }
    .dropdownButton{
        border-radius: 0 10px 10px 0;
    }
    .dropdownTitleOpen{
        border-radius: 10px 0 0 0;
    }
    .dropdownButtonOpen{
        border-radius: 0 10px 0 0;
    }
    .dropdownLinks{
        font-size: inherit;
        position: absolute;
        width: 100%;
        z-index: 20;
        border-radius: 0 0 15px 15px;
        overflow: hidden;
    }
    .dropdownLinks a {
        font-size: inherit;
        float: none;
        color: white;
        padding: 5px 5px;
        text-decoration: none;
        display: block;
        text-align: center;
    }
    .hidden{
        display: none;
    }
    .filmography, .linkfilmography{
        background-color: #345;
        margin-bottom: 0;
    }
    .vrExperiences, .linkvrExperiences{
        background-color: #345;
    }
    .vrExperiences:hover, .linkvrExperiences:hover{
        background-color: #567;
    }
    .filmography:hover, .linkfilmography:hover{
        background-color: #567;
    }
 body{
    padding: 120px 20px 0;
 }
header{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto 0;
    background-color: #222228;
    text-align: center;
}
@keyframes borderWiggle {
    0% {border-radius: 50% 65%  / 96% 27% ;
        width: 250px;
        margin: 0 0;}
    50% {border-radius: 50% / 50% ;
        width: 100px;
        margin: 0 75px;}
    100% {border-radius: 30% 95% 107% / 6% 47% ;
        width: 250px;
        margin: 0 0;}
  }
.headshotWrapper{
    display: block;
    border-radius: 50% 65%  / 96% 27% ;
    overflow: hidden;
    width: 250px;
    height: 250px;
    box-shadow: 0 0 0px 9px #222228,
    0 0 0px 10px #455;
}
.headshot{
    margin-top: -35px;
    height: 135%;
    z-index: 0;
}
.headerContent{
    display: block;
    padding-left: 30px;
    padding-top: 20px;
}
header::after {
    content: "";
    clear: both;
    display: table;
  }
h1{
    font-family: sans-serif;
    margin: 20px 0 30px;
    text-align: center;
    font-size: 30px;
}
h3{
    margin: 0 auto;
    max-width: 500px;
    font-size:14px;
    font-weight:200;
    letter-spacing: 1.25px;
    line-height: 22px;
    text-indent: 15px;
    color: #ddd;
}
.jobTitle{
    font-weight: bold;
    color: white;
    border-bottom: 1px solid white;
}
.fluency{
    width: 100%;
    margin-top: 15px;
    margin-bottom: 5px;
    text-align: center;
    font-size: initial;
}
.fluency > li{
    display: inline;
    padding: 3px;
}
.software{
    color: #59dbe0;
}
.languages{
    color: #76cd71;
}
.abilities{
    height: auto;
    max-width: 400px;
    margin: 0 auto 15px;
    text-align: center;
}
.abilities >li {
    display: inline-block;
    padding: 3px;
}
.divider{
    color: #455;
}
.credits{
    height: auto;
    max-width: 400px;
    margin: 15px auto;
    text-align: center;
}
.credits >li {
    display: inline-block;
    margin: 5px 5px;
    border-radius: 15px;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.tiles{
    height: auto;
    margin: 90px auto 40px;
    text-align: center;
}
.tiles >li {
    display: inline-block;
    margin: 5px 7px;
    font-family: sans-serif;
    border: 1px solid #455;
    border-radius: 3px;
    transition: linear 100ms;
}
.tiles > li:hover{
    border-style: dashed;
    box-shadow: 0 0 0px 1px #222228,
    0 0 0px 3px #455;
    transition: linear 100ms;
}
.tiles > li > a{
    display: block;
    margin: 4px;
    padding: 14px 10px;
    width: 150px;
    font-family: inherit;
    font-size: larger;
    background-color:#986;
    color: white;
}
.tiles > li > a:hover{
    background-color:#984;
}