/*
kognigear and vcrjp by UkiyoMoji:
https://www.1001fonts.com/users/UkiyoMoji/

conthrax by Raymond Larabie:
https://www.1001fonts.com/users/typodermic/
*/

/* soo many fonts... */
@font-face {
    font-family: "futura";
    src: url("assets/futura.ttf") format("truetype");
}
@font-face {
    font-family: "vcrjp";
    src: url("assets/vcr-jp.regular.ttf") format("truetype");
}
@font-face {
    font-family: "conthrax";
    src: url("assets/conthrax.semi-bold.otf") format("truetype");
}
@font-face {
    font-family: "walkerbot";
    src: url("assets/walker-bot-ldr.regular.ttf") format("truetype");
}
@font-face {
    font-family: "visitor1";
    src: url("assets/visitor1.ttf") format("truetype");
}

body{
    font-family: "futura", sans-serif;
    background-color: #055260;
    background-image: url("assets/mainbg.png");
    background-repeat: repeat-x;
    background-size: 350px;
    background-position: bottom;
    color: #E7F5F6;
    image-rendering: pixelated;
}
a {
    color: #5DBFCE;
    cursor: crosshair;
}

.everythingholder{
    border: transparent;
    width: 800px;
    height: 600px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 50px;
}
.main {
    position: absolute;
    width: 600px;
    height: 400px;
    margin-left: 100px;
    margin-top: 100px;
    font-size: 12px;
    z-index: 1;
}
.bgdiv{
    background-color: #5DBFCE;
    border-radius: 20px;
}

/* title */
.title {
    font-family: "walkerbot", sans-serif;
    border: transparent;
    position: absolute;
    margin-top: 40px;
    width: 400px;
    height: 100px;
    background-image: url("assets/titlebgleft.png");
    background-repeat: repeat-y;
    background-size: 70%;
}
.title p {
    font-family: "vcrjp", "MS Pゴシック", "MS PGothic", sans-serif;
    padding-left: 6px;
    margin-top: -45px;
}
.title h1 {
    padding-left: 10px;
    font-size: 60px;
    margin-top: 0px;
}



/* sigil decoration :-) */
#sigil1 {
    position: absolute;
    width: 300px;
    margin-left: -80px;
}
#sigil2 {
    position: absolute;
    width: 300px;
    margin-left: 550px;
    margin-top: 435px;
    rotate: 180deg;
}

/* footer (why do i have it named bottom?) */
.bottom {
    border: transparent;
    position: absolute;
    margin-top: 465px;
    margin-left: 400px;
    font-size: 12px;
    width: 400px;
    height: 100px;
    background-image: url("assets/titlebgright.png");
    background-repeat: repeat-y;
    background-size: 70%;
    background-position: right;
}
.bottom p {
    margin-top: 70px;
    padding-left: 15px;
}


/* --- divs inside the main div --- */

/* universal innerdiv style */
.innerdiv {
    background-color: #BFF5FB;
    border-radius: 20px;
    color: #318997;
    font-size: 13px;
    position: absolute;
}
.innerdiv p {
    padding: 10px;
    margin-top: 0px;
}
.innerdiv h1 {
    font-size: 17px;
    padding-left: 10px;
    margin-bottom: -5px;
}
.lildivider {
    width: 90%;
    margin: auto;
    background-color: #5DBFCE;
    height: 2px;
}

/* specific innerdivs */
.welcome {
    width: 200px;
    height: 185px;
    margin-left: 10px;
    margin-top: 10px;
}
.status {
    width: 160px;
    height: 185px;
    margin-left: 220px;
    margin-top: 10px;
    overflow: auto;
}
.blog {
    width: 200px;
    height: 185px;
    margin-left: 390px;
    margin-top: 10px;
    overflow: auto;
}
.music {
    width: 284px;
    height: 185px;
    margin-left: 10px;
    margin-top: 205px;
    overflow: auto;
}
.art {
    width: 135px;
    height: 185px;
    margin-left: 305px;
    margin-top: 205px;
    overflow: auto;
}
.medialog {
    width: 136px;
    height: 185px;
    margin-left: 452px;
    margin-top: 205px;
    overflow: auto;
}

/* link navbar */
.links {
    position: absolute;
    margin-left: 394px;
    margin-top: 50px;
    text-align: center;
    white-space: nowrap;
    overflow: auto;
    font-family: "conthrax", sans-serif;
}
.links h2{
    margin-top: -2px;
    margin-bottom: 4px;
    font-size: 20px;
}
.links a {
    color: #E7F5F6;
}
.link {
    background-color: #5DBFCE;
    border-radius: 20px;
    width: 73px;
    height: 30px;
    display: inline-block;
}
.link p {
    font-size: 14px;
    padding: 0px;
    margin-top: 5px;
}

/*scrollbar!*/
/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #E7F5F6;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #318997;
    border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #055260;
    border-radius: 20px;
}

/*music video*/
#musicvideo {
    position: absolute;
    filter:sepia(90%) hue-rotate(140deg) grayscale(0%);
    margin-top: -15px;
    margin-left: 10px;
}
#musicvideo:hover {
    filter: none;
}