:root {
    --black: #0C0F0A;
    --pink: #CEA0AE;
    --blue: #A5DEC8;
    --mint: #ECFAF5;
    --yellow: #FAF2BE;
    --orange: #FACA82;
    --white: #fff;
}

/* FONT FAMILY MONOSPACE */

body {
    font-size: 1rem;
    font-family: monospace;

    background-color: rgba(206, 160, 174, 1);
}

.navbar {
    padding: 0;
}

.container-fluid {
    padding-bottom: 0;
}

.navbar-brand {
    font-size: larger;
}

#headshot {
    margin: 5% auto;
    border-radius: 50%;
}

#navbarSupportedContent a {
    border-bottom: 2px solid black;
    padding-bottom: 0;
}

.nav-item {
    padding-right: 1rem;
}

#bio {
    padding-top: 2em;
}

#whoAmI{
    margin-bottom: 5%;
}


.flip-card {
    /* background-color: transparent; */
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    border: none;

    max-width: 700px;

    /* margin: 50%; */
}

.flip-card-inner {
    margin-bottom: 10%;

    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {

    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}

.flip-card-front {
    /* background-color: #bbb; */
    color: black;
}

.flip-card-back {
    position: absolute;
    top: 0;

    background-color: var(--yellow);
    color: black;
    transform: rotateY(180deg) translate(0, 0);

    justify-content: center;
    flex-direction: column;
    display: flex;
    height: 100%;

    border-radius: 50%;
}

.row {
    margin: 5% auto auto auto;
}

.picture-name {
    margin: 5% auto;
}

.carousel {
    margin-left: 12.5%;
    margin-bottom: 5%;

    width: 75%;
}

.carousel img {
    border-radius: 10px;
    max-height: 700px;
    max-width: 400px;

    margin-left: 25%;
}


#headshot:hover {
    animation: shake 1s;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.footer {
    background-color: var(--black);
    color: white;

    padding: 1em;
}

#footerLogo {
    height: 100px;
}