.container::before{
	content: ' ';
	position: fixed;
}

body {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    max-width: 700px;
    height: 4000px;
    background-color: hsl(0, 0%, 0%);
    color:rgb(56, 47, 47);
    text-shadow: 0px 0px 0.7px rgba(22, 8, 8, 0.6), 0px 0px 15px rgba(79, 86, 71, 0.6), 0px 0px 8px rgba(203, 94, 127, 0.6);
}

body img {
    width: 100%;
    padding: 0;
}

.background img {
    display: block;
}

.rellax {
    position: relative;
}

.rellax img {
    position: absolute;
}

.top {
    position: relative;
    z-index: 99;
    max-width: 700px;
}

.foreground {
    position: absolute;
    max-width: 700px;
}

/********************/

@keyframes float1 {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-5px);
    }
}

@keyframes float2 {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-10px);
    }
}

@keyframes float3 {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
    75% {
        transform: translateY(2px);
    }
}

@keyframes fade {
    0% {
        opacity: 0%;
    }
    50% {
        opacity: 0%;
    }
    60% {
        opacity: 100%;
    }
}

.glow {
    animation: glow 1.5s infinite alternate;
}
   
@keyframes glow {
    from {
        filter: drop-shadow(0px 0px 0px rgba(251, 139, 255, 0));
    }
    to {
        filter: drop-shadow(0px 0px 6px rgba(255, 122, 151, 0.6));
    }
}

.border1 {
    filter: drop-shadow(0px 0px 3px rgba(255, 46, 130, 0.4));
}

.border2 {
    filter: drop-shadow(0px 0px 100px rgba(255, 107, 161, 0.9));
}

.border3 {
    filter: drop-shadow(0px 0px 10px rgba(255, 106, 178, 0.7));
}

.border4 {
    box-shadow: (0px 0px 50px rgba(149, 0, 0, 1));
}

.border5 {
    filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.8));
}

.border6 {
    filter: drop-shadow(0px 0px 3px rgba(129, 40, 75, 0.3));
}

/********************/

.nav {
    position: relative;
    padding-top: 385%;
    filter: brightness(115%) saturate(95%);
}

.nav img {
    position: absolute;
    animation: float1 1s ease-in-out infinite alternate;
}

#nav1 {
    width: 13.45%;
    left: 3.3%;
    filter: brightness(90%) saturate(115%);
}

#nav2 {
    width: 14.1%;
    left: 17%
}

#nav3 {
    width: 14.15%;
    left: 30.1%;
}

#nav4 {
    width: 15.1%;
    left: 43.2%;
    padding-top: 0.1%
}

#nav5 {
    width: 14.15%;
    left: 57.1%;
    padding-top: 0.05%
}

#nav6 {
    width: 13.45%;
    left: 69.8%;
}

#nav7 {
    width: 13.45%;
    left: 83.4%;
    filter: brightness(90%) saturate(115%);
}

#prev {
    width: 19%;
    left: 2%;
    opacity: 95%;
    margin-top: -12%;
    animation: float3 2s ease-in-out infinite alternate, fade 10s ease-in-out infinite alternate;
}

#next {
    width: 19.5%;
    left: 80%;
    opacity: 95%;
    margin-top: -11%;
    animation: float3 2s ease-in-out infinite alternate, fade 10s ease-in-out infinite alternate;
}

/********************/

#background2 {
    padding-top: 175%;
    filter: brightness(95%) saturate(115%);
    animation: float2 4s ease-in-out infinite alternate;
}

#background3 {
    padding-top: 385%;
}

#background4 {
    padding-top: 453%;
}

#background5 {
    padding-top: 490%;
}

#background6 {
    padding-top: 740%;
    filter: brightness(92%);
}

/********************/

.reflection-container {
    padding-top: 210%;
    overflow: hidden;
    position: relative;
    filter: brightness(90%) saturate(115%);
    z-index: -1;
    background-image: linear-gradient(#de97a5 60%, #d57dc5 67%);
}

.reflection {
    animation: reflection 5s ease-in-out alternate infinite;
    opacity: 50%;
}

@keyframes reflection {
    0%,
    100% {
      transform: skew(0deg, 0deg) scale(1, -1);
    }
    
    50% {
      transform: skew(1deg, 3deg) scale(1.05, -1.05);
    }
}

/********************/

#birds {
    margin-top: -5.9%;
    left: 0%;
    width: 100%;
    opacity: 95%;
    position: absolute;
}

.birds {
    padding-bottom: 250%;
    width: 100%;
    height: 0;
    position: relative;
    background: url('assets/birds.png');
    background-size: 400%;
    animation: birds 1.2s steps(1) infinite;
}

@keyframes birds {
    0% {
        background-position: 0%;
    }
    16% {
        background-position: -100%;
    }
    33% {
        background-position: -200%;
    }
    49% {
        background-position: -300%;
    }
    66% {
        background-position: -200%;
    }
    82% {
        background-position: -100%;
    }
}

#deer {
    padding-top: 287.9%;
    left: 45.2%;
    width: 54.8%;
    filter: brightness(90%) saturate(115%);
    position: absolute;
    animation: float2 4s ease-in-out infinite alternate;
}

.deer {
    padding-bottom: 240%;
    width: 100%;
    height: 0;
    position: relative;
    background: url('assets/deer.png');
    background-size: 1400%;
    animation: deer 2.5s steps(14) infinite;
}

@keyframes deer {
    100% {
        background-position: -1400% 0;
    }
}

#cow {
    padding-top: 550%;
    left: 0%;
    width: 99.9%;
    opacity: 92%;
    position: absolute;
}

.cow {
    padding-bottom: 100%;
    height: 0;
    position: relative;
    background: url('assets/cow.png');
    background-size: 600%;
    animation: cow 2.2s steps(1) infinite;
}

@keyframes cow {
    0% {
        background-position: 0%;
    }
    10% {
        background-position: -100%;
    }
    20% {
        background-position: -200%;
    }
    30% {
        background-position: -300%;
    }
    40% {
        background-position: -400%;
    }
    50% {
        background-position: -500%;
    }
    60% {
        background-position: -400%;
    }
    70% {
        background-position: -300%;
    }
    80% {
        background-position: -200%;
    }
    90% {
        background-position: -100%;
    }
}

#titlecard-container {
    padding-top: 620%;
    left: 7.5%;
    width: 87%;
    opacity: 100%;
    position: absolute;
    animation: float1 2s ease-in-out infinite alternate;
}

#titlecard {
    padding-bottom: 65%;
    width: 100%;
    height: 0;
    position: relative;
    background: url('assets/titlecard.png');
    background-size: 2000.1%;
    animation: phase2 2s steps(1) infinite;
}

@keyframes phase1 {
    0% {
        background-position: 0%;
    }
    16% {
        background-position: -100%;
    }
    32% {
        background-position: -200%;
    }
    48% {
        background-position: -300%;
    }
    64% {
        background-position: -400%;
    }
    80% {
        background-position: -500%;
    }
    100% {
        background-position: -600%;
    }
}

@keyframes phase2a {
    0% {
        background-position: -600%;
    }
}

@keyframes phase2b {
    0% {
        background-position: -700%;
    }
}

@keyframes phase2c {
    0% {
        background-position: -800%;
    }
}

@keyframes phase2d {
    0% {
        background-position: -900%;
    }
}

@keyframes phase2e {
    0% {
        background-position: -1000%;
    }
}

@keyframes phase2f {
    0% {
        background-position: -1100%;
    }
}

@keyframes phase2g {
    0% {
        background-position: -1200%;
    }
}

@keyframes phase2h {
    0% {
        background-position: -1300%;
    }
}

@keyframes phase2i {
    0% {
        background-position: -1400%;
    }
}

@keyframes phase3 {
    0% {
        background-position: -1500%;
    }
    12% {
        background-position: -1600%;
    }
    25% {
        background-position: -1700%;
    }
    37% {
        background-position: -1600%;
    }
    50% {
        background-position: -1500%;
    }
    62% {
        background-position: -1800%;
    }
    75% {
        background-position: -1900%;
    }
    87% {
        background-position: -1800%;
    }
}

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

.nav {
    padding-top: 395%;
}

}

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

#background6 {
    padding-top: 770%;
}

.nav {
    padding-top: 427%;
}

}

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

.nav {
    padding-top: 437%;
}

}

@media screen and (min-width: 590px) {

#cow {
    padding-top: 575%;
}

#background4 {
    padding-top: 460%;
}

#background5 {
    padding-top: 515%;
}

#background6 {
    padding-top: 760%;
}

.nav {
    padding-top: 395%;
}

}

::-webkit-scrollbar {
    display: none;
}