@charset "utf-8";

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

#welcomeSign {
    --borderSize: 0.125em;
    font-size: 2.5em;
    display: table;
    margin: auto;
    padding: 4px;
    text-align: center;
    border: var(--borderSize) dotted transparent;
    border-radius: 16px;
    background-position: calc(var(--borderSize) * -1) calc(var(--borderSize) * -1);
    background-size: calc(var(--borderSize) * 2 + 100%) calc(var(--borderSize) * 2 + 100%);
    background-image:
        linear-gradient(to right, white, white),

        conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red);
    ;
    background-clip: padding-box, border-box;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	font-size: 40px;
}

#coins {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px;
    font-size: 30px;
}

#coinCounterImage {
    background-image: url(../images/coin.gif);
    height: 35px;
    width: 35px;
    background-size: 70px;
    background-position: center;
}

.errorContainer {
    color: #DD2222FF;
}

.succesContainer {
    color: #22BB22FF;
}

#shopBox {
    text-align: center;
}

#birdsShowcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    margin: auto;
    max-width: 1200px;
}

.cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
    border-radius: 16px;
    height: 200px;
    margin: 16px;
    margin-top: 0px;
	font-size: 15px;
}

.coinImage {
    background-image: url(../images/coin.gif);
    height: 25px;
    width: 25px;
    background-size: 50px 50px;
    background-position: center center;
}

.priceContainer {
    display: flex;
    align-items: center;
}

.priceContainer .red {
    color: #DD2222FF;
}

.priceContainer .blue {
    color: blue;
}

.priceContainer .green {
    color: #22BB22FF;
}