/*  Assignment Name: Project Update 5
    File Name: styles.css
    Date: 12/05/18 
    Programmer: Mary Grace A. Gusso */

* {box-sizing: border-box;}

header, nav, main, footer { display: block; }

body    { font-family: Verdana, Arial, sans-serif;
          background-size: cover;
          background-color: #e6fffa; }

header  { grid-row: 1 / 2;
          grid-column: 1 / 3;
          background-image: url(site-assets/rsz_logo.png);
          background-repeat: no-repeat;  	
		  background-position: .8em .4em; }

main    { grid-row: 3 / 4;
          grid-column: 1 / 2;
          padding: 0 1em; }

main h2 { color: #00cccc; }

h1      { text-align: center;
          font-size: 250%;
	      padding: .5em 0 0 1em;
          color: #33cccc;
          text-shadow: 3px 3px 3px #a88a99; }

h2      { color: #00e6e6; }

h3      { color: #00cccc; }

aside   { grid-row: 3 / 4;
          grid-column: 2 / 3;
          padding: 0 1em; }

aside p { font-size: 85%;}

img     { width: 100%; 
          height: auto; }

nav     { grid-row: 2 / 3;
          grid-column: 1 / 3;
          padding: 0 1em; }

nav ul  { list-style-type: none; 
          font-size: 1.2em;
		  padding-left: 0; 
          text-align: center; }

nav li  { display: inline-block; }

nav a   { text-decoration: none; }

nav a:link { color: #59a6a6; }
nav a:visited { color: #99668c; }
nav a:hover { color: #df9fbf; }

footer  { grid-row: 4 / 5;
          grid-column: 1 / 3;
          text-align: center;
          font-size: .70em;
		  font-style: italic; 
          padding: 1em; }

#wrapper { display: grid;
           grid-template-columns: 1fr 200px;
           grid-template-rows: 150px auto auto 50px;
           background-color: #ffffff; 
	       width: 85%;
           margin: auto; }

.company { font-style: italic; 
           color: #eb4799; }

.info { text-align: right;
        float: right;
        font-size: 85%; }

#mobile  { display: none; }

#desktop   { display: inline; }

@media only screen and (max-width: 1024px) {
    body { margin: 0; padding: 0; }
    header { background-position: center; }
    h1 { display: none; }
    #wrapper { width: auto; margin: 0; }
    h1 { font-size: 200%; }
    nav ul { text-align: center; }
    nav li { padding: 0 0.5em; 
             font-size: 1.2em; 
             display: inline; }
			
}

@media only screen and (max-width: 768px) {
    #wrapper { grid-template-columns: auto;
               grid-template-rows: 150px auto auto auto 50px; }
    header { grid-row: 1 / 2;
             grid-column: 1 / 2;
             background-position: center; }
    h1 { display: none; }
    nav { grid-row: 2 / 3;
          grid-column: 1 / 2;}
    main { grid-row: 3 / 4;
           grid-column: 1 / 2; }
    aside { grid-row: 4 / 5;
            grid-column: 1 / 2; }
    footer { grid-row: 5 / 6;
             grid-column: 1 / 2; }
    #mobile { display: inline; }
    #desktop { display: none; }
}