/*==================================================================================================
====================================================================================================
          darronlilley.com
====================================================================================================
==================================================================================================*/

/*==================================================================================================
STRUCTURE
==================================================================================================*/

/** { margin:0; padding:0; box-sizing:border-box; }*/

html {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
}

body {
  margin: 1em;
  font-family: "Times New Roman", Times, sans-serif;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.4;
  color: black;
  background-color: white;
  text-rendering: optimizeLegibility;
}

  .wrapper {
    display: flex;
    flex-flow: column;
    font-weight: normal;
    text-align: center;
  }

    /*.wrapper > * { /* Every first child
      padding: 1.5em;
    /*}*/

      header {
        /*display: none;*/
        margin-bottom: 2em;
      }

      main {
        display: flex;
        flex-direction: column;
        align-items: center;
        /*justify-content: center;*/
      }

        .row {
          display: flex;
          /*flex-direction: row; // row this is the default */
          flex-wrap: wrap; /* only needed for responsive */
          width: 100%;
        }

          .column {
            /* display: flex;  // this is not a flex parent
            flex-direction: column;  // unused: for flex parents only */
            flex-basis: 100%;
            height: auto;
            /*border: 1px solid red;*/
          }

            section {}

            article {
              width: 100%;
              height: auto;
              background-color: none;
              margin-bottom: 1em;
              text-align: center;
              margin-left: auto;
              margin-right: auto;
            }

              article.full {
                width: 100%;
              }

              article.copy {
                width: 50%;
              }

                figure {margin: 0px !important;}

                  img {
                    display: inline;
                    max-width: 100%;
                    height: auto;
                    padding-bottom: 0.5em
                  }

      footer {}




/*==================================================================================================
TYPE
==================================================================================================*/


h1, h2, p, figcaption, blockquote, li {font-size: 1.2em; line-height: 1.5em; font-weight: normal;}

  h2 {text-transform: uppercase; !important; padding-top: 1em}

a:link, a:visited, a:hover, a:active {color: black; text-decoration: none;}

ul, ol {padding: 0;}
ol {padding-inline-start: 0;}

li {list-style-position: inside;}

  li a:hover {/*border-bottom: 1px solid black;*/ text-decoration: underline;}

  nav li {/*display: inline;*/ list-style-type: none; list-style-position: inside; font-size: 2em;}
  footer li {list-style-type: none;}

figcaption {font-style: italic;}

blockquote {}

section.to-do {color: red}

.mega {font-size: 2.5em; font-weight: 800; text-align: center; text-transform: uppercase;}


/*==================================================================================================
MEDIA QUERIES
==================================================================================================*/

      /* TABLET */
      @media screen and (min-width:780px) {
        body {margin: 2em;}
        .wrapper {padding: 1.5em;}
        .mega {font-size: 6em;}
      }

      /* DESKTOP */
      @media screen and (min-width:1024px) {
        body {margin: 2em;}
        .wrapper {padding: 1.5em;}
        h1, h2, p, figcaption, blockquote, li {font-size: 1.5em; line-height: 1.7em;}
        .mega {font-size: 10em;}
        article {width: 75%;}
      }