/*

    1.  find your name
    2.  add your CSS directly below your name

    2a. -----> DO NOT include any body or div styles

    3.  IMPORTANT: prepend all of your classes with a classname using your initials
        for example, if my initials are th:

        .th.square { ... }
        .th.circle { ... }
        .th.everything-else { ... }

    3a. -----> IF YOU ARE USING IMAGES

        IMPORTANT: all images should be hosted on my server.

        1.  create a folder on your desktop with your initials
        2.  put all of your images into that folder
        3.  upload your folder to the `images` folder on my server 
        4.  IMPORTANT: update the url for all of your background images!

            background-image: url(images/th/image.png);

    3b. -----> IF YOU ARE USING ANIMATIONS

        IMPORTANT: make sure your animations have unique names
        if your animation is called something generic like "mymove" or "rotate", 
        be sure to prepend the animation name with your initials 
        -- and update your references to that animation:

            webkit-animation: maMove 5s infinite; 
            animation: maMove 5s infinite;

        that way, we know it's YOUR rotation animation and not someone else's

    4.  SAVE this file

-------------------------------------------------- *//**/



/* --------------------
Tiff (example)
-------------------- */
/*.th {
    background-color: pink;
    border: none;
}

    .th:after, .th.circle:after {
        content: " ";
        animation: th-spin 0.5s infinite linear;
        background: black;
        width: 4px;
        height: 80%;
        position: absolute;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
    }

.th.circle {
    background-color: #00ff64;
    border-radius: 50%;
}

    .th.circle:after {
        animation: th-spin 0.5s infinite linear;
        animation-direction: reverse;
    }

.th.yellow {
    border-top-style: solid;
    border-right-style: double;
    border-bottom-style: groove;
    border-left-style: ridge;
    border-color: gold;
    background-color: orangered;
    border-width: 15px;
}

@keyframes th-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}*/



/* --------------------------------------------------
  Reset browser defaults
-------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
}



/* --------------------------------------------------
  Establish which box model we want to use
  https://css-tricks.com/the-css-box-model/
-------------------------------------------------- */
*,:before,:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



/* --------------------------------------------------
  Default Square Styles
-------------------------------------------------- */
/* hide the scrollbars so we get the appearance of an infinite canvas */
body {
    overflow: auto;
}

.square, div.square {
    position: relative;
    /* so all the squares form a grid */
    float: left;
    /* assuming we are doing a 4x4 grid of squares */
    width: 10%;
    max-width: 10%;
    /* vh stands for Viewport Height */
    height: 10vh;
    max-height: 10vh;
    /* so no content overflows the container */
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}





Bea /* ---------------------------------------- 
Your Name
---------------------------------------- */

/* NOTES:

1. DO NOT use width or height properties for any parent-level divs (these are divs you will be adding classes to).
2. Use % over px for sizing interior divs
3. Remember: if you do not give dimention and style to interior divs, we will not see them. By default, divs are invisible.

*/

/* so we can tell that our file is loading */
body {
	background-color: rgb(255,245,0);
}

/*div {border: solid gray .1px;}*/

.bd {
	background: black;
}



.first {
	background-color: black;
	transition: background-color 2s;
}

.first:hover { 
	background-color: white;
	cursor: pointer;
	transition: color-red;
}

.first:active {
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
}

.first div { 
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
	border-color: black
	width: 75%;
	height: 20%;
	transform: rotate(180deg);
	margin-top: 20%;
}

/*.corners {
	border-style: ridge;
	border-width: 20px;
	border-top-color: white;
	border-right-color: red;
	border-left-color: yellow;
	border-bottom-color: orange;*/

/*	../desktop/beaCC/css/intro-to-css/css/template_05/black.png*/


/*NEXT*/




.second {
	background-color: black;
	transition: background-color 8s;
}

.second:hover { 
	background-color: orange;
	cursor: pointer;
	transition: color-red;
}

.second:active {
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
}

.second div { 
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
	border-color: black
	width: 75%;
	height: 20%;
	transform: rotate(90deg);
	margin-top: 20%;
}



/*.second div { 
	background: url(http://static.tumblr.com/bsqr7bz/5BCm39rtj/black-and-white-stripes1.jpg);
	width: 100%;
	height: 50%;
	transform: rotate(45deg);
	margin-top: 25%;
}*/




/*NEXT*/
/*GLITCH*/

}
.third {
	background-color: black;
	transition: background-color 3s;
}

.third:hover { 
	background-color: #DB7D1F;
	cursor: pointer;
	transition: color-red;

	background: url(http://static.tumblr.com/bsqr7bz/5BCm39rtj/black-and-white-stripes1.jpg);
	transform: rotate(45deg);
	margin-top: 25%;
}

.third:active {
	background: black; 
	background-attachment: 
}




/*NEXT*/



.fourth {
	background-color: black;
	transition: background-color 3s;
}

.fourth:hover { 
	background-color: red;
	cursor: pointer;
	transition: color-red;
}

.fourth:active {
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
}

.fourth div { 
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
	border-color: black
	width: 75%;
	height: 20%;
	transform: rotate(180deg);
	margin-top: 20%;
}




.fifth {
	background-color: black;
	transition: background-color 1s;
}

.fifth:hover { 
	background-color: #071BA8;
	cursor: pointer;
	transition: color-red;
}

.fifth:active {
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
}

.fifth div { 
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
	border-color: black
	width: 75%;
	height: 20%;
	transform: rotate(180deg);
	margin-top: 20%;
}





/*EXTRA 

.second:hover { 
	background-color: #DB7D1F;
	cursor: pointer;
	transition: color-red;
	
	background: url(http://static.tumblr.com/bsqr7bz/5BCm39rtj/black-and-white-stripes1.jpg);
	width: 100%;
	height: 50%;
	transform: rotate(45deg);
	margin-top: 25%;
}*/