html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
    background: black;
    background-image: url("https://www.cultofpotatoducks.com/resources/background-light.png");
    background-size:cover;
}

label {
    color: rgb(255, 234, 196);
}

label[name=welcome] {
    font-size: 40px;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    padding-left: 2px;
    padding-right: 2px;
    opacity: 0%;
    animation: fade-in 6s ease-in-out forwards 4s;
}

div.welcome {
    margin-top: 80px;
}

div[name=welcome1] {
    animation: breathing-welcome1 2s ease-in-out forwards infinite alternate;
    display: inline;
}

div[name=welcome2] {
    animation: breathing-welcome2 2s ease-in-out forwards infinite alternate;
    display: inline-block;
}

div[name=welcome3] {
    animation: breathing-welcome3 2s ease-in-out forwards infinite alternate;
    display: inline-block;
}

div[name=welcome4] {
    animation: breathing-welcome4 2s ease-in-out forwards infinite alternate;
    display: inline-block;
}

div[name=welcome5] {
    animation: breathing-welcome5 2s ease-in-out forwards infinite alternate;
    display: inline-block;
}

div[name=welcome6] {
    animation: breathing-welcome6 2s ease-in-out forwards infinite alternate;
    display: inline-block;
}

div[name=welcome7] {
    animation: breathing-welcome7 2s ease-in-out forwards infinite alternate;
    display: inline-block;
}


#page {
    display: flex;
    width: 100%;
    height: 100%;

    justify-content: center;
    align-items: center;
    text-align: center;
    line-break: auto;

}

div.vcenter {
    width: 100%;
    height: 50%;

    text-align: center;
    position: relative;
}


div.hcenter {
    width: 100%;
    height: 100%;
}

div.cards {
    display: inline-flex;
    height: 100%;

}

.duck-wrapper {
    height:100%;
    animation: breathing 3s ease-in-out forwards infinite alternate;
}

.duck {
    aspect-ratio: 691/1050;
    height:100%;
    opacity: 0;
    transition: 0.3s cubic-bezier(0.5,-1,0,2);
}

.duck.ready:hover {
    transform: rotate(5deg);
}

.duck.ready:active {
    transition: 0.1s;
    transform: scale(0.85);
}



.discord-wrapper {
    width: auto;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    animation: breathing 3s ease-in-out forwards infinite alternate;
}

.discord {
    aspect-ratio: 691/1050;
    display: inline-flex;
    width: fit-content;
    height: 100%;
    transition: 0.3s cubic-bezier(0.5,-1,0,2);
    animation: card-flip-in 0.3s ease-out forwards;
    z-index: 1;

}

.discord #card {
    height: 100%;
    width: 100%;
}

.discord #patch {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    height: 25%;
}

.discord.ready:hover {
    transform: rotate(5deg);
}

.discord #patch:active {
    transition: 0.1s;
    transform: translateX(-50%) scale(0.95);
}



.minecraft-wrapper {
    width: auto;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    animation: breathing 3s ease-in-out forwards infinite alternate;
}

.minecraft {
    aspect-ratio: 691/1050;
    display: inline-flex;
    width: fit-content;
    height: 100%;
    transition: 0.3s cubic-bezier(0.5,-1,0,2);
    opacity: 0;
    animation: card-slide-in-right 0.3s ease-out forwards 0.31s;
    z-index: 0;
}

.minecraft #card {
    height: 100%;
    width: 100%;
}

.minecraft.ready:hover {
    transform: rotate(5deg);
}


.future-wrapper {
    width: auto;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    animation: breathing 3s ease-in-out forwards infinite alternate;
}

.future {
    aspect-ratio: 691/1050;
    display: inline-flex;
    width: fit-content;
    height: 100%;
    transition: 0.3s cubic-bezier(0.5,-1,0,2);
    opacity: 0;
    animation: card-slide-in-left 0.3s ease-out forwards 0.31s;
    z-index: 0;

}

.future #card {
    height: 100%;
    width: 100%;
}

.future.ready:hover {
    transform: rotate(5deg);
}


.toggleSound {
    position:absolute;
    right: 10px;
    bottom: 10px;
}

@keyframes fade-in {
    100% {
        opacity: 100%;
    }
}

@keyframes card-fade-in {
    0% {
        transform: translateY(-50%);
        opacity: 0%;
    }

    100%{
        opacity: 100%;
    }
}


@keyframes breathing {
    0% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(2deg);
    }

}



@keyframes breathing-welcome1 {
    0% {
        transform: translateY(2%);
    }
    100% {
        transform: translateY(-2%);
    }
}

@keyframes breathing-welcome2 {
    0% {
        transform: translateY(4%);
    }
    100% {
        transform: translateY(-4%);
    }
}

@keyframes breathing-welcome3 {
    0% {
        transform: translateY(6%);
    }
    100% {
        transform: translateY(-6%);
    }
}

@keyframes breathing-welcome4 {
    0% {
        transform: translateY(8%);
    }
    100% {
        transform: translateY(-8%);
    }
}

@keyframes breathing-welcome5 {
    0% {
        transform: translateY(6%);
    }
    100% {
        transform: translateY(-6%);
    }
}

@keyframes breathing-welcome6 {
    0% {
        transform: translateY(4%);
    }
    100% {
        transform: translateY(-4%);
    }
}

@keyframes breathing-welcome7 {
    0% {
        transform: translateY(2%);
    }
    100% {
        transform: translateY(-2%);
    }
}


@keyframes card-flip-out {
    100% {
        transform: rotateY(-90deg);
    }
}

@keyframes card-flip-in {
    0% {
        transform: rotateY(-90deg);
    }
    100% {
        opacity: 1;
    }
}

@keyframes card-slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }
    100% {
        opacity: 1;
    }
}

@keyframes card-slide-out-left {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%);
    }
}

@keyframes card-slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50%);
    }
    100% {
        opacity: 1;
    }
}

@keyframes card-slide-out-right {
    0%{
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(50%);
    }
}

@keyframes fade-out {
    100% {
        opacity: 0;
    }
}