.affix {
    top: 60px; /* Position where the element is fixed */
}
body {
    height: 100vh;
    padding: 0;
    background-image: url("../img/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    color: #008084;
    font-size: 20px;
    background-position: center ;
        background-attachment: fixed;
        text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

body.sad {
    background-image: url("../img/sad.gif");
    color: #fff;
    background-size: cover;
    background-position: top center;

}
body.happy {
    background-image: url("../img/happy.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center ;
    color: #333;
}

.container.party{
    padding-top: 220px;
}
body.happy .container.party{
    padding-top: 20px;
}

.creditbox{
    margin:80px 10px 10px;
}
.credit{
    color:#7C660D;
    font-size: 12px;
}


h1 {
    margin: 0 0 8px;
    color: white;
    font-size: 42px;
}

h1 { letter-spacing: 3px; text-shadow: 1px 1px #DF232E, -1px -1px #DF232E, 1px -1px #DF232E, -1px 1px #DF232E; }
.whiteShadowed { color:white; text-shadow: 1px 1px #B5BBAA, -1px -1px #B5BBAA, 1px -1px #B5BBAA, -1px 1px #B5BBAA; }

h1 text {
    fill: currentColor;
    font-kerning: 100px;
}
h1 use {
    stroke: #DF232E;
    stroke-width: 3;
    stroke-linejoin: round;
}

.btn {
    font-size: 16px;
    /*padding: 6px;*/
}