/* Stylesheet für (d/m)eineXYZdomain.de */
@charset "utf-8";
body {
    background: #22CBD4;
    font-family: Arial, Helvetica, Futura, Verdana, sans-serif;
    font-size: 24px;
    color: #ffffff;
    height: 100vh;
    min-height: 100vh
}
.tolle {
    background: linear-gradient(150deg,#88c8aa,#2b9bb0,#ef00ff,#f0ff00);
    background-size: 240% 240%;
    animation: gradient-animation 4s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.coole {
    background: linear-gradient(320deg,#4cd2e4,#ffffff,#00f5ff,#00866d);
    background-size: 240% 240%;
    animation: gradient-animation 8s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.geile {
    background: linear-gradient(300deg,deepskyblue,blue,#001967);
    background-size: 180% 180%;
    animation: gradient-animation 18s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.top {
    background: linear-gradient(120deg,#f4c9df,#6b2383,#ca00ff);
    background-size: 180% 180%;
    animation: gradient-animation 15s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.spitzen {
    background: linear-gradient(110deg,#3a3a3a,#a5a5a5,#c6c6c6,#787878,#000000);
    background-size: 300% 300%;
    animation: gradient-animation 15s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.super {
    background: linear-gradient(270deg,#ffd600,#ffc546,#ffefaf,#ffd000,#b36700);
    background-size: 300% 300%;
    animation: gradient-animation 25s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.hammer {
    background: linear-gradient(340deg,#b30000,#ff8000,#ffe900,#a3ff00,#00ffcf,#0037ff,#d300ff);
    background-size: 200% 200%;
    animation: gradient-animation 7s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.krasse {
    background: linear-gradient(220deg,#008640,#00c68d,#3dffc7,#00e766,#028664);
    background-size: 300% 300%;
    animation: gradient-animation 15s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.klasse {
    background: linear-gradient(320deg,#d300ff,#f0a5ff,#80009b);
    background-size: 180% 180%;
    animation: gradient-animation 27s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.knaller {
    background: linear-gradient(200deg,#ff5c00,#fff200,#9f0000,#ff8024);
    background-size: 240% 240%;
    animation: gradient-animation 12s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.crazy {
    background: linear-gradient(350deg,#00ff1b,#ff009d,#e5ff00,#0024ff,#ff0000,#d300ff,#ffffff);
    background-size: 420% 420%;
    animation: gradient-animation 21s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.nice {
    background: linear-gradient(300deg,#e91ce5,#e4d69d,#af0e53,#d7e8f1);
    background-size: 240% 240%;
    animation: gradient-animation 4s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    overflow: hidden;
}
.fette {
    background: linear-gradient(350deg,#00ff1b,#ff009d,#e5ff00,#0024ff,#ff0000,#d300ff,#ffffff);
    background-size: 420% 420%;
    animation: gradient-animation 21s ease infinite;


    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
             background-position: 100% 50%;
        }
        100% {
              background-position: 0% 50%;
        }
    }
    overflow: hidden;
}

#domainname {
min-width: 300px;
width: 66%;
min-height: 25px;
border: 3px solid #ffffff;
border-radius: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
-webkit-box-shadow: 10px 10px 25px 10px rgba(0,0,0,0.33);
box-shadow: 10px 10px 25px 10px rgba(0,0,0,0.33);
}
#domainname p {
text-align: left;
}
.gradient-background {
    background: linear-gradient(120deg,#ff2200,#b30000,#ffae00,#ff2400,#ff6343);
    background-size: 300% 300%;
    animation: gradient-animation 25s ease infinite;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.nice-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-nice.svg'); background-repeat: repeat;
}
.fette-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-fette.svg'); background-repeat: repeat;
}
.crazy-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-crazy.svg'); background-repeat: repeat;
}
.hammer-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-hammer.svg'); background-repeat: repeat;
}
.knaller-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-knaller.svg'); background-repeat: repeat;
}
.geile-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-geile.svg'); background-repeat: repeat;
}
.tolle-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-tolle.svg'); background-repeat: repeat;
}
.coole-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-coole.svg'); background-repeat: repeat;
}
.top-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-top.svg'); background-repeat: repeat;
}
.spitzen-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-spitzen.svg'); background-repeat: repeat;
}
.super-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-super.svg'); background-repeat: repeat;
}
.klasse-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-klasse.svg'); background-repeat: repeat;
}
.krasse-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-krasse.svg'); background-repeat: repeat;
}
.mega-pattern {
    background-color: rgba(0,0,0,0.33);
    background-image: url('seampatt-mega.svg'); background-repeat: repeat;
}