/*#region HomeCard*/

/*#region Main Card + Heading*/
.HomeMainTitleDiv{
    margin:auto;
    width: 800px;
    height: 80px;
    background-color: rgba(146, 123, 168, 0);
}
.HomeMainPageDiv {
    display:block;
    margin: auto;
    position:relative;
    width: 780px;
    height: 600px;
    background: #77755f;
    /*background: linear-gradient(0deg,rgb(133, 106, 90) -20%, rgb(158, 146, 128) 20%, rgb(184, 160, 138) 150%);*/
    background: linear-gradient(0deg,rgb(92, 56, 37) -20%, rgb(188, 164, 129) 20%, rgb(201, 167, 134) 150%);
}
.HomeMainPageDivStripesBackground{
    position: absolute;
    width: 800px;
    height: 620px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
    background-image: linear-gradient(45deg, #281e9e 16.67%,rgb(188, 164, 129) 16.67%,rgb(188, 164, 129) 25%, #b83f3f 25%, #b83f3f 41.67%,rgb(188, 164, 129) 41.67%,rgb(188, 164, 129) 50%, #281e9e 50%, #281e9e 66.67%,rgb(188, 164, 129) 66.67%,rgb(188, 164, 129) 75%, #b83f3f 75%, #b83f3f 91.67%,rgb(188, 164, 129) 91.67%,rgb(188, 164, 129) 100%);
    background-size: 70px 70px;
    /*box-shadow: 5px 10px rgb(82, 102, 104);*/
}
/*#endregion*/

/*#region cardnavbar */
.HomeCardNavBar{
    position:absolute; 
    width:500px; 
    height: 25px; 
    background: linear-gradient(160deg, transparent 35px, #8a4e4c 0) bottom left;
    top: -5.8%;
    border-top-right-radius: 30px;
    right:0px;
}
/*#endregion*/

/*#region Div 1, Textbox and Spacer 1*/
.HomePageDiv1{
    position: relative;
    height: 280px;
    left: 0px;
}
.HomePostCardSpace{
    position: relative;
    top: 20px;
    left: 30px;
    width: 400px;
    height: 250px;
}
.HomeTopRightTextBoxSpace{
    position: absolute;
    width: 300px;
    height: 350px;
    top: 20px;
    left: 460px;
    background-color: rgb(196, 147, 109);
    box-sizing: border-box;
    padding: 10px;
    border-left: 2px solid rgb(143, 75, 75);
    box-shadow:2px 2px #978468;
}
.HomeProfile{
    position: absolute;
    height: 130px;
    width: 120px;
    border: 3px solid rgba(148, 137, 117, 0);
    right: 8px;
    top: 10px;
    border-right: 2px solid #994e41;
}
.spacer1{
    position: relative;
    height: 30px;
    background-color: rgba(128, 128, 15, 0);
    opacity: 1;
}

.coloredText{
    background-color: black;
    animation-name: blackWhite;
    animation-iteration-count: infinite;  
    animation-duration: 15s; 
}

@keyframes blackWhite {
    0% { background-color: rgb(185, 100, 100); }
    25% { background-color: rgb(137, 94, 185); }
    50% { background-color: rgb(125, 126, 187); }
    75% { background-color: rgb(137, 94, 185); }
    100% { background-color: rgb(185, 100, 100); }
}

/*#endregion*/

/*#region Buttons*/
.HomeButtonSpace{
    position: relative;
    width: 420px;
    height: 150px;
    left: 20px;
    background-color: rgba(71, 18, 5, 0);
}

.HomeArtDirectoryButton{
    position: relative;
    width: 120px;
    height: 140px;
    background-color: rgb(202, 149, 168);
    border: 3px solid rgb(155, 45, 45);
    left: 10px;
}

.HomeMusicDirectoryButton{
    position: absolute;
    width: 120px;
    height: 140px;
    background-color: rgb(149, 202, 193);
    border: 3px solid rgb(45, 50, 155);
    left: 150px;
    top: 0;
}

.HomeVideoDirectoryButton{
    position: absolute;
    width: 120px;
    height: 140px;
    background-color: rgb(163, 202, 149);
    border: 3px solid rgb(32, 112, 61);
    left: 290px;
    top: 0;
}

.HomeInnerButtons{
    position: absolute;
    width: 95px;
    height: 40px;
    background-color: #a49fda;
    bottom: 10px;
    right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    border: 3px solid rgb(57, 57, 125);
    box-sizing:border-box
}

.ButtonSpinAnimation{
    background-color: #7d497300;
    animation-duration: 677ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out; 
}

.HomeInnerButtons:hover{
    background:#8f6caf;
}

.HomeInnerButtons:hover~.ButtonSpinAnimation{
    animation-name: buttonspin;
}

@keyframes buttonspin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
/*#endregion*/

/*#region Bookmarks*/
.HomeBookMarkSpace{
    position: relative;
    width: 100px;
    height: 150px;
    right: 75px;
    bottom: 420px;
    background-color:rgba(0, 0, 255, 0);
}

/* button1*/
.YTInvisDiv{
    position: relative;
    width: 100px;
    height: 40px;
    right:0;
    background-color: rgba(214, 179, 136, 0);
    transition: right 0.2s ease-in-out;
}
.HomeBookMarkYT{
    position: relative;
    width: 100px;
    height: 40px;
    bottom: 40px;
    right:0;
    background-color: rgb(167, 35, 35);
    transition: right 0.2s ease-in-out;
    z-index:-2;
}
.YTInvisDiv:hover +.HomeBookMarkYT,
.YTInvisDiv:hover{
    right:20px;
    filter: brightness(90%);
}

/* button2*/
.TWTInvisDiv{
    position: relative;
    width: 100px;
    height: 40px;
    right:0;
    background-color: rgba(214, 179, 136, 0);
    transition: right 0.2s ease-in-out;
    bottom: 20px;
}
.HomeBookMarkTWT{
    position: relative;
    width: 100px;
    height: 40px;
    bottom: 60px;
    right:0;
    background-color: rgb(40, 131, 193);
    transition: right 0.2s ease-in-out;
    z-index:-2;
}
.TWTInvisDiv:hover +.HomeBookMarkTWT,
.TWTInvisDiv:hover{
    right:20px;
    filter: brightness(90%);
}

/* button3*/
.INSTAInvisDiv{
    position: relative;
    width: 100px;
    height: 40px;
    right:0;
    background-color: rgba(214, 179, 136, 0);
    transition: right 0.2s ease-in-out;
    bottom: 35px;
    z-index: 2;
}
.HomeBookMarkINSTA{
    position: relative;
    width: 100px;
    height: 40px;
    bottom: 75px;
    right:0;
    background-color: rgb(186, 49, 118);
    transition: right 0.2s ease-in-out;
    z-index:-2;
}
.INSTAInvisDiv:hover +.HomeBookMarkINSTA,
.INSTAInvisDiv:hover{
    right:20px;
    filter: brightness(90%);
}
/* Right Side Book Marks */
.HomeBookMarkSpaceRight{
    position: relative;
    width: 100px;
    height: 150px;
    left: 760px;
    bottom: 560px;
    background-color:rgba(0, 0, 255, 0);
}

/* BookMark 4 */
.ABOUTMEInvisDiv{
    position: relative;
    width: 100px;
    height: 40px;
    left:0;
    background-color: rgba(214, 179, 136, 0);
    transition: left 0.2s ease-in-out;
    bottom: 10px;
}

.HomeBookMarkABOUTME{
    position: relative;
    width: 100px;
    height: 40px;
    bottom: 50px;
    left:0;
    background-color: rgb(191, 80, 60);
    transition: left 0.2s ease-in-out;
    z-index:-2;
}

.ABOUTMEInvisDiv:hover +.HomeBookMarkABOUTME,
.ABOUTMEInvisDiv:hover{
    left:20px;
    filter: brightness(90%);
}

.CONTACTInvisDiv{
    position: relative;
    width: 100px;
    height: 40px;
    left:0;
    background-color: rgba(214, 179, 136, 0);
    transition: left 0.2s ease-in-out;
    bottom: 30px;
}

.HomeBookMarkCONTACT{
    position: relative;
    width: 100px;
    height: 40px;
    bottom: 70px;
    left:0;
    background-color: rgb(192, 190, 75);
    transition: left 0.2s ease-in-out;
    z-index:-2;
}

.CONTACTInvisDiv:hover +.HomeBookMarkCONTACT,
.CONTACTInvisDiv:hover{
    left:20px;
    filter: brightness(90%);
}
/*#endregion*/

/*#region Update Log*/
.UpdateSpace{
    position: absolute;
    width: 310px;
    height: 150px;
    background: rgb(59, 78, 131);;
    bottom: 60px;
    right: 15px;
}

.UpdateLogSpace{
    position: absolute;
    width: 200px;
    height: 140px;
    background: rgb(112, 130, 146);;
    bottom: 5px;
    left: 5px;
    overflow-y: scroll; 
}

.ToDoSpace{
    position: absolute;
    width: 90px;
    height: 140px;
    background: rgb(112, 130, 146);;
    bottom: 5px;
    right: 5px;
    overflow-y: scroll; 
}

/*#endregion*/

/*#region Space Under Buttons*/
.CardSpaceunderbuttons{
    position: absolute;
    width: 420px;
    height: 70px;
    top: 470px;
    left: 20px;
    z-index: 3;
}

.CardSpaceunderbuttonsNONINVIS{
    position: absolute;
    width: 420px;
    height: 70px;
    background:  rgb(148, 161, 174);
    top: 470px;
    left: 20px;
    background-image: url("/img/cityskyline.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    filter: brightness(110%);
    filter: saturate(40%);
    filter: contrast(40%)
}


/*#endregion*/

/*#region Card Stamp Space*/

.CardStampSpace{
    position: absolute;
    width: 740px;
    height: 44px;
    background: rgba(126, 113, 96, 0);;
    bottom: 5px;
    left: 20px;
    border-top: 2px solid #615440;
}
/*#endregion*/

/*#endregion*/

/*#region 2nd div*/
.maindiv2{
    position:relative; 
    margin:auto; 
    background-color: rgba(196, 190, 182, 0.103); 
    height: 450px; 
    width: 1000px; 
    top: 100px;
}

.LatestArtworkDIV{
    position:absolute;
    height:400px;
    width:600px;
    background-color: rgb(145, 116, 116); 
    border: 3px rgb(114, 78, 78) solid;
}

/*#endregion*/