@font-face {
font-family:'Marker Felt';
/*src:local("Marker Felt"), url(Marker-Felt.woff);*/
src:url('../fonts/MarkerFelt.woff2') format('woff2'),
	url('../fonts/MarkerFelt.woff') format('woff'),
	url('../fonts/MarkerFelt.ttf') format('truetype');
}

* {padding:0;margin:0;}

/*mavo stuff*/
.mv-bar.mv-ui {
padding:0 1em;
background-image:none;
}

body {
text-align:center;
font:100% Helvetica Neue, sans-serif;
color:#fff;
background:#4e2e0e url(../images/wood.png);
}

main {
padding:1em;
}

main * {
font-family:inherit;
font-size:inherit;
line-height:inherit;
color:inherit;
margin:0;
padding:0;
}

main a {
text-decoration:none;
}

main ul {
position:relative;
z-index:1;
display:block;
max-width:40em;
border-top-right-radius:100% 2%;
border-bottom-left-radius:1% 100%;
box-shadow:2px 3px 20px black, 0 0 60px #8a4d0f inset;
background:#fffef0;
font-size:120%;
text-align:left;
margin:1em auto 3em;
padding:2em;
}

main ul::before,main ul::after {
content:'';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:-1;
background:inherit;
box-shadow:inherit;
transform:rotate(-3deg);
animation:transform .4s cubic-bezier(0.25,0.1,0.4,1.5);
}

main ul::after {
transform:rotate(2deg);
}

main :checked + [property=giftTitle] {
font-style:italic;
text-decoration:line-through;
color:gray;
mix-blend-mode:multiply;
}

main button.mv-add-gift {
margin-top:1em;
border-radius:.3em;
border:1px solid rgba(0,0,0,0.2);
background:#85c20a linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
box-shadow:0 1px rgba(255,255,255,0.5) inset, 0 .1em .2em -.1em #000;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.5);
font-weight:700;
cursor:pointer;
font-size:120%;
padding:.2em .5em;
}

main button.mv-add:hover {
background-color:orange;
}

main button.mv-add:active {
box-shadow:0 .1em .3em rgba(0,0,0,0.8) inset;
background-image:none;
}

main > header {
display:block;
text-shadow:0 -1px 3px #000;
opacity:.9;
margin:2em 0 3em;
}

main > header > h1 {
font-size:3em;
font-family:inherit;
opacity:.6;
}

main > header > p {
margin-top:.5em;
}

main body > footer {
display:block;
margin-top:3em;
font-size:small;
}

main .auth-controls,main .progress {
mix-blend-mode:multiply;
}

main .mv-item-bar.mv-ui {
position:static;
pointer-events:auto;
opacity:1;
mix-blend-mode:multiply;
border:0;
}

ul.intro li {
text-align:center;
border-bottom:1px dashed rgba(51,85,153,0.5);
list-style:none;
font-family:'Marker Felt', cursive;
color:#013;
font-size:1.5rem;
padding:0.5em;
}

li[property=gift] {
display:flex;
-ms-flex-align:center;
align-items:center;
border-bottom:1px dashed rgba(51,85,153,0.5);
list-style:none;
color:#013;
font-size:1.5rem;
}

li[property=gift].mv-deleted {
padding:.3em;
}

li[property=gift] label {
-ms-flex:1;
flex:1;
font-family:'Marker Felt', cursive;
margin:.3em 0;
padding:.2em;
}

main input::-webkit-input-placeholder,main input::-moz-placeholder {
font-style:italic;
color:#999;
mix-blend-mode:multiply;
}

.user-meta {
display:flex;
justify-content:center;
color:#000;
margin:0 0 30px;
}
.user-meta p {
font-size:0.85em;
font-weight:300;
margin:0 16px;
}
.user-meta p span {
font-family:'Marker Felt', cursive;
}


@keyframes transform {
    from {
        transform:rotate(8deg);
    }
}

@media screen and (max-device-width: 640px), screen and (max-width: 640px) {
    main > header > h1 {
    font-size:2em;
    }
}