#pg-content {
    display: grid;
}

.snow1 {
    grid-column: 1;
    grid-row: 1;
	background: url(https://designshack.net/tutorialexamples/letitsnow/snow.png);
    opacity: 0.2;
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
	animation: snowOne 20s infinite linear;
}
.snow2 {
    grid-column: 1;
    grid-row: 1;
	background: url(https://designshack.net/tutorialexamples/letitsnow/snow.png);
    opacity: 0.2;
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
	animation: snowTwo 20s infinite linear;
	background-size: 300px;
	filter: blur(1px);
}
.snow3 {
    grid-column: 1;
    grid-row: 1;
	background: url(https://designshack.net/tutorialexamples/letitsnow/snow.png);
    opacity: 0.2;
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
	animation: snowThree 20s infinite linear;
	background-size: 800px;
	filter: blur(2px);
}

@keyframes snowOne{
	0%
	{
		background-position: 0px 0px;
	}
	100%
	{
		background-position: 100px 750px;
	}
}
@keyframes snowTwo{
	0%
	{
		background-position: 0px -100px;
	}
	100%
	{
		background-position: 0px 750px;
	}
}
@keyframes snowThree{
	0%
	{
		background-position: 0px 100px;
	}
	100%
	{
		background-position: 300px 750px;
	}
}


#christmas-tree {
    grid-column: 1;
    grid-row: 1;
    margin-top: 50px;
    margin-bottom: 50px;
    display: grid;
    grid-row: repeat(13, 1fr);
}
.tree {
    display: block;
    margin: auto;;
}
.flipped {
    transform: scaleX(-1);
    position: relative;
    left: -25px;
}
#xmas-1 {
    grid-row: 1 / span 3;
    grid-column: 1;
    width: 400px;
    height: 500px;
    z-index: 6;
}
#xmas-2 {
    grid-row: 2 / span 3;
    grid-column: 1;
    width: 450px;
    height: 500px;
    z-index: 5;
}
#xmas-3 {
    grid-row: 3 / span 3;
    grid-column: 1;
    width: 500px;
    height: 500px;
    z-index: 4;
}
#xmas-4 {
    grid-row: 4 / span 3;
    grid-column: 1;
    width: 500px;
    height: 500px;
    z-index: 3;
}
#xmas-5 {
    grid-row: 5 / span 3;
    grid-column: 1;
    width: 500px;
    height: 500px;
    z-index: 2;
}
#xmas-6 {
    grid-row: 6 / span 3;
    grid-column: 1;
    width: 500px;
    height: 500px;
    z-index: 1;
}

.tree {
    max-width: 100% !important;
}
#tree-decorations {
    grid-column: 1;
    grid-row: 1;
    z-index: 7;
    width: 100%;
    max-width: 500px;
    margin: auto;
    margin-top: 50px;
}
#dec-grid {
    display: grid;
}
.bauble { max-width: 100%;}
#decoration-1 {
    grid-row: 2;
    grid-column: 3;
}
#decoration-2 {
    grid-row: 3;
    grid-column: 2;
    transform: rotate(-10deg);
}
#decoration-3 {
    grid-row: 3;
    grid-column: 3;
}
#decoration-4 {
    grid-row: 4;
    grid-column: 3;
    width: 75%;
}
#decoration-5 {
    grid-row: 5;
    grid-column: 2;
    width: 80%;
}
#decoration-6 {
    grid-row: 5;
    grid-column: 4;
    transform: rotate(-15deg);
    width: 70%;
}
#decoration-7 {
    grid-row: 6;
    grid-column: 2;
}
#decoration-8 {
    grid-row: 6;
    grid-column: 3;
}
#decoration-9 {
    grid-row: 7;
    grid-column: 1;
    width: 70%;
}
#decoration-10 {
    grid-row: 7;
    grid-column: 2;
    width: 80%;
    transform: rotate(-10deg);
}
#decoration-11 {
    grid-row: 8;
    grid-column: 1;
    padding-left: 20px;
    width: 70%;
    transform: rotate(5deg);
}
#decoration-12 {
    grid-row: 8;
    grid-column: 2;
}
#decoration-13 {
    grid-row: 8;
    grid-column: 4;
    width: 80%;
}
#decoration-14 {
    grid-row: 9;
    grid-column: 1 / span 2;
    margin-left: 25%;
    margin-top: 20px;
    width: 40%;
}
#decoration-15 {
    grid-row: 9;
    grid-column: 3;
    border-radius: 20px;
    width: 80%;
}
#decoration-16 {
    grid-row: 10;
    grid-column: 2;
}
#decoration-17 {
    grid-row: 11;
    grid-column: 4;
    border-radius: 20px;
    transform: rotate(10deg);
    width: 80%;
}
#decoration-18 {
    grid-row: 12;
    grid-column: 1;
    border-radius: 20px;
    transform: rotate(-5deg);
    width: 80%;
}
#decoration-19 {
    grid-row: 7;
    grid-column: 3 / span 2;
    border-radius: 20px;
    width: 40%;
    margin-left: 25%;
    margin-top: 10px;
    transform: rotate(5deg);
}
.bauble:hover { cursor: pointer; }


* {
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
.header-imgs {
    padding: 30px 0;
}
.pipers-logo {
    display: block;
    margin: auto;
    max-width: 100%;
}
.pipers-logo:hover {
    cursor: pointer;
}
.unicorn-img {
    display: none;
}
.pipers-grey {background-color: rgb(150, 158, 150);}
.txt-white {color: white}
.top-band {
    padding: 20px;
}
.top-links {
    display: none;
    width: 800px;
    margin: auto;
}
.main-pg-title {
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

#pg-content { 
    margin-top: 25px;
    background-color: rgb(16, 50, 78);
}

footer {
    text-align: center;
    padding-bottom: 25px;
    border-bottom: 40px solid rgb(204, 0, 1);
    width: 100%;
    margin-top: 25px;
    bottom: 0px;
}

@media only screen and (min-width: 1200px) {
    .header-imgs {
        display: grid;
        grid-template-columns: 240px 435px 125px;
        padding: 30px 0;
        width: 100%;
        max-width: 800px;
        margin: auto;
    }
    .pipers-logo {
        padding: 10px;
        grid-column: 1;
    }
    .unicorn-img {
        display: block;
        width: 125px; /* delete this on piperpat -- it uses the unicorn w circle border */
        grid-column: 3;
        margin-right: 0;
    }
    .top-links {
        display: block;
    }
    .top-link {
        text-decoration: none;
    }

    .lrg-scr-card-wrapper {
        grid-column: 2;
        grid-row: 1;
        display: block !important;
        width: 755px;
        max-height: 98vh;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 10px;   
        margin-top: 10px;   
        z-index: 0;
    }

    /* #christmas-tree {
        grid-column: 1 / span 2;
        width: 500px;
        float: left;
    }    
    #tree-decorations {
        width: 500px;
        max-width: 500px;
        min-width: 500px;
        grid-column: 1 / span 2;
        position: absolute;
        left: 0;
    } */

    .snow1 {
        grid-column: 1 / span 2 !important;
        grid-row: 1;
    }
    .snow2 {
        grid-column: 1 / span 2 !important;
        grid-row: 1;
    }
    .snow3 {
        grid-column: 1 / span 2 !important;
        grid-row: 1;
    }
}