p.color{
        color:white;
    }

/*A Class that will effect the text color of paragraphs labled with class="color"*/

div.bit-columns {
    column-count: 3;
    /*Colunm-count creates a number of colunms to match the input value*/
    column-width: 5rem;
    column-gap: 2rem;
    /*Space between columns*/
    column-rule: .5rem dotted #4d0099;
    /*Creates borderd between colunms, .5rem thick, dotte style, Hex color #4d0099*/
}

@media screen and (max-width: 600px) {
    /*Media type screen selectivly aplies styles to devices*/
    /*Media expression max-width:600px must be true for styling to apply*/
    div.bit-columns {
        /*Specifically effectsclass div.bit-columns*/
        column-count: 2;
    }
}

@media screen and (max-width: 321px) {
    div.bit-columns {
        column-count: 1;
    }
}

#bit112-nav li {
    display: inline-block;
    padding: 1rem;
    width: 10rem;
}
/*Id*/

#aboutMyRabbit {
    clear: left;
}

body.backdrop {
    background-color: black;
}


body.backdropW5 {
    background-color: black;
}

/*A Class that will effect the background color of body sections labled with class="backdrop"*/

.prologue {
    position: relative;
    top: 1rem;
    right: 1rem;
    font-size: 2em;
    color: #cc6600;
}

header.banner {
    /*Within these brackets, these specifications aply to headers labeled with class="banner"*/
    background-color: white;
    /*Collectivly sets background colour of content, padding, and border to white*/
    border: .20rem solid red;
    /*Sets border thickness, border style, and border color*/
    color: black;
    /*Sets color of text content*/
    text-decoration: none;
    /*Removes decoration from text content*/
    position: relative;
    margin: 1rem 0rem 1rem 5rem;
    padding: 1rem 1rem 5rem 1rem;

}

ul.navbar {
    /*Within these brackets, these specifications aply to unordered lists labeled with class= "navbar"*/
    list-style-type: none;
    /*Removes bullet points from unordered list*/
    margin: 0rem;
    /*Removes default margin settings*/
    padding: 0rem;
    /*Removes default padding settings*/
    overflow: hidden;
    /*If content overflows box it should be clipped/hidden*/
    background-color: white;
    /*Collectivly sets background colour of content, padding, and border to grey*/

}

li.navbaritem {
    float: left;
    /*Float property changes the orientation of an element*/
    /*In this case, want blocks to sit next to eachother*/

}

li a.navbaritem2 {
    display: block;
    /*Displays element in block that spans entire width of content*/
    /*Link is clickable within all area of block*/
    text-align: center;
    /*Controls horizontal alignment of text*/
    padding: 1rem;
    /*Sets padding around content within list element*/
    /*Shorthand, first value sets padding top and bottom, second value sets padding left and right*/
    text-decoration: none;
    height: 2rem;
}

/*div.navbarbox {
    display: block;
    text-align: center;
    padding: .3rem .3rem;
}*/


footer.footstyle {
    /*Information such as author, contacts, copyrite, related sources is sually placed inside footer*/
    /*Within these barackets, specifications apply to a class attatched to footer named footstyle*/
    background-color: grey;
    padding: 1rem 65rem 1rem 3rem;
    /*Sets padding for top bottom right and left of content*/
    margin: 1rem 5rem 1rem 5rem;
    display: block;
    float: left;
    /*Float property changes the orientation of an element*/
    position: relative;
    /*Relative means that elemant position is effected relative to its default position in normal document flow*/
    width: 15rem;
    height: 5rem;
}

footer.footstyle2 {
    /*position: relative;
    clear: both;
    height: 200px;
    display: block;
    margin-top: -200px;*/
    clear: both;
    /*Clear: both allows element to fall under previouse elements*/
    /*that has been floated to left or right*/
    margin: 300rem 40rem 1rem -20rem;
    display: block;
    float: left;
    position: relative;
    width: 30rem;
    height: 5rem;
    padding: 1rem 50rem 1rem 30rem;
    background-color: #e6ccff;
    /*Sets padding for top bottom right and left of content*/
}

section#rabbit figure {
    /*Within these brackets, these specifications apply to figure content within the section labeled with the id tag "rabbit"*/
    float: right;
    /*Float property changes the orientation of an element*/
    /*Float preserves text wrap when not set to none*/
    margin-left: 1rem;
}

    section#rabbit figure img {
        /*Within these brackets, these specifications apply to img within figure within the section labeled with the id tag "rabbit"*/
        width: 60%;
        /*Adjusts width of image to 60% of parent value*/
        /*In this case responive image values specified in aboutme file*/
    }

section.mainsection {
    /*Section semantically groups a selection of content that can't stand on it's own or*/
    /*multiple selections of content that aren't collectivly cohesive*/
    background-color: white;
    padding: 2rem;
    margin-top: 4rem;
}

p.sectionpstyle {
    color: black;
}

section.section1 {
    background-color: #bf80ff;
    padding: 1rem;
}

aside {
    /*Aside designates a selection of content that isn't related to main content*/
    /*For example, like a side note*/
    border: .5rem dashed #4d0099;
    background-color: #e6ccff;
}

    aside > h2 {
        /*For heading 2s that are children of asides, the specificaitons within the brackets will apply*/
        font-size: 2rem;
        padding-left: 1rem;
    }

p, li, h1, ul {
    color: DarkSlateGray;
    /*Changes the color of paragraphs, list items, unorganized lists, and heading 1s.*/
}

html {
    font-size: 10px;
    /*Sets the default font size across all html pages referencing this CSS file*/
}

p, h1, h2, li {
    /* font-family: Luminari, papyrus, fantasy;*/
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    /*changes the default font and supplies backup fonts in case the first choice is not avialable*/
}

    p.format {
        white-space: pre;
    }
/*Preserves white space in paragraphs*/


p, li {
    font-size: 2em;
    /*Changes the font size of paragraph and list elements to be 1.8 times the size of the font set in the html tag*/
}

h1 {
    font-size: 3em;
    /*Changes fontsize of heading one element by an order of em units*/
}

h2 {
    font-size: 2.4em;
    /*Changes fontsize of heading two element by an order of em units*/
}

li {
    line-height: 2.5rem;
    /*Changes fontsize of list item element by an order of em units*/
}

header {
    padding: 1rem 35rem 1rem 10rem;
    /*In this case, adds padding to the peices of content within header and main*/
    /*Padding is the horizontal &/or vertical space between a peice of content and it's rectangular border*/
    display: inline-block;
    float: left;
    position: relative;
    width: 80rem;
    /*Width wasn't wide enough to allow horizontal navigation bar*/
    height: 10rem;
    margin: 0rem 0rem -20rem 0rem;
}

header {
    background-color: #ffce99;
    /*Sets the background colour of content within the header*/
    border-bottom: .3rem solid #4d0099;
    /*Creates border bottom, .3rem determines thickness of border, solid styles the border solid, and then the colour is selected*/
}

.headerme {
    margin: 0rem 0rem -20rem 0rem;
}

header > h1 {
    color: #4d0099;
    /*Sets the colour of text within the h1 element if it is the child of header*/
    line-height: 2.5rem;
    /*Vertically sets the line height around text within the h1 element if it is the child of header*/
}

main.indexmain {
    max-width: 33em;
    /*Sets max width of main element*/
    /*If content could exceed max width, height will be changed to compensate*/
    padding: 1rem 1rem 5rem 25rem;
    /*In this case, adds padding to the peices of content within header and main*/
    /*Padding is the horizontal &/or vertical space between a peice of content and it's rectangular border*/
    margin: 5rem 50rem 10rem 1rem;
    display: block;
    float: left;
    position: relative;
    width: 30rem;
    height: 10rem;
}

main {
    padding: 15rem 1rem 1rem 1rem;
    margin: 1rem 1rem 1rem 1rem;
    display: block;
    position: relative;
    float: none;
    width: 60rem;
    height: 60rem;
}

a:link {
    color: #660066;
    /*Sets the default colour of links univisited*/
}


a:visited {
    color: #ff8c1a;
    /*Sets the colour of visited links*/
}

ul.navbar li a:hover {
    background-color: grey;
    color: white;
}

a:hover {
    color: #660066;
    /*Changes the colour of link when hovered over by cursor*/
    text-decoration: none;
    /*Removes text decoration of link, in this case underline*/
    background-color: #cc99ff
    /*Changes the background colour of box around link content*/
}

a:active {
    background-color: #660066;
    /*Changes background colour of box around link content while link is in the process of being activated*/
    /*For example, while cursor is over link and left mouse button is held down, but not yet released*/
    color: #cc99ff;
    /*Changes the colour of link text while link is in the process of being activated*/
    text-decoration: none;
    /*Removes text decoration while link is in the process of being activated*/
}