/*
    FRAME
*/

@font-face 
{
    font-family: myFont;
    src: url(/Wonkyneocity-Regular.otf);
}


.body 
{
    margin: 0;
    position: relative;
    background-color: black;
}

@media (min-aspect-ratio: 16/9) 
{
    .body 
    {
        width: 100vw;
        height: calc(100vw * 9 / 16);
        overflow-x: hidden;
    }

    .introText .text,
    .recent .date,
    .recent .content
    {
        font-size: 2vw;
    }

    /* title text in gallery */
    .titleText
    {
        font-size: 3vw;
    }

    .dateText,
    .descText
    {
        font-size: 2vw;
    }

    /* text in library */
    .bookText
    {
        font-size: 1vw;
    }

    .desc 
    {
        font-size: 1.9vw;
    }

    .candleText
    {
        font-size: 1vw;
    }
}

@media (max-aspect-ratio: 16/9) 
{
    .body 
    {
        width: calc(100vh * 16 / 9);
        height: 100vh;
        overflow-y: hidden;
    }

    .introText .text,
    .recent .content,
    .recent .date
    {
        font-size: 3vh;
    }

    /* title text in gallery */
    .titleText
    {
        font-size: 6vh;
    }

    .dateText,
    .descText
    {
        font-size: 3vh;
    }

    /* text in library */
    .bookText
    {
        font-size: 1.5vh;
    }

    .desc 
    {
        font-size: 3.2vh;
    }

    .candleText
    {
        font-size: 2.1vh;
    }
} 

.backgroundImage 
{
    height: 100%;
    width: 100%;
    display: block;

    pointer-events: none;
}

a 
{
    cursor: grab
}


  /***************/
 /* CLICK ZONES */
/***************/
.clickZone 
{
    position: absolute;
    /*border: 1px solid violet;*/
}


/* GALLERY */

/* specific fit adjustments */
.fit 
{
    position: relative;

    opacity: 0%;
    transition: 0.7s;
}

.one 
{
    top: -3.9%;
    left: -2.5%;
    width: 105%;
}

.two
{
    top: 1%;
    left: 1%;
    width: 100.5%;
}

.three
{
    top: -1.3%;
    left: -0.641%;
    width: 102.2%;
}

.four
{
    top: 0.2%;
    left: -1.7%;
    width: 101%;
}

.five 
{
    top: -1.7%;
    left: -1.5%;
    width: 101%;
}

.six
{
    top: -82%;
    left: -2%;
    width: 101%;
}

.seven
{
    top: -36%;
    left: -2%;
    width: 105%;
}

.fit:hover
{
    opacity: 100%;
}

.frameLink
{

}

.frame1 
{
    top: 31%;
    left: 4.5%;
    width: 7%;
    height: 13%;
}

.allArt
{
    font-size: 12px; /* overriding font size */

    padding-left: 27%;
    padding-top: 35%;
    top: 0%;
    left: 5%;
    height: 50%;

    rotate: 5deg;
}


.frame2 
{
    top: 33%;
    left: 14%;
    width: 6%;
    height: 14%;
}

.penOnPaper
{
    font-size: 12px; /* overriding font size */

    top: 0%;
    left: 5%;
    padding-top: 49%;
    height: 49%;

    rotate: 3deg;
}


.frame3 
{
    top: 47%;
    left: 1%;
    width: 11%;
    height: 11%;
}

.sprites
{
    padding-left: 33%;
    padding-right: -10%;
    margin-right: 5%;
    margin-left: -4.13%;
    left: 5%;

    top: -13%;
    padding-top: 15%;
    height: 49%;

    rotate: -5deg;
}


.frame4 
{
    top: 50%;
    left: 13.5%;
    width: 7%;
    height: 17%;
}

.favourites
{
    padding-left: 7%;
    padding-right: -10%;
    padding-top: 45%;

    margin-right: 5%;
    margin-left: -4.13%;

    left: 5%;
    top: -5%;
    height: 45%;

    rotate: -11.8deg;
}


.frame5 
{
    top: 59%;
    left: 2.5%;
    width: 9%;
    height: 13%;
}

.nsfw
{
    padding-left: 9%;
    padding-right: 0%;
    padding-top: 14%;

    margin-right: 0%;
    margin-left: -4.13%;

    top: 1%;
    left: 5%;
    height: 38%;

    rotate: -15.7deg;
}

.frame6 
{
    position:absolute;
    /* border: 1px solid red; */
    top: 78%;
    left: 12%;
    width: 8.9%;
    height: 4%;
}

.sketchyard
{
    top: -58%;
    height: 100%;
    /* border: 1px solid green; */
}

.frame7
{
    /* border: 1px solid green; */
    top: 72%;
    left: 4.5%;
    width: 8%;
    height: 8%;
}

.purgatory
{
    padding-left: 9%;
    padding-right: 0%;
    padding-top: 14%;

    margin-right: 0%;
    margin-left: -4.13%;

    top: 1%;
    left: 5%;
    height: 38%;
    rotate: -16deg;

}


.sketchyard:hover, 
.nsfw:hover,
.sprites:hover,
.favourites:hover,
.penOnPaper:hover,
.allArt:hover,
.purgatory:hover
{
    opacity: 100%;
}


    /****************/
   /* LIB. CABINET */
  /****************/
.allCode
{
    top: 32.1%;
    right: 4.5%;
    width: 9.1%;
    height: 11.4%;
}

.Personal
{
    top: 44.3%;
    right: 4.5%;
    width: 9.1%;
    height: 9%;
}

.Professional
{
    top: 54.2%;
    right: 4.5%;
    width: 9.1%;
    height: 7.4%;
}

.findMe
{
    top: 62.5%;
    right: 4.5%;
    width: 9.1%;
    height: 8.3%;
}

.peersEtAl
{
    top: 71.57%;
    right: 4.5%;
    width: 9.1%;
    height: 9.88%;
}



    /*********/
   /* BOARD */
  /*********/
.guestBook
{
    top: 81%;
    left: 25%;
    width: 17%;
    height: 11%
}

.quill
{
    top: 70%;
    left: 32%;
    width: 7%;
    height: 13%
}


/* SIB SIGN / COPY LINK */
.sibSign
{
    position: absolute;
    /*border: 1px solid violet;*/
    top: 71%;
    left: 39.3%;
    width: 17.1%;
    height: 7.7%;

    cursor: grab
}

.sibSign .tooltip
{
    position: absolute;
    background-color: rgb(190, 150, 30);
    color: rgb(0, 0, 0);

    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;

    left: 15px;
    top: 6px;

    border-radius: 6px;

    opacity: 0;
    font-size: 16px;
    transition: opacity 4s;
    pointer-events: none;
    white-space: nowrap;  
}

.sibSign:active .tooltip
{
    transition-duration: 0.1s;
    opacity: 1;
}

/* development warning */
.warning
{
    font-family: myFont;
    position: absolute;
    top: 55%;
    left: 26%;
    width: fit-content;
    height: 100px;

    border: 1px outset rgb(246, 246, 246);
    background-color:#b7b7b7;

    align-items: center;
    justify-content: center;
    padding: 1px;
}

.clickedWarning
{
    display: none;
}


.sysMessage 
{
    border: 1px outset rgb(152, 152, 152);
    background-color: #070378;
    color: white;
    padding: 1px;
    margin: 0;
}

.warningText
{
    padding-left: 4px;
    padding-right: 4px;

}

.fakeButton
{
    position: relative;
    border-style: outset;
    border-width: 1.5px;
    border-color: aliceblue black black aliceblue;
    box-sizing: border-box;
    width: 23px;

    left: 40%;

    cursor: grab;
}

.fakeButton:hover
{
    border: 2px outset rgba(0, 0, 0, 0.648);
    background-color: rgba(0, 0, 0, 0.043);
}

.fakeButton:active
{
    border: 2px inset rgba(0, 0, 0, 0.648);
    background-color: rgba(0, 0, 0, 0.151);
}

/* intro text */
.introText
{
    position: absolute;
    top: 15%;
    left: 42%;
    width: 36%;
    height: 14%;
    overflow: auto;
}

.introText .text 
{
    /* font-family: 'Courier New', Courier, monospace; */
    font-family: myFont;
}

/* candles*/
.candlesIMG
{
    position: absolute;
    top: 59.3%;
    left: 73.7%;
    width: 12.6%;
    height: 31.8%;

    z-index: 100;
}


    /*******/
   /* RAT */
  /*******/
.ratIMG
{
    position: absolute;
    top: 0%;
    left: 80.2%;
    width: 6%;
    height: 5%;
    z-index: 100;
}


.bug 
{
    position: absolute;
    /* border: 1px solid red; */

    top: 88%;
    left: 79%;
    width: 7%;
    height: 7%;

    z-index: 600;
}

.b1
{
    width: 100%;
}

    /****************/
   /* CRISP IMAGES */
  /****************/
.pixel { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}