/*body will set universal rules for the website and specific pages will have specific rules*/


body {
    background-image: url("assets/bgimage.png");
    text-align: center;
    color: bisque;
              scrollbar-width: thin;
      scrollbar-color: blueviolet lightgray;
}

body.CitizenGlue {
    background: url("assets/bgimage.png");
              scrollbar-width: thin;
      scrollbar-color: blueviolet lightgray;
}

body.about-page {
    background-image: url("assets/about.gif");
    text-shadow: 2px 2px black;
}

body.auditory-page {
    background-image: url("assets/tile1.gif");
    font-family: 'Lucida Sans';
    color: black;
}

body.gardenland-page {
    background-image: url("assets/gardenland.gif");
    color: green;
        text-shadow: 1px 1px black;
}

body.home-page {
    background-image: url("assets/home.jpg");
    text-shadow: 2px 1px black;
    text-align: center;
    justify-content: center;
}

body.abstractions-page {
    background-image: url("assets/mental.gif");
    text-shadow: 2px 2px black;
}

body.papermill-page {
    background-image: url("assets/poem.jpg");
    text-shadow: 2px 2px black;
}


body.nav-page {
    background-image: url("assets/nav.GIF");
              scrollbar-width: thin;
      scrollbar-color: blueviolet lightgray;
}

body.todo-page {
    background-image: url(assets/todobg.JPG);
    color: black;
    overflow: hidden;
          scrollbar-width: thin;
      scrollbar-color: blueviolet lightgray;
        margin: 0;
    font-family: 'Courier New', Courier, monospace;
}

/*---ENTRANCE PAGE---*/
#header {
    color: bisque;
    text-align: center;
}

#entrytext {
    padding-top: 250px;
    font-family: 'Courier New';
    font-size: 10px;
    line-height: 1.8;
}

#monitorgif {
    padding-top: 40px;
        transition: transform 0.2s ease-in-out;
    animation: navpulse 1s ease-in-out infinite;
}

#monitorgif:hover {
        transform: scale(1.1) translateZ(0);
        animation: navpulse 1s ease-in-out infinite;
}

#autoplaysuggestion {
    padding-top: 40px;
    font-family: 'Courier New';
    font-size: 11px;
}

/*---WRAPPER FLEXBOX---*/
.nestflex1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/*---PARENT FLEXBOX 2---*/
.nestflex2 {
    display: flex;
    flex-direction: row;
    height: 90vh;
    width: 100vw;
    max-width: 100%;

}

/*--- LEFT ALIGNED FLEXBOX---*/
.leftflex {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    justify-content: center;
    width: 150px;
    height: 100%;
    padding-left: 15px;
    padding-right: 10px;
          scrollbar-width: thin;
      scrollbar-color: blueviolet lightgray;
    
}

#logo {
    color: bisque;
    font-family: 'Courier New';
    font-size: medium;
    height: 28px;
    width: 154px;
    margin-top: 45px;
    margin-bottom: 5px;
       /* animation: logopulse 3s ease-in-out infinite; */
}

.naviframe {
    width: 150px;
    height: 80vh;
    border: none;
          scrollbar-width: thin;
      scrollbar-color: blueviolet lightgray;
}


/*---RIGHT ALIGNED FLEXBOX---*/
.rightflex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    flex-grow: 1;
    overflow: hidden;


}

.bannerbar {
display: flex;
flex-direction: row;
height: 10%;
justify-content: center;
overflow: hidden;

}

#banner1 {
    overflow: hidden;
    margin-top: auto;
    height: 25px;

}

#mainiframe {
    height: 80vh;
    width: 99%; /*---fix---*/
    border-radius: 10px;
    border-style: hidden;
    /* BORDER STYLING
    
    
    border-style: dashed;
    border-color: cyan; */
    
}

/*---FOOTER FLEXBOX---*/
.footerflex {
    display: flex;
    flex-direction: row;
    justify-content: right;
    height: 10%;
    width: 100%;
    overflow: hidden;
}

#webbadge {
    padding-top: 10px;
    padding-right: 20px;
    height: 70px;
    width: 70px;
}


/*---NAVIGATION MENU---*/
.navmenuflex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100%;
    width: 100%;
          scrollbar-width: thin;
      scrollbar-color: blueviolet lightgray;
}


#menuspace {

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.menuobject {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: small;
    height: 70px;
    transition: transform 0.2s ease-in-out;
}

.menuobject2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: small;
    height: 60px;
    transition: transform 0.2s ease-in-out;
}

.menuobject:hover, .menuobject2:hover {
    transform: scale(1.1) translateZ(0);

}

.menuobject:hover .navicon, .menuobject2:hover .navicon {
        animation: navpulse 1s ease-in-out infinite;

}

.todoiframe {
    height: 100%;
    width: 100%;
    overflow: hidden;
    align-content: left;
    justify-content: left;
    text-align: left;
    border-style: hidden;
    border-color: cyan;
    margin-top: 30px;
}

#todoiframewrapper {
    height: 80%;
    overflow: hidden;
}

#todoscroll {
    height: 265px;
    text-align: left;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: blueviolet lightgray;
    padding-left: 10px;
    padding-bottom: 21px;
}

.navicon {
    height: 80px;
    width: 80px;
    justify-content: center;
    align-content: center;
    position: relative;

}



.navtextup {
    position: absolute;
    padding-top: 65px;
}

.navtextup2 {
    position: absolute;
    padding-top: 50px;
}

.navtextup3 {
    position: absolute;
    padding-top: 50px;
}

.navtextup4 {
    position: absolute;
    padding-top: 55px;
}

/*---Home---*/

#homeflexwrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#homebox1 {
max-width: 70%;
font-size: large;
}

#homewelcome {
    animation: navpulse 1.5s ease-in-out infinite;
}

#homebox2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 30px;
}

#updates {
    height: 600px;
    width: 600px;
    font-size: large;
    margin-right: 20px;
}

#updatebody {
    text-align: left;
    justify-content: left;

}

#todo {
    background: black;
    color: green;
    font-family: 'Courier New';
    text-align: left;
    padding-left: 15px;
    border-radius: 15px;
    height: 300px;
    width: 200px;
    margin-top: 70px;
}

#todoblink {
    animation: blink 1s linear infinite;
}


/*---Gardenland---*/

#gardenlandwrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 200px;
}

#gardenwait {
    background-image: url(assets/auditorybg.png);
    width: 300px;
    height: 250px;
}


/* Scrollbar settings */

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background-color: grey;
}

*::-webkit-scrollbar-thumb {
    background-color: blueviolet;
}


/* Animations */

@keyframes navpulse {
    0% {
        transform: scale(1.1) translateZ(0);
    }

    50% {
        transform: scale(1.15) translateZ(0);
    }

    100% {
        transform: scale(1.1) translateZ(0);
    }

}

@keyframes blink {
    0%, 49% {
        opacity: 100%;
    }

    50%, 100% {
        opacity: 0%;
    }
}

@keyframes logopulse {
    0% {
        transform: scale(1.0) translateZ(0);
    }

    50% {
        transform: scale(1.04) translateZ(0);
    }

    100% {
        transform: scale(1.0) translateZ(0);
    }

}

 /*{
  outline: 1px solid red;
}