/* common */

*{
    font-family: 'Courier New', Courier, monospace;
}

html{
    overflow-y: scroll;
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 440px;
    margin: auto;
    text-align: justify;
}

main{
    flex: 1;
    padding: 0 20px 0 20px;
}

header{
    text-align: center;
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}

footer{
    height: 30px;
    width: 100%;
    font-size: 14px;
    text-align: center;
}

/* objects */


    /* anchors */

a{
    color: black;
}

a:hover{
    text-decoration: underline wavy;
}

nav a{
    width: 25%;
    line-height: 30px;
    font-size: 1.5em;
}

nav a:hover{
    font-size: 1.7em;
}

nav a.current{
    text-shadow: 0 0 1.5px;
    text-decoration: underline double;
}

    /* --------------------- */

nav div{
    display: flex;
    height: 30px;
}

#title{
    font-size: 42px;
    margin: 10px 0 5px 0;
}

.right{
    float: right;
    margin: 5px 5px 5px 10px;
}

img.mid{
    display:block;
    margin: auto;
}

.clicky{
    cursor: pointer;
}

.full{
    width: 100%;
}

/* text */

.centre{
    text-align: center;
}

/* --------------------- */

/* misc */

    /* styling debug */

#plumb{
    position: absolute;
    left: 50%;
    height: 100%;
    border-left: 2px solid red;
}

    /* card */

#card_cont{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150%;
    margin-left: -25%;
    perspective: 50px;
}

#card{
    width: 100%;
    transform: rotateX(0deg);
}

    /* --------------------- */