/*
Reset
*/

/* 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;
    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 {
}
*, div {
    box-sizing:border-box;
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 8, 2023 */





/*
    General
*/
body {
    font-family: "Roboto Mono", sans-serif;
    padding-top:20px;
    background: linear-gradient(0deg,rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}

/*
	Structure
*/

.container {
    max-width:1100px;
    margin:50px auto;
}

.row {
    display:flex;
}

.col {
    width:50%;
    padding:50px;
}

.top {
    text-align: center;
}

header {
    display:flex;
    margin:100px 0 50px 0;
}

.img-right {
    padding-right:50px;
}


header, header h1 {
    text-align:left;
}

header img {
    width:100%;
    margin:0 auto 50px auto;
}

.intro-text {
    max-width:600px;
    margin: 0 auto;
}

.intro-text p {
    line-height: 1.7;
}

/*
	Fonts
*/

h1 {
    display:block;
    text-transform: uppercase;
    font-family: "Rubik Mono One", monospace;
    font-weight:bold;
    font-size:3.5em;
    line-height: 1;
    text-align: center;
    color:7B306D;
}


h2 {
    border:1px dotted black;
    display:block;
    padding:8px 10px 5px 10px;
    text-transform: uppercase;
    font-family: "Rubik Mono One", monospace;
    font-weight:bold;
    margin:30px auto 20px auto;
    font-size:2.5em;
    line-height: 1;
    text-align: center;
    color:7B306D;
}


h3 {
    display:inline-block;
    border:1px solid black;
    padding:8px 10px 5px 10px;
    text-transform: uppercase;
    font-family: "Roboto Mono", sans-serif;
    font-weight:bold;
    margin:50px 0 20px 0;
    font-size:1.3em;
    line-height: 1;
}

h4 {
    color:#9BC4C9;
    font-size:1em;
    font-weight:bold;
    margin:35px 0 10px 0;
    font-family: "Roboto Mono", sans-serif;
}

h4.first {
    margin-top:0;
}

p {
    font-size:1em;
    line-height:1.4;
    margin-bottom:10px;
}

b {
    font-family: "Roboto Mono", sans-serif;
}

.strap {
    font-family: "Rubik Mono One", monospace;
    font-weight:bold;
    margin:0 0 20px 0;
    font-size:1.6em;
    text-transform: uppercase;
}

a {
    color:#8E323F;
    font-weight:bold;
}


.body {
    margin:0 auto 70px auto;
    text-align: center;
    max-width:800px;
    padding:0 20px;

}
.body h2 {
    text-align: center;
}

.body img {
    max-width:300px;
    margin:0 0 25px 0;
}

    /*
        Buttons
    */
.btn {
    display:inline-block;
    margin:10px 0;
    font-family: "Roboto Mono", sans-serif;
    background:rgba(253, 187, 45, 1);
    color:black;
    padding:15px 40px 15px 40px;
    font-size:1.4em;
    transition:transform 0.2s;
    cursor: pointer;
    text-decoration: none;
    border:none;
}
.btn:hover {
    transform:scale(1.1, 1.1);
}
/*
	Images
*/
.st-stamp {
    width:80%;
    max-width:400px;
}
.photo {
    width:100%;
}

.gifts img {
    height:80px;
}

/*
	Sections
*/
.play-bar {
    position:fixed;
    width:100%;
    text-align:right;
    top:0;
    left:0;
    padding:20px;
}
.play-bar .play {
    width:100px;
    cursor: pointer;
    transition:transform 0.2s;
}
.play-bar .play:hover {
    transform:scale(1.1, 1.1);
}
.gifts {
    text-align: center;
    margin:25px auto;
}
.gifts .col p {
    max-width:300px;
    margin:15px auto;
}

/*
	Form
*/
.form-wrap {
    max-width:900px;
    margin:auto;
    margin-top:20px;
}
form {
    margin:10px;
}
.fe {
    text-align:center;
    margin:20px 0;
}

.fe label {
    display:block;
    padding:8px 10px 5px 10px;
    text-transform: uppercase;
    font-family: "Roboto Mono", sans-serif;
    font-weight:bold;
    font-size:1.3em;
    line-height: 1;
}

input, select, textarea {
    border:1px solid black;
    padding:15px;
    font-size:16px;
    font-family: "Roboto Mono", sans-serif;
    width:80%;
    max-width:550px;
    margin-top:5px;
}

textarea {
    min-height:150px;
}

.totaliser {
    text-align:center;
    padding:10px 30px 0 30px;
}

.lower-image {
    width:80%;
    display:block;
    margin:20px auto;
}


@media only screen and (max-width: 600px) {

    h1 {
        font-size:2.5em;
        margin-bottom:20px;
    }
    h2 {
        font-size:2em;
    }
    header {
        display:block;
        padding:20px 50px;
        margin-top:0;
    }
    .img-right {
        padding:0;
    }

    header img {
        margin:0 0 40px 0 !important
    }
    .row {
        display:block;
    }

    .col {
        width:100%;
        padding:20px;
    }

    h3 {
        margin-top:10px;
    }

    .gifts {
        padding:20px;
        text-align:left;
    }

    .gifts .col {
        text-align: center
    }

    .play-bar {
        position:relative;
    }

}