* {
    box-sizing: border-box;
  }
  
  .xman {
    width: 90%;
    margin: 0 auto;
    border: 10px solid #0000ff;
    padding: 10px;
  }
 
.background-image 
{
    background-image: url('Resources/sus.gif');
    background-size: 8vw;
    background-repeat: repeat;
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1;
}
  

.background-image-cringe
{
    background-image: url('Resources/strongcringe.gif');
    background-size: 20vw;
    background-repeat: repeat;
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1;
    min-height: 110%;
    top: -1%;
}

/* https://stackoverflow.com/questions/54702124/rainbow-text-animation-using-only-css */
.rainbow 
{
    text-align: center;
    text-decoration: underline;
    font-size: 10vw;
    font-family: monospace;
    letter-spacing: 1vw;
    z-index: 10000;
}


.rainbow_smol
{
    text-align: center;
    text-decoration: underline;
    font-size: 5vw;
    font-family: monospace;
    letter-spacing: 1vw;
    z-index: 10000;
}


.rainbow-scaped
{
    text-align: center;
    text-decoration: underline;
    font-size: 10vw;
    font-family: monospace;
    letter-spacing: 1vw;
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

.rainbow_text_animated 
{
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
    z-index: 10000;
}

.rainbow_text_animated_but_sad
{
    background: linear-gradient(to right, rgb(255, 255, 29), #00ffff , #00ff99, #ff0000, #0000ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes rainbow_animation
 {
    0%,100% 
    {
        background-position: 0 0;
    }
    50%
     {
        background-position: 100% 0;
    }
}

.content 
{
    /* background: rgba(255, 255, 255, 0.35); */
    /* border-radius: 3px; */
    /* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); */
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    top: 10px;
    left: 0;
    position: fixed;
    margin-left: 20px;
    margin-right: 20px;
    right: 0;
    z-index: 9;
    padding: 0 10px;
    mix-blend-mode: difference;
  }

  
.cf
{
    /* background: rgba(255, 255, 255, 0.35); */
    /* border-radius: 3px; */
    /* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); */
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    top: 10px;
    left: 0;
    position: fixed;
    margin-left: 20px;
    margin-right: 20px;
    right: 0;
    z-index: 0;
    padding: 0 10px;
    text-overflow: ellipsis;
  }

.cf-boxed
{
    /* background: rgba(255, 255, 255, 0.35); */
    /* border-radius: 3px; */
    /* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); */
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}


.fecal_skeleton
{
    position: absolute;
    display: block;
    height: 100%;
    inline-size: 50%;
    left: 25%;
    z-index: -1;
}

.sundown
{
    position: absolute;
    display: none;
    height: 100%;
    inline-size: 50%;
    left: 25%;
    z-index: 100;
}

.sub
{
    position: absolute;
    z-index: 99;
    transform: rotate3d(0, 1, 0, 0deg);
    top: 62%;
    left: 78%;
    -webkit-animation: speen 1s infinite linear;
    animation: speen 1s infinite linear;
    mix-blend-mode: multiply;
    width: 5vw;
    height: 2vw;
}


.benjamin
{
    position: absolute;
    z-index: 100;
    top: 1vw;
    left: 1vw;
    mix-blend-mode: initial;

}

.benjaminImage
{
    max-height: 10%;
    max-width: 10%;
}


.xmanBtn
{
    position: absolute;
    z-index: 100;
    top: 5vw;
    left: 1vw;
    mix-blend-mode: initial;
 

}

.russianXmanImage
{
    max-height: 25%;
    max-width: 25%;
}

@-webkit-keyframes speen {
    0% { 
       -webkit-transform: rotate3d(1, 1, 1, 0deg);
       -ms-transform: rotate3d(1, 1, 1, 0deg);
       -o-transform: rotate3d(1, 1, 1, 0deg);
       transform: rotate3d(1, 1, 1, 0deg);
    }
    50% { 
       -webkit-transform: rotate3d(1, 1, 1, 180deg);
       -ms-transform: rotate3d(1, 1, 1, 180deg);
       -o-transform: rotate3d(1, 1, 1, 180deg);
       transform: rotate3d(1, 1, 1, 180deg);
    }
    100% { 
        -webkit-transform: rotate3d(1, 1, 1, 360deg);
       -ms-transform: rotate3d(1, 1, 1, 360deg);
       -o-transform: rotate3d(1, 1, 1, 360deg);
       transform: rotate3d(1, 1, 1, 360deg);
    }
}

.bad_meme
{
    width: 50%;
}