/* I
    I
     M
      P
       O
        R   
         T              |
          A             |
           N            |
            T          \|/
             !          `

    READ
    THESE
    INSTRUCTIONS
    BEFORE
    EDITING

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

    2a. -----> DO NOT include any body or div styles. i.e., no:

        body { ... }
        div { ... }

    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/xx/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
    5.  REPLACE this file on the server so someone else can edit it

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



/* --------------------------------------------------
  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: hidden;
}

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



/* --------------------------------------------------
  Class Square Styles (THE FUN PART!!)
-------------------------------------------------- */


/* --------------------
Dahee Choi
-------------------- */
.dc {
    background-color: pink;
    border: none;
}

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

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

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

.dc.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 xx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



/* --------------------
    YOUR NAME
-------------------- */