@font-face {
    font-family: 'v5_xtenderregular';
    src: url('fonts/v5xtende-webfont.woff2') format('woff2'),
         url('fonts/v5xtende-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@keyframes rainbow {to{filter:hue-rotate(360deg);}}

@keyframes blink {50%{opacity:0;}}

@keyframes transcend {
                to{filter:hue-rotate(360deg);}
                0%{transform:scale(1) rotate(0deg);
                letter-spacing: 0vw;
                background-color:#e0e0f9;}
                33%{transform:scale(1.01) rotate(-.1deg);
                letter-spacing:.02vw;
                background-color:#8686a0;}
                66%{transform:scale(.99) rotate(.1deg);
                letter-spacing:-.02vw;
                background-color:#76916c;}
            }



body {
    margin:0;
    width:100vw;
    height:100vh;
    background-color:#e0e0f9;
    background-image:url("images/textures/xv.png");
    cursor:url("images/cursors/sparkle_heart.png"), auto;
    font-family: 'v5_xtenderregular';
    overflow-y:hidden;
}

h1 {
    color:#28282;
    text-align:right;
    margin-right:2vw;
    text-shadow: .3vw .3vw #4c9fdb,
                .5vw .5vw #e0e0f9,
                -.3vw -.3vw #dd4bcc,
                .6vw .6vw #dd4bcc,
                -.5vw -.5vw #e0e0f9,
                -.6vw -.6vw #4c9fdb,
                -.9vw -.9vw #cc6e42,
                .9vw .9vw #cc6e42,
                -.7vw -.7vw #e0e0f9;

    margin-top:0;
    font-size:1.75vw;
    word-wrap:break-word;
    text-indent:-3vw;
}

    h2 {
    color:#ffffff;
      -webkit-text-stroke-width: .05vw;
  -webkit-text-stroke-color: indigo;
    text-align:center;
    
    text-shadow: .3vw .1vw #4c9fdb,
                .2vw .2vw #e0e0f9,
                -.1vw -.1vw #dd4bcc,
                .3vw .3vw #dd4bcc,
                -.2vw -.2vw #e0e0f9,
                -.3vw -.3vw #4c9fdb,
                -4.5vw -4.5vw #cc6e42,
                4.5vw 4.5vw #cc6e42,
                -2.4vw -2.4vw #e0e0f9;

    margin-top:1vh;
    font-size:1.5vw;
    animation: rainbow 6s infinite alternate linear;
    
    }
    
ul {
    list-style:none;
}

li {
    padding:0;
}


h3 {
    animation:blink 1s linear infinite;
    text-align:right;

}

h4 {
    animation:blink 1.1s linear infinite;
}

a {
    display:block;
    cursor:url("images/cursors/broken_heart.png"), auto;
    display:block;
    margin-bottom:.5em;
    text-decoration: none;
    color: #e0e0f9;
    transition: color .5s linear;
}

img {
    cursor:url("images/cursors/broken_heart.png"),auto;
}

a:hover {
    color:black;
}

.content {
    background-image:url("images/textures/skulls.png");
    overflow:hidden;
}


#header_div {
    position:absolute;
    animation: rainbow 20s infinite;
}

#logo_img {
    position:fixed;
    height:90vh;
    top:5vh;
    bottom:5vh;
    left:7vw;
    right:50vw;
}

#title_div {
    position: absolute;
    left:42vw;
    top:62vh;
    right:13vw;
    padding:.5vw;
    font-size:1vw;
    max-height:6vh;
    background-color:#4a4fa9;
    border-radius: 2vw 2vw 2vw 2vw;
    z-index:0;
    border: 3px solid black;
    /*scrollbar-color:#e0e0f9 transparent;
    scrollbar-width: thin;*/
}

#links_div {
    position: absolute;
    left:60vw;
    top:6vh;
    right:5vw;
    background-color:#4c9fdb;
    border-radius: 2vw 0 0 2vw;
    padding:.5vw;
    font-size:1vw;
    max-height:9vh;
    transition: max-height 0.35s;
    z-index:4;
    /*scrollbar-color:#e0e0f9 transparent;
    scrollbar-width: thin;*/
}

#links_div h1 {
      animation: rainbow 3s infinite alternate linear;}

#links_div:hover {
    transition: max-height .5s ease-in;
    max-height: 500px;
}

#secondary_links_div {
    font-size:1vw;
    background-color:#dd4bcc;
    position: absolute;
    left:60vw;
    top:18vh;
    right:5vw;
    border-radius: 2vw 0 0 2vw;
    padding:.5vw;
    max-height:9vh;
    transition: max-height 0.35s;
    z-index:3;
    /*overflow-y:scroll;
    scrollbar-width:thin;
    scrollbar-color:#e0e0f9 transparent;*/
}

#secondary_links_div h1 {
      animation: rainbow 2.4s infinite alternate linear;}

#secondary_links_div:hover {
    transition: max-height .5s ease-in;
    max-height: 500px;
}

#friends_div {
    font-size:1vw;
    background-color:#af6340;
    position: absolute;
    left:60vw;
    top:30vh;
    right:5vw;
    border-radius: 2vw 0 0 2vw;
    padding:.5vw;
    max-height:9vh;
    transition: max-height 0.35s;
    z-index:2;
}

#friends_div h1 {
      animation: rainbow 4.5s infinite alternate linear;}

#friends_div:hover {
    transition: max-height .5s ease-in;
    max-height: 500px;
}

#transport_div {
    z-index:1;
    position:absolute;
    left:60vw;
    right:5vw;
    top:42vh;
    background-color:#519232;
    padding: .5vw;
    border-radius: 2vw 0 0 2vw;
    max-height:9vh;
    transition: max-height 0.35s;
    font-size:1vw;
    /*overflow-y: scroll;
    scrollbar-color:#e0e0f9 transparent;
    scrollbar-width: thin;*/
}

#transport_div h1 {
      animation: rainbow 3.5s infinite alternate linear;}

#transport_div:hover {
    transition: max-height .5s ease-in;
    max-height: 500px;
}


#about_div {
    position:fixed;
    text-align:right;
    font-size:3vh;
    top:73vh;
    left:30vw;
    bottom:5vh;
    right:5vw;
    height:10vh;
    z-index:0;
}

#about_div i {
    font-size:.7em;
    margin-right:.5vw;
    filter:drop-shadow(3px 3px 0px rgba(0,0,0,.25));
}

#about_div a {
    display:inline;
    color:#dd4bcc;
}

#about_div a:hover {
    color:black;    
}

@media screen and (max-width: 800px) {

    body {
        margin:0;
        overflow-y:scroll;
        overflow-x:hidden;
        font-size:2em !important;
    }

    #logo_img {
        display:block;
        position:static !important;
        width:90vw;
        left:0;
        right:0;
        bottom:0;
        top:0;
    }

    #header_div {
        position:static !important;
        width:90vw !important;
        margin-left:5vw;
        margin-right:5vw;
        margin-top:-7vh;
    }
    

    .content {
        border-radius:4vw 4vw 4vw 4vw !important;
        left:4vw !important;
        right:4vw !important;
        top: 0 !important;
        bottom: 0 !important;
        width:92vw;
        position:relative !important;
        margin-bottom: 1vh;
        max-height:100vh !important;
        height: auto !important;
        padding:.1vw !important;
        padding-top:.5vh !important;
        font-size:.6em !important;
        word-wrap: break-word;
        text-indent:-3vw;
    }
    

    h1 {
        font-size:7.4vw !important;
        text-align:center;
        text-shadow: 1vw 1vw #4c9fdb,
        1.5vw 1.5vw #e0e0f9,
        -.6vw -.6vw #dd4bcc,
        1.2vw 1.2vw #dd4bcc,
        -1vw -1vw #e0e0f9,
        -1.2vw -1.2vw #4c9fdb,
        -1.8vw -1.8vw #cc6e42,
        1.8vw 1.8vw #cc6e42,
        -1.4vw -1.4vw #e0e0f9;
    }
    
      h2 {
        font-size:6.4vw !important;
        text-align:center;
        text-shadow: 1vw 1vw #4c9fdb,
        1.5vw 1.5vw #e0e0f9,
        -.6vw -.6vw #dd4bcc,
        1.2vw 1.2vw #dd4bcc,
        -1vw -1vw #e0e0f9,
        -1.2vw -1.2vw #4c9fdb,
        -1.8vw -1.8vw #cc6e42,
        1.8vw 1.8vw #cc6e42,
        -1.4vw -1.4vw #e0e0f9;
    }

    #about_div {
        position:relative;
        left:4vw !important;
        top:0 !important;
        right:4vw !important;
        width: 92vw;
        padding:.1vw !important;
        font-size:.6em;
    }

}