:root {
    font-family: Atkinson Hyperlegible;
    --global--background-color: #0e0e0e;
    --global--font-color: #fcfcfc;
    --global--heatwave-orange: #512205;
}

body {
    background: repeating-linear-gradient(
        45deg, 
        var(--global--background-color),
        var(--global--background-color) 40px,
        var(--global--heatwave-orange) 40px,
        var(--global--heatwave-orange) 43px
    );
    padding-right: 10%;
    padding-left: 10%;
}

@media all and (min-width:0px) and (max-width: 768px) {
    body {
        padding-right: 3%;
        padding-left: 3%;
    }

    h1 {
        padding-top: 10px;
    }
}

h1 {
    color: var(--global--font-color);
    font-size: min(6rem, 17vw);
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

p {
    color: var(--global--font-color);
    font-size: 1.5rem;
    text-align: justify;
}

.media {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.logo {
    width: min(50%, 204px);
}

.donate-button {
    width: min(100%, 400px);
    margin-top: 35px;
    margin-bottom: 35px;

    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.donate-button:hover {
    transform: scale(1.05);
    animation: rotation 1s ease-in-out infinite;
}

@keyframes rotation{
    0% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}