/* opacity transition */
.glow
{
    opacity: 0%;
    transition: 0.2s;
}

.penSpritesLight:hover,
.penComissionsLight:hover,
.sketchAllArtLight:hover,
.sketchCommissionsLight:hover,
.allSketchyardLight:hover,
.allPurgatoryLight:hover,
.comPen-on-paperLight:hover,
.comSketchyardLight:hover,
.purgAllArtLight:hover,
.favSpritesLight:hover,
.favPurgatoryLight:hover,
.spritePenOnPaperLight:hover,
.spriteFavouritesLight:hover,
.foyerButtonLight:hover,
.downArrowImg:hover,
.leftArrowImg:hover,
.rightArrowImg:hover
{
    opacity: 100%;
}

p
{
    font-family: myFont;
}

/* NSFW door */
.NSFWdoor
{
    top: 31%;
    left: 3%;
    height: 69%;
    width: 8%;
}

.NSFWlight
{
    position: absolute;
    top: -1.49%;
    left: -33.2%;
    height: 101.3%;
    width: 174%;
}


/* left side */
.sketchCommissionsDoor,
.allSketchyardDoor,
.comPen-on-paperDoor,
.purgAllArtDoor,
.spriteFavouritesDoor,
.penSpritesDoor,
.favPurgatoryDoor
{
    /* border: 1px solid red; */
    top: 31%;
    left: 3%;
    height: 69%;
    width: 8%;
}

.sketchCommissionsLight,
.allSketchyardLight,
.comPen-on-paperLight,
.purgAllArtLight,
.spriteFavouritesLight,
.penSpritesLight,
.favPurgatoryLight
{
    position: absolute;
    top: -2.12%;
    left: -16.2%;
    height: 102.1%;
    width: 132%;
}


/* right side */
.sketchAllArtDoor,
.allPurgatoryDoor,
.comSketchyardDoor,
.favSpritesDoor,
.spritePenOnPaperDoor,
.penComissionsDoor
{
    top: 31%;
    right: 3%;
    height: 69%;
    width: 8%;
}

.sketchAllArtLight,
.allPurgatoryLight,
.comSketchyardLight,
.favSpritesLight,
.spritePenOnPaperLight,
.penComissionsLight
{
    position: absolute;
    top: -2.7%;
    left: -17.19%;
    height: 102.7%;
    width: 134.58%;
}


/* bottom section */

.foyerButton
{
    /* border: 2px solid green; */
    position: absolute;

    left: 69%;
    top: 14%;

    height: 10.5%;
    width: 13.8%;

    z-index: 130;
}

.foyerButtonCom
{
    position: absolute;

    left: 45%;
    top: 14%;

    height: 10.5%;
    width: 13.8%;

    z-index: 130; 
}

.foyerButtonLight,
.foyerButtonBase
{
    position: absolute;

    top: 0%;
    left: 0%;

    height: 100%;
    width: 100%;

    z-index: 129;
}

/* middle section */
.artOverview
{
    border: 2px solid rgba(0, 0, 0, 0.311);
    position: absolute;
    background-color: rgba(0, 0, 0, 0.24);

    left: 0%;
    top: 30%;
    margin-left: 25%;

    height: 69.6%;
    width: 50%;

    overflow: auto;

    font-size: 30px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 15px;
    row-gap: 15px;
}

.artLink
{
    position: relative;
    /* border: 2px solid rgba(255, 0, 0, 0.082); */
    /* padding: 4%; */

    /* Center art */
    display: flex;
    align-items: center;
    justify-content: center;
}

.art 
{
    position: relative;
    /* border: 2px solid rgba(255, 255, 0, 0.144); */
    width: 100%;
}

/* size adjustments */

.big 
{
    width: 85%;
}

.small
{
    width: 120%;
}



/***************
    CLOSEUPS
****************/



/******
   A4 
 ******/
.divA4
{
    position: absolute;
    /* border: 1px solid red; */
    top: 7.2%;
    left: 34.6%;

    height: 75%;
    width: 31.2%;

    /* Center art */
    display: flex;
    align-items: center;
    justify-content: center;
}

.spriteA4
{
    /* border: 1px solid rgb(0, 255, 98); */
    position: relative;

    height: 99%;
}


/* text, A4 */
.artTitleA4,
.artTitleComputerScreen
{
    position: absolute;

    top: 5%;
    left: 4%;

    height: 17%;
    width: 21%;

    font-family: myFont;

    /* border: 1px solid red; */

    overflow-y: auto;
    text-align:center;
}

.artDateA4
{
    position: absolute;

    top: 38%;
    left: 19.5%;

    height: 8.6%;
    width: 11.5%;

    font-family: myFont;
    overflow: auto;

    /* border: 1px solid red; */
    text-align:center;
}

.artDescA4
{
    position: absolute;

    top: 20%;
    left: 71.8%;

    height: 64%;
    width: 14.5%;

    font-family: myFont;

    /* border: 1px solid red; */

    overflow-y: auto;
}

.titleText
{
    margin: 6%;
}

.dateText,
.descText
{
    margin: 2%;
}


/******************** 
    Computer Screen
*********************/
.divComputerScreen
{
    position: absolute;
    /* border: 2px solid rgb(0, 255, 55); */

    height: 58%;
    width: 57.4%;

    top: 25.8%;
    left: 11.79%;

    /* Center art */
    display: flex;
    align-items: center;
    justify-content: center;

}

.spriteComputerScreen
{
    position: relative;

    width: 100%;
}

.bigComputerScreen
{
    position: relative;

    height: 100%; 
}

/* Text Computer Screen */

.artDateComputerScreen
{
    position: absolute;
    /* border: 2px solid green; */
    text-align:center;

    height: 8.6%;
    width: 11.5%;

    top: 5.9%;
    left: 53.7%;
}

.artDescComputerScreen
{
    position: absolute;

    top: 20%;
    left: 74.6%;

    height: 64%;
    width: 14.5%;

    /* border: 1px solid red; */

    overflow-y: auto;
}

/******************
    sideways A4 
*******************/
.divSidewaysA4
{
    position: absolute;
    /* border: 1px solid rgb(0, 255, 55); */

    height: 57.3%;
    width: 43.4%;

    top: 27.2%;
    left: 23.5%;

    /* Center art */
    display: flex;
    align-items: center;
    justify-content: center;
}

.spriteSidewaysA4
{
    /* border: 1px solid red; */
    position: relative;

    height: 100%;
}

.artDateSidewaysA4
{
    position: absolute;
    /* border: 2px solid green; */

    text-align:center;

    top: 72.7%;
    left: 5%;

    height: 8.6%;
    width: 11.5%;

    overflow: auto;
}

.greyKitchen
{
    left: 10%;
}




/**********************
    size adjustments
***********************/

.tooBig
{
    position: relative;

    width: 85%;
    top: 1%;
    left: 7%;
}

.threeBig
{
    height: 90%;
    left: -2%;
}

.a4Wide
{
    height: 97.5%;
}

.a4TooWide
{
    height: 90%;
}

.a4ThreeWide
{
    height: 85%;
}

.a4Square
{
    position: relative;
    width: 100%;
}

.midsize
{
    /* border: 2px solid yellow; */

    width: 94.6%;
}

.big2
{
    position: relative;

    width: 88.6%;
}

.deadKnight
{
    height: 88%;
    width: 50%;
}

.tattoo
{
    background-color: white;
}


/* ARROWS */

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

    top: 86.63%;
    left: 44.74%;

    width: 10.65%;
    height: 11.6%;
}

.downArrowImg
{
    position: relative;
    width: 100%;
}


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

    top: 39.45%;
    left: 1.7%;

    width: 6.9%;
    height: 18.9%;
}

.leftArrowImg,
.rightArrowImg
{
    position: relative;
    height: 100%;
}

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

    top: 39.45%;
    right: 1.7%;

    width: 6.9%;
    height: 18.9%;
}


/* BUTTONS */

.tinyScroll
{
    position: absolute;
    height: 8%;
    width: 3.4%;

    opacity: 100%;
    background-color: none;
    background: transparent;
    border: none;
    /* border: 1px solid red; */
}

.leftKitchenButton
{
    top: 51%;
    left: 22%;
}

.rightKitchenButton
{
    top: 51%;
    left: 65%;
}

.leftGBNButton
{
    top: 46%;
    left: 33%;
}

.rightGBNButton
{
    top: 46%;
    left: 64%;
}

.buttonArrow
{
    position: relative;

    height: 100%;
    padding: 0%;
    margin: 0%;
}


.invisButton
{
    position: absolute;
    height: 100%;
    width: 100%;

    top: 0%;
    left: 0%;

    opacity: 100%;
    background-color: none;
    background: transparent;
    /* border: 1px solid red; */
}