@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');

body{
 background: rgb(95,0,255);	
}

#blank {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    user-select: none;
    visibility: hidden;
}

.doge {
    width: 75px;
    height: 75px;
    position:fixed;
    animation: rotate 1s linear 0s infinite normal;
    user-select: none;
}

#doge3 {
    user-select: none;
    position: fixed;
    bottom: -2px;
    text-align: center;
    left: 50%;
    width: 1%;
    height: 1%;
}

#secretDoge a{
    color: white;
    font-size: 0.5em;
    font-family: 'Baloo 2', cursive;
    bottom: 3%;
    left: 50%;
    position: fixed;
    user-select: none;
}


.button {
    width: 60px;
    height: 60px;
    position: fixed;
    padding: 5px;
    background: rgba(0, 0, 0, 0.15);
    user-select: none;
}

#darkMode {
    bottom: 9%;
    right: 5%;
    position: fixed;
}

#darkAnnounce {
    bottom: 40%;
    right: 35%;
    background: white;
    position: fixed;
    width: 30%;
    height: 25%;
    border-radius: 10px;
    z-index: 2;
    visibility: hidden;
}

#announce{
    color: black;
    font-size: 2em;
    font-family: 'Baloo 2', cursive;
    text-decoration: none;
    text-align: center;
    padding-top: 7%;
    user-select: none;
}

#announceBtn{
    position: absolute;
    width: 25%;
    height: 25%;
    user-select: none;
    bottom: 10%;
    right: 39%;
}


#stinkt a{
	text-align: center;
    font-size: 650%;
    font-weight: bold;
    padding: 20px 0 20px 0;
    width: 10em;
    height: 1em;
    font-family: 'Baloo 2', serif;
    user-select: none;
}

#stinkt{
-webkit-animation:rotate 3s linear 0s infinite normal;
-moz-animation:rotate 3s linear 0s infinite normal;
animation:rotate 3s linear 0s infinite normal;
}

#stinkt {
    top: 40%;
    left: 34%;
    position: fixed;
}


#nicht{
	bottom: 10%;
	left: 43%;
	position: fixed; 
	animation:font 9s linear 0s infinite normal;
}	

#nicht a{
	text-align: center;
	font-size: 600%;
    user-select:none;
}



@keyframes font{
	0%, 100% {font-family: 'Permanent Marker', cursive;}
    10%, 20% {font-family: 'Rubik Microbe', cursive;}
    30%, 40% {font-family: 'Rubik Puddles', cursive;}
    50%, 60% {font-family: 'Rubik Glitch', cursive;}
    70%, 80% {font-family: 'Faster One', cursive}
    90% {font-family: 'Over the Rainbow', cursive;}
}

@-webkit-keyframes rotate {
100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes rotate {
	100%{ transform: rotate(360deg); }

    0%, 100% {color: red;}
    10% {color: rgb(255, 136, 0);}
    20% {color: rgb(255, 230, 0);}
    30% {color: rgb(179, 255, 0);}
    40% {color: rgb(47, 167, 0);}
    50% {color: rgb(0, 255, 128);}
    60% {color: rgb(0, 255, 234);}
    70% {color: rgb(0, 98, 255);}
    80% {color: rgb(174, 0, 255);}
    90% {color: rgb(255, 0, 191);}
}



@font-face {
   font-family: 'Permanent Marker';
   src: url('/fonts/PermanentMarker-Regular.ttf');
}

@font-face {
   font-family: 'Rubik Microbe';
   src: url('/fonts/RubikMicrobe-Regular.ttf');
}

@font-face {
   font-family: 'Rubik Puddles';
   src: url('/fonts/RubikPuddles-Regular.ttf');
}

@font-face {
   font-family: 'Rubik Glitch';
   src: url('/fonts/RubikGlitch-Regular.ttf');
}

@font-face {
   font-family: 'Faster One';
   src: url('/fonts/FasterOne-Regular.ttf');
}

@font-face {
   font-family: 'Over the Rainbow';
   src: url('/fonts/OvertheRainbow-Regular.ttf');
}