@font-face {
    font-family: Byte;
    src: url('fonts/byte.ttf');
}

html,body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

h1 {
    font-family: 'Byte';
    font-size: 1.75em;
    margin: 4px;
    color: white;
    text-shadow: 2px 2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, -2px -2px 0 #000, 2px 0px 0 #000, 0px 2px 0 #000, -2px 0px 0 #000, 0px -2px 0 #000;   
}

h2 {
    font-family: 'Byte';
    font-size: 1.25em;
    font-weight: normal;
    margin: 4px;
    color: black;
     text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff; 
}

h3 {
    font-family: 'Byte';
    font-size: 1em;
    font-weight: normal;
    margin: 2px;
    color: black;
    text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff; 
}

h4 {
    font-family: 'Byte';
    font-size: 1em;
    font-weight: normal;
    margin: 2px;
    color: black;
    text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff; 
}

body {
    font-family: "Byte", ms ui gothic, sans-serif;
    font-size: 1em;
    margin: 0;
    background-color: #D1ECFF;
}

p {
    margin: 10px;
    
}

hr.dotted {
    border-top: 1px dotted #000;
    border-bottom: 0;
    margin: 6px;
}

.container {  
    display: grid;
    grid-template-columns: 150px 375px 375px;
    grid-template-rows: 122px;
    grid-template-areas:
        "leftsidebar nav nav"
        "leftsidebar main main"
        "leftsidebar main main"
        "footer footer footer";
    max-width: 900px;
    margin: 0 auto;
    padding-top: 10px;
}

.container a {
    color: cornflowerblue;
}

.container a:hover {
    color: slateblue;
}


.header { 
    grid-area: header;
    position: absolute;
}

.nav {
    grid-area: nav;
    background-color: whitesmoke;
    display: grid;
    grid-template-columns: 600px 150px;
    grid-template-rows: 100px 22px;
    grid-template-areas: 
        "navbuttons navaside"
        "topbar topbar";
}

.navbuttons {
    grid-area: navbuttons;
    padding: 5px;
    padding-top: 11px;
    padding-bottom: 11px;
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.navlink {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    border: 1px solid black;
    padding: 5px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 2px;
    text-decoration: none;
    color: black !important;
    text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff; 
    background: linear-gradient(to bottom, white 1%, #ffd3e8 49%, #ffb5d8 51%, white 100%);
    transition: transform .25s ease;
    
}

.navaside {
    grid-area: navaside;
    padding: 10px;
    padding-left: 0px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.navaside ul {
    margin: 2px;
    padding-left: 20px;
    list-style-image: url(decor/PIXELS/heart/heartteeny.gif);
}

.topbar {
    grid-area: topbar;
    background-image: url(decor/BGS/tile/aesthetics/dots/tinydots.gif);
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.leftsidebar { 
    grid-area: leftsidebar;
    margin: 0 auto;
    padding: 10px;
    padding-right: 9px;
    border-right: 1px dotted black;
    background-color: whitesmoke;
    text-align: center;
    display: grid;
    grid-template-areas:
        "status"
        "tamanotchi"
        "dragcave"
        "linkback"
        "navlinkads";
    grid-gap: 10px;
}

.status {
    grid-area: status;
    height: 100px;
    background-color: white;
    padding: 5px;
    border: 1px solid black;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

#statusframe {
    background-image: url(decor/BGS/tile/aesthetics/dots/tinydots.gif);
}

.mood {
    border-bottom: 1px dotted black;
}

.tamanotchi {
    grid-area: tamanotchi;
}

.notchiscroll {
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
    overflow: auto;
    background-color: white;
    height: 100px;
    padding: 5px;
}

.dragcave {
    grid-area: dragcave;
}

.dragscroll {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    grid-gap: 5px;
    overflow: auto;
    background-image: url(decor/BGS/other/crystallake.png);
    background-position:center;
    height: 75px;
    margin: 5px;
    padding: 10px;
}

.dragimg {
    max-width: 117px;
    transition: transform 0.25s ease;
}

.dragimg:hover {
    transform: scale(0.9);
}

.dragimg:active {
    transform: scale(0.8);
}

.linkback {
    grid-area: linkback;
}

.linkscroll {
    overflow: auto;
    height: 186px;
    padding: 5px;
    max-width: 120px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    grid-gap: 5px;
}

.navlinkads {
    grid-area: navlinkads;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    grid-gap: 5px;
}

.main { 
    grid-area: main;
    display: grid;
    grid-template-columns: 250px 250px 250px;
    grid-template-areas: 
        "theyap theyap theyap3"
        "lowermain lowermain theyap3";
    background-color: whitesmoke;
}

.theyap {
    grid-area: theyap;
    display: grid;
    grid-template-columns: 100px 400px;
    grid-template-areas: 
        "theyapleft theyapright";
}

.theyapleft {
    grid-area: theyapleft;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-left: 75px;
}

.theyapright {
    grid-area: theyapright;
    margin: 10px;
    margin-left: 20px;
    margin-bottom: 20px;
}

.welcometext {
    text-align: center;
    overflow: auto;
    margin: 5px;
    background-color: white;
    height: 198px;
}

.lowermain {
    grid-area: lowermain;
    display: grid;
    grid-template-columns: 250px 250px;
    grid-template-areas: 
        "updates todo"
        "theyap2 theyap2";
}

.updates {
    grid-area: updates;
    padding: 10px;
    padding-right: 5px;
    padding-top: 0;
}

.todo {
    grid-area: todo;
    padding: 10px;
    padding-left: 5px;
    padding-top: 0;
}

.theyap2 {
    grid-area: theyap2;
    padding: 10px;
    padding-top: 0px;
}

.yap2scroll {
    width: auto;
    overflow: auto;
    margin: 5px;
    padding: 0px;
    background-color: white;
    height: 226px;
}

.theyap3 {
    grid-area: theyap3;
    display: grid;
    grid-template-areas: 
        "fanlisting"
        "gifofthemonth"
        "chicken";
    grid-gap: 10px;
    padding: 10px;
    padding-left: 9px;
    border-left: 1px dotted black;
}

.fanlisting {
    grid-area: fanlisting;
}

.fanlistingscroll {
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
    overflow: auto;
    background-color: white;
    height: 137px;
    padding: 5px;
}

.gifofthemonth {
    grid-area: gifofthemonth;
}

.gifscroll {
    width: auto;
    overflow: auto;
    margin: 5px;
    padding: 0px;
    background-color: white;
    height: 235px;
}

.gotm {
    height: 165px;
    width: 215px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dotted black;
    background-image: url(decor/BGS/tile/aesthetics/dots/tinydots.gif);
}

.gotmimg {
    max-height: 155px;
    max-width: 205px;  
}

.chicken {
    grid-area: chicken;
}

.chickenscroll {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background-image: url(decor/BGS/other/grassbg.png);
    height: 200px;
    margin: 5px;
}

#chickenimg {
    max-height: 196px;
    max-width: 205px;
    transition: transform 0.25s ease;
}

#chickenimg:hover {
    transform: rotate(5deg);
}

#chickenimg:active {
    transform: scale(0.95);
}

#guestbook {
    border: 1px solid black;
    position: fixed;
    bottom: 0px;
    right: 0px;
    height: 100%;
    width: 250px;
    z-index: 1;
}

.showhide {
    position: fixed;
    right: 1px;
    top: 0px;
    width: 250px;
    z-index: 2;
    border: 1px solid black;
    padding: 5px;
    font-family: "Byte", ms ui gothic, sans-serif;
    font-size: 1em;
    text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff; 
    text-align: center;
    background: linear-gradient(to bottom, white 1%, #ffd3e8 49%, #ffb5d8 51%, white 100%);
}

.footer { 
    grid-area: footer;
    background: linear-gradient(to bottom, white 1%, #ffd3e8 49%, #ffb5d8 51%, white 100%);
    border: 1px solid black;
    padding: 2px;
    margin-bottom: 10px;
    margin-top: 5px;
}

.scrollbox {
    width: auto;
    overflow: auto;
    margin: 5px;
    padding: 0px;
    background-color: white;
    height: 200px;
}

.scrollbox ul {
    margin: 4px;
    padding: 4px;
    padding-left: 25px;
    list-style-image: url(decor/PIXELS/heart/heartteeny.gif);
}

.button {
    width: 88px;
    height: 31px;
    transition: transform 0.25s ease;
}

.button:hover {
    transform: scale(0.9);
}

.button:active {
    transform: scale(0.8);
}

.fanlist {
    width: 50px;
    height: 50px;
    transition: transform 0.25s ease;
}

.fanlist:hover {
    transform: scale(0.9);
}

.fanlist:active {
    transform: scale(0.8);
}

.frillybox {
    margin: 5px;
    padding: 0px;
    border-image: url('decor/BORDERS/frilly.png') 5 fill / 5px / 5px round;
}
                    
.boxheader {
    background: linear-gradient(to bottom, white 1%, #ffd3e8 49%, #ffb5d8 51%, white 100%);
    border-bottom: 1px solid black;
    padding: 2px;
    text-align: center;  
}

.box {
    background-color: white;
    border: 1px solid black; 
}

.boxfooter {
    background: linear-gradient(to bottom, white 1%, #ffd3e8 49%, #ffb5d8 51%, white 100%);
    height: 5px;
    border-top: 1px solid black;
}

.todoheader {
    background-image: url(decor/BGS/tile/aesthetics/dots/tinydots.gif);
    border-bottom: 1px solid black;
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.todofooter {
    background-image: url(decor/BGS/tile/aesthetics/dots/tinydots.gif);
    height: 5px;
    border-top: 1px solid black; 
}

.clap {
    position: absolute;
    margin-top: -11px;
    margin-left: 275px;
}

.clicky {
    transition: transform 0.25s ease;
}

.clicky:hover {
    transform: scale(0.9);
}

.clicky:active {
    transform: scale(0.8);
}

#carameljude {
    position: absolute;
}

#rageful {
    position: absolute;
    margin-top: -80px;
    margin-left: 750px;
    transform: rotate(7deg);
    transition: transform 0.25s ease;
}

#rageful:hover {
    transform: rotate(7deg) scaleY(0.9);
}

#rageful:active {
    transform: rotate(7deg) scaleY(0.8);
}

#oneko {
    z-index: 99;
}

#cablemess {
    z-index: -100;
    position: fixed;
    height: 100%;
    width: 100%;
    background: url('decor/BGS/other/cablemess.png');
    background-size: auto;
    background-repeat: repeat-x;
    background-position: top;
}

#judecorner {
    background-image: url(decor/ARTWORK/ocs/jude/sidejude.png);
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 850px;
    width: 500px;
    z-index: -1;
}