@font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-display:swap;
    font-weight:300 800;
    src:url('../fonts/open-sans-latin-wght-normal.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
body{
    margin:0;
    padding:0;
    overflow:hidden
}
main{
    height:100vh;
    width:100%;
    background:#141e30;
    background:-webkit-linear-gradient(to top,#141e30,#243b55);
    background:linear-gradient(to top,#141e30,#243b55)
}
.synopsis{
    user-select:none;
    bottom:10%;
    width:100%;
    padding:0;
    color:#fff;
    font-family:'Open Sans',sans-serif;
    font-weight:300;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    margin:auto;
    position:absolute;
    text-align:center
}
.synopsis__header{
    font-size:4em;
    font-weight:300;
    margin-bottom:0
}
.synopsis__description{
    font-size:1.1em;
    opacity:.39;
    padding-left: 10px;
    padding-right: 10px;
}
#bouncyBall{
    width:100%;
    max-height:100%;
    position:fixed;
    top:0;
    left:0
}
.listStyles{
    margin-top:50px;
    padding:0
}
.listItemStyles{
    font-weight:300;
    list-style:none;
    color:#000;
    display:inline-block
}
.listItemPaddingStyle{
    padding-right:45px
}
.linkStyle{
    color:#000;
    font-size:32px;
    opacity:.6
}
.linkStyle:hover{
    color:#fff;
    font-size:32px;
    opacity:.6
}
svg{
    width:30px
}
@media screen and (max-width:500px){
    .synopsis{
        min-width:100%
    }
    .synopsis__header{
        font-size:3em
    }
}