/* myer reset v2 */ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

:root {
    --snow: #ece9ea;
    --sand: #ede7d7;
    --dirt: #c1af81;
    --cardinal: #8c1515;
    --smoke: #dad1d9;
    --steel: #706d72;
    --rodin: #232323;
}

html,
body {
    height: 100%;
}

a {
    text-decoration: none;
}

body {
    background: var(--sand);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card {
    width: 80vw;
    height: 50vw;
    position: relative;
    perspective: 800px;
    border-radius: 4px;
}

.faces {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
}

    .faces.flipped {
        transform: rotateY(180deg);
    }

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 6px;
    display: flex;
    color: var(--rodin);
}
    .face-wrap {
        width: 100%;
        height: 100%;
    }

    .content-wrap {
        display: flex;
        flex-direction: column;
        height: calc(100% - 120px);
        padding: 60px;
    }

.uni {
    display: flex;
}
    .uni .logo-script {
        display: inline-block;
        background-image: url(stanford-university-crop.png);
        background-size: contain;
        background-repeat: no-repeat;
        height: 5vw;
        width: 32vw;
        margin-top: 1vw;
    }
    .uni .alum {
        font-family: "Kaushan Script", fantasy;
        font-size: 4vw;
        line-height: 7vw;
    }

.infobox {
    flex: 1;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-size: 2vw;
    line-height: 3vw;
    padding-left: 4px;
}
    .infobox .cat {
        font-weight: 600;
    }
    .infobox .cat:after {
        content: ":"
    }


.flip {
    border-radius: 5px;
    bottom: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-size: 1.2vw;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 20px 0 0 0;
    padding: 6px;
    position: absolute;
    right: 60px;
    text-transform: uppercase;
    z-index: 10;
}

/* edge mobile seems to have a backface visibility
   problem with absolutely placed elements  */
.flipped #flip1 {
    opacity: 0;
}


.front {
    display: flex;
    flex-direction: column;
}
    .front a {
        border-bottom: 1px dashed var(--sand);
        color: var(--sand);
    }
        .front a:hover {
            border-style: solid;
        }
    .front .face-wrap {
        background-color: var(--cardinal);
        color: var(--dirt);
    }
    .front .infobox .desc {
        color: var(--sand);
    }
    .front .alum {
        color:  var(--snow);
        line-height: 4vw;
        padding-bottom: 2vw;
    }
    .front .carl {
        background-color: var(--snow);
        height: 20vw;
        float: right;
        filter: saturate(0) brightness(1.1);
    }
    .front .flip {
        background-color: transparent;
        border: 1px solid var(--smoke);
        color: var(--smoke);
    }
    .front .flip:hover {
        color: var(--cardinal);
        background-color: var(--snow);
        border-color: var(--snow);
    }


.back {
    transform: rotateY(180deg);
}
    .back a {
        border-bottom: 1px dashed var(--cardinal);
        color: var(--cardinal);
    }
    .back .face-wrap {
        background-color: var(--snow);
        border-left: 60px solid var(--cardinal);
        color: var(--rodin);
    }
    .back.face:before {
        background-image: url(seal-dark-red.png);
        background-repeat: no-repeat;
        background-position: 35vw 1vw;
        background-size: 70vw;
        content: "";
        height: 100%;
        opacity: 0.15;
        position: absolute;
        width: 100%;
    }
    .back .infobox .desc {
        color: var(--steel);
    }
    .back .alum {
        color:  var(--steel);
    }
    .back .flip {
        background-color: var(--cardinal);
        border: 1px solid var(--cardinal);
        color: var(--smoke);
    }
    .back .flip:hover {
        color: var(--cardinal);
        background-color: var(--sand);
    }