/*
        http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        License: none (public domain)
        */
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        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:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        /* responsive */
        @media (max-width: 959px) {
            .page {
                width: auto;
                margin: 0;
            }
        }

html, body { height: 100% }

#loading {
    background: #000 url('../i/loading.png') 0 0;
    animation-name: MOVE-BG;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    height: 100%;
    width: 100vw;
    position: absolute; top: 0; left: 0;
    z-index: 999;
}
@keyframes MOVE-BG {
    from {
        background-position: 0 0;
    }
    to { 
        background-position: 0 250px;
    }
}
body { background: #000 }
body.noscroll { overflow: hidden }
body.tricks main, body.tricks #intro, body.treats #cannedMeat input[type=submit], body.tricks #box {
	background:#362552;
	color:#fe5000;
}
body.treats main, body.treats #intro, body.tricks #cannedMeat input[type=submit], body.treats #box {
	background:#fe5000;
	color:#362552;
}
main { margin: 0; padding: 0 }

main article {
    max-width: 38rem;
    padding: 1rem;
    margin: auto;
}
    
h1, #roll:after, #cannedMeat h2 { font-family: 'P22 Canterbury Pro';font-size: 6rem; text-align: center }
h2, h3, h4, h5, #descrizione, #table p, #table ul, #cannedMeat form p {font-family: 'Mr Darcy'; font-weight: 400; text-align: center}
h2 { font-size: 1.75rem }

#intro { position: fixed; top: 0; bottom: 0; left:0; right: 0; z-index: 997; width: 100vw; height: 100vh; display: flex; justify-content: center;align-items: center}
#intro figure { max-width: 100px; margin: 1rem auto }
#intro h1 { font-size: 6rem; color: #fff }
#intro h2 { font-size: 1.25rem; font-weight: bold; margin-top: -.5rem }
#intro #roll { position:relative;display: block; margin: 0 auto; margin-top: 3rem; cursor: pointer }
#intro #roll canvas { margin: 0 auto }
#intro #roll:after { display: block; content: "Roll"; position: absolute; top: 50px; left: 0%; width: 100%; height: 100%; z-index:2; color: #fff; text-align: center; font-size: 5rem }
#box { display: none; justify-content: center;align-items: center;
    height: 100%;
    width: 100vw;
    position: absolute; top: 0; left: 0;
    z-index: 999;}
#box #itsa { position: relative; top: 0; left: 0px; margin-top: -200vh }
#box h2 { margin: 2rem auto 0 auto;}


#table p { padding: .25rem; margin-bottom: 1rem }
#table ul { margin: 0; padding: 0 }
#table ul li { padding: 0 0 .25rem 0; margin-bottom: .25rem }

td ul li:before { content: "\25b8" }

p, li, figcaption { font-weight: 400}
p, figure, figcaption, h1, h2, #table { margin-bottom: 1rem }

hr { border: none; border-bottom: 2px solid #fe5000; width: 50%; margin: 2rem auto }
body.tricks hr, body.tricks #cannedMeat { border-color: #fe5000; color: #fe5000 }
body.treats hr, body.treats #cannedMeat { border-color: #362552; color: #362552 }

strong, #table strong { font-family: 'Mr Darcy'; font-weight: 900 }


#image {
    width: 100%;
    margin: 0 auto
}

#image img { display: block; width: 100%; height: auto; }
#image figcaption { font-style:italic; padding: .5rem }

#cannedMeat { margin: 5rem auto; padding: 2rem; text-align: center }
#cannedMeat h2 { font-size: 3rem }
#cannedMeat input[type=text] { display: block; width: calc(100% - 2rem); padding: 1rem; border:0; background: #fff; margin-bottom: 1rem; text-align: center;  }
#cannedMeat input[type=submit] { font-family: 'P22 Canterbury Pro'; display: block; width: 100%; padding: 1rem; border: 0;font-size: 2rem }
#cannedMeat form p a {}
body.tricks #cannedMeat form p a { color: #fe5000 }
body.treats #cannedMeat form p a { color: #362552 }


footer { text-align: center }
footer #logo { margin: 0 auto; display: block; max-width: 5rem; padding: 1rem }
@font-face {
    font-family: 'P22 Canterbury Pro';
    src: url('../f/P22CanterburyPro.woff2') format('woff2'),
        url('../f/P22CanterburyPro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mr Darcy';
    src: url('../f/MrDarcy-Bol.woff2') format('woff2'),
        url('../f/MrDarcy-Bol.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mr Darcy';
    src: url('../f/MrDarcy-Med.woff2') format('woff2'),
        url('../f/MrDarcy-Med.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/*
    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
*/
@media (max-width: 319px) {
    #intro figure { max-width: 50px; margin: 10rem auto -.5rem auto }
    h1 { font-size: 4rem!important }
    #intro #roll { bottom: 3rem }
    #intro #roll:after { font-size: 4rem; margin-top: -1.25rem }
    #intro canvas { width: 130px!important; height: 130px!important }
}
@media (min-width: 320px) and (max-width: 480px) {
    #intro figure { max-width: 80px; margin: 5rem auto -.5rem auto }
    #intro h1 { font-size: 5rem }
    #intro #roll { bottom: 3rem }
    #scheda h1 { font-size: 5rem!important }
}
@media (min-width: 481px) and (max-width: 768px) {
    #intro figure { max-width: 100px; margin: 3rem auto -.5rem auto }
    #intro h1 { font-size: 7rem }
}
@media (min-width: 769px) and (max-width: 1024px) {
    #intro figure { max-width: 100px; margin: 2rem auto -.5rem auto }
    #intro h1 { font-size: 7rem }
}