@font-face {
    font-family: 'Uni Sans Book';
    src: url('fonts/uni_sans_book-webfont.woff2') format('woff2'),
    url('fonts/uni_sans_book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
}

a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

h1 {
    font-family: 'Gravitas One', cursive;
    font-size: 4.5rem;
    font-weight: normal;
    letter-spacing: -5px;
}

h2 {
    margin: 0;
}

.about {
    text-align: center;
    width: 75%;
    border-bottom: 5px solid green;
    margin-bottom: -10px;
    padding-bottom: 55px;
}

.about .subtitle {
    display: block;
    margin: -25px 0 25px;
    color: #335186;
    font-size: 1.5rem;
    font-weight: 300;
}

.about .subtitle .snowflake {
    margin-top: 15px;
    font-size: 2.25rem;
    color: silver;
}

.about .subtitle .logo {
    color: black;
    font-family: 'Uni Sans Book', 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 2.25rem;
    letter-spacing: 0;
    margin-left: 1px;
}

.about p {
    width: 80%;
    margin: 0 auto;
    /*text-align: left;*/
}

.row {
    display: flex;
    flex-direction: row;
}

.star {
    color: gold;
    font-size: 11rem;
    font-weight: bold;
}

.stump {
    position: relative;
}

.stump .bracket {
    color: brown;
    font-size: 12rem;
    font-weight: bold;
    position: absolute;
    top: -36;
}

.stump .bracket.left {
    left: -60;
}

.stump .bracket.right {
    right: -60;
}

.star,
.stump .bracket {
    font-family: Times, serif;
}

.person,
.gift {
    width: 155px;
    height: 155px;
    display: inline-block;
    margin: 5px;
    background-color: green;
}

.person {
    background-size: contain;
    background-blend-mode: screen;
}

.stump .gift {
    background-color: brown;
}
/* PEOPLE START HERE */

.allison {
    background-image: url(images/AllieHoliday.jpg);
    background-color: rgba(23, 255, 227, .5);
    background-blend-mode: overlay;
}

.gift.allison {
    background-color: #17ffe3;
}

.dana {
    background-image: url(images/DanaHeadshotColor.jpg);
    background-color: #cc5200;
}

.james {
    background-image: url(images/JamesGrey.jpg);
    background-color: #274fde;
}

.nathan {
    background-image: url(images/NathanHoliday.jpg);
    background-color: #333333;
}

.mara {
    background-image: url(images/MaraHoliday.jpg);
    background-color: rgba(240 ,248 ,255, .75);
    background-blend-mode: overlay;
}

.gift.mara {
    background-color: #F0F8FF;
}

.pierre {
    background-image: url(images/PierreGrey.jpg);
    background-color: #3db6e8;
}

.lola {
    background-image: url(images/LolaHoliday.png);
    background-color: #ffc0cb;
    background-blend-mode: luminosity;
    color: white;
}

.rick {
    background-image: url(images/RickHoliday.jpg);
    background-color: #ff0000;
}

.aaron {
    background-image: url(images/AaronHoliday.jpg);
    background-color: rgba(204, 255, 0, .5);
    background-blend-mode: overlay;
}

.gift.aaron {
    background-color: #ccff00;
}

.adam {
    background-image: url(images/AdamGrey.jpg);
    background-color: #0a0099;
    color: white;
}

.sammy {
    background-image: url(images/Sammy.jpg);
    background-color: #751b7d;
    color: white;
}

.david {
    background-image: url(images/DavidHoliday.jpg);
    background-color: #003366;
}

.benk {
    background-image: url(images/BKGrey.jpg);
    background-color: rgba(156 ,255 ,0, .5);
    background-blend-mode: overlay;
}

.gift.benk {
    background-color: #9CFF00;
}

.lisa {
    background-image: url(images/LisaHoliday.jpg);
    background-color: #800080;
}

.wiener {
    background-image: url(images/Ween.jpg);
    background-color: #af853b;
}

.daryl {
    background-image: url(images/DarylGrey.jpg);
    background-color: #788c64;
    background-blend-mode: luminosity;
    color: white;
}

.kass {
    background-image: url(images/KassHoliday.jpg);
    background-color: #dda4b9;
    background-blend-mode: luminosity;
    color: white;
}

.jim {
    background-image: url(images/JimHeadshotColor.jpg);
    background-color: rgba(25, 230, 189, .5);
    background-blend-mode: overlay;
    color: white;
}

.gift.allison {
    background-color: #19e6bd;
}

.laverne {
    background-image: url(images/Laverne.jpg);
    background-color: #E3C5B1;
    background-blend-mode: luminosity;
    color: white;
}

.scott {
    background-image: url(images/Scott.jpg);
    background-color: rgba(249, 212, 2, .5);
    background-blend-mode: overlay;
    color: white;
}

.gift.scott {
    background-color: #f9d402;
}

.yelena {
    background-image: url(images/YelenaHoliday.jpg);
    background-color: #8f5db7;
    background-blend-mode: luminosity;
    color: white;
}

.nolan {
    background-image: url(images/NolanHoliday.jpg);
    background-color: ##468fd2;
}

.inez {
    background-image: url(images/Inez.png);
    background-color: #000000;
    background-blend-mode: luminosity;
    color: white;
}

.mike {
    background-image: url(images/MikeGrey.jpg);
    background-color: #FF5349;
}

.bens {
    background-image: url(images/BenSGrey.jpg);
    background-color: #666666;
}
/* PEOPLE END HERE */

.gift {
    background-image: none;
    background-blend-mode: normal;
    cursor: help;
}

.gift:hover,
.gift:active {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.number {
    font-family: 'Gravitas One', cursive;
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.person .wrapper {
    height: 135px;
    margin: 0;
    opacity: 0;
    border: 0px solid white;
    transition: all 0.2s linear;
}

.person:hover .wrapper {
    margin: 10px;
    opacity: 1;
    border-width: 1px;
}

.person .number {
    font-size: 1.875rem;
    font-weight: normal;
    letter-spacing: -1px;
}

.gift h2 {
    display: none;
}

.gift .number {
    margin-top: 35px;
    font-size: 4rem;
    font-weight: normal;
    letter-spacing: -3px;
    color: white;
    mix-blend-mode: difference;
}

@media only screen and (max-width: 990px) {
    h2 {
        font-size: 1.25rem;
    }

    .person,
    .gift {
        width: 125px;
        height: 125px;
    }

    .wrapper,
    .person .wrapper {
        height: 105px;
    }

    .gift .number {
        margin-top: 30px;
    }

    .stump .bracket {
        font-size: 9.25rem;
        top: -25;
    }
}

@media only screen and (max-width: 800px) {
    .about {
        margin-bottom: 25px;
    }

    .row {
        flex-direction: column;
    }

    .person,
    .gift {
        width: 300px;
        height: 300px;
        display: block;
        margin: 0 0 10px 0;
    }

    .wrapper,
    .person .wrapper {
        height: 280px;
    }

    .gift .number {
        font-size: 8rem;
    }

    .star,
    .stump .bracket {
        display: none;
    }
}

@media only screen and (max-width: 694px) {
    .person .wrapper {
        margin: 10px;
        opacity: 1;
        border-width: 1px;
    }
}

@media only screen and (max-width: 551px) {
    h2 {
        font-size: 1.5rem;
    }

    .about {
        padding-bottom: 35px;
    }

    .about p {
        width: 100%;
    }

    .person,
    .gift {
        width: 80vw;
        height: 80vw;
    }

    .wrapper,
    .person .wrapper {
        height: 96%;
    }

    .gift .number {
        font-size: 11rem;
    }
}

@media only screen and (max-width: 507px) {
    h1 {
        font-size: 2.5rem;
        letter-spacing: 0;
    }

    .about .subtitle {
        margin: -10px 0 15px;
        /*font-size: 1.75rem;*/
        letter-spacing: -1px;
    }

    .wrapper,
    .person .wrapper {
        height: 95%;
    }
}

@media only screen and (max-width: 439px) {
    .wrapper,
    .person .wrapper {
        height: 94%;
    }
}

@media only screen and (max-width: 320px) {
    .wrapper,
    .person .wrapper {
        height: 93%;
    }
}
/* Retina */

@media only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2) {
    h1 {
        font-size: 6rem;
        letter-spacing: 0;
    }

    h2 {
        font-size: 5rem;
    }

    .about {
        margin-bottom: 25px;
        padding-bottom: 35px;
    }

    .about .subtitle {
        margin-bottom: 45px;
        /*font-size: 3.5rem;*/
        letter-spacing: -1px;
    }

    .about p {
        font-size: 2.25rem;
        width: 100%;
    }

    .row {
        flex-direction: column;
    }

    .star,
    .stump .bracket {
        display: none;
    }

    .person,
    .gift {
        width: 80vw;
        height: 80vw;
        display: block;
        margin: 0 0 10px 0;
    }

    .wrapper,
    .person .wrapper {
        height: 97%;
    }

    .person .wrapper {
        margin: 10px;
        opacity: 1;
        border-width: 1px;
    }

    .gift .number {
        font-size: 22rem;
    }

    .person .number {
        font-size: 8rem;
    }
}