/* CSS for stickel-stickel*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

/* mont - bold */
@font-face {
    font-family: 'Mont Bold';
    src: url('fonts/Fontfabric-MontBold.otf');
}

/* mont - book */
@font-face {
    font-family: 'Mont Book';
    src: url('fonts/Fontfabric-MontBook.otf');
}

.parent {
    position: relative;
    top: 0;
    left: 0;
  }

body {
    animation-name: bgcolor;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}


h1{
    animation-name: textcolor;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}


h2{
    font-family: 'Mont Book';
    font-size: 25px;
    font-weight: 500;
}

a, a:link, a:visited {
    display: inline-block;
    color: rgba(22,21,26,255);
    text-decoration: none;
}
#links a:hover{
    color: rgba(109,111,150,255);
}

#sidelink a,#sidelink a:link,#sidelink a:visited{
    animation: textcolor 30s infinite;
}

#sidelink a:hover{
    color: rgba(109,111,150,255);
}

.links{
    position:absolute;
    text-align: right;
    left: 5.8vw;
    top: 640px;
    height: 20;
}
.sidetext{
    position: absolute;
    top: 100px;
    left: 765px;
    text-align: right;
    animation: textcolor 30s infinite;
}
.svg-animation-container{
    width: 500px;
    padding: 24px;
    margin: -0px ;
}
.svg-animation-container svg{
    width: 100%;
    height: 100%;
}

#Text{
    height: 150;
    position: relative;
    right: -440px;
    margin: 0;
    animation: textcolor 30s infinite;
}
#Portrait{
    position: absolute;
    top: 250px;
    left: 250px;
    width: 270px;
}
#Fox{
    height:10;
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

.textanimation{
    position: relative;
    right: -460px;
    margin: 0;
    font-family: 'Mont Bold';
    font-size: 1em;
    font-weight:500;
    letter-spacing: .1em;
    color: rgb(8, 159, 123);
    animation: textcolor 30s infinite;
}
.linkanimation{
    position: relative;
    right: -530px;
    margin: 0;
    font-family: 'Mont Bold';
    font-size: 1em;
    font-weight:500;
    letter-spacing: .1em;
    color: rgb(8, 159, 123);
    word-spacing: 18px;
    animation: textcolor 30s infinite;
}

.headeranimation{
    position: relative;
    right: -30vw;
    margin: 0;
    font-family: 'Mont Bold';
    font-size: 3em;
    font-weight:500;
    letter-spacing: .1em;
    color: rgb(8, 159, 123);
    animation: textcolor 30s infinite;
}

p{
    animation: textcolor 30s infinite;

    position: relative;
    right: -30vw;
    margin: 0;
    font-family: 'Mont Bold';
    font-size: 1.3em;
    font-weight:500;
    letter-spacing: .1em;
}

@keyframes bgcolor {
    0% {background-color:rgb(200, 188, 229);}
    20% {background-color:rgb(241, 182, 202);}
    40% {background-color: rgb(100, 112, 50);}
    60% {background-color:rgb(8, 159, 123);}
    80% {background-color:rgb(222, 243, 102);}
    100% {background-color:rgb(62, 57, 94);}


}

 

@keyframes textcolor {
    0% {color: rgb(59, 56, 93);}
    0% {fill: rgb(59, 56, 93);}

    20% {color:rgb(27, 159, 122);}
    20% {fill:rgb(27, 159, 122);}
    
    40% {color:rgb(225, 182, 214);}
    40% {fill:rgb(225, 182, 214);}
    
    60% {color:rgb(219, 224, 95);}
    60% {fill:rgb(219, 224, 95);}

    80% {color:rgb(100, 112, 51);}
    80% {fill:rgb(100, 112, 51);}

    100% {color:rgb(200, 188, 229);}
    100% {fill:rgb(200, 188, 229);}
}

@media screen and (max-width: 600px)  {
    .desktop-break { display: none; }
}

@media screen and (max-width:600px)
{
    
    h2{
        font-family: 'Mont Book';
        font-size: 16px;
        font-weight: 500;
    }
    
    .textanimation{
        position: relative;
        right: -6vw;
        margin: 0;
        font-family: 'Mont Bold';
        font-size: 1em;
        font-weight:500;
        letter-spacing: .1em;
        color: rgb(8, 159, 123);
        animation: textcolor 30s infinite;
    }

    .svg-animation-container{
        width: 300px;
        padding: 24px;
        margin: -0px ;
    }

    .sidetext{
        position: absolute;
        top: 70px;
        left: 52vw;
        text-align: right;
        animation: textcolor 30s infinite;
    }

    .links{
        position:absolute;
        text-align: left;
        left: -550px;
        top: 640px;
        height: 10;
        font-size: 19px;
    }
    .linkanimation{
        position: relative;
        right: -580px;
        top: -70px;
        margin: 0;
        font-family: 'Mont Bold';
        font-size: .7em;
        font-weight:500;
        letter-spacing: .1em;
        color: rgb(8, 159, 123);
        word-spacing: 10px;
        animation: textcolor 30s infinite;
        text-align: center;
    }
    

    #Text{
        height: 150;
        position: relative;
        right: 0vw;
        margin: 0;
        animation: textcolor 30s infinite;
    }
    #Portrait{
        position: absolute;
        align-self: center;
        top:170px;
        width: 220px;
        left: 18vw;
    }

    
   
}