/* 
    Assignment Name: Pacific Trails Resort
        Task 5: Modify the Desktop CSS
        Task 6: Configure the Tablet CSS
        Task 7: Configure the Smartphone CSS
    File Name: pacific.css
    Date: 11/12/18 
    Programmer: Mary Grace A. Gusso */

*{ box-sizing: border-box; }

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

body    { background-color: #3399CC;
          background-image: linear-gradient(to bottom, #3399CC, #C2E0F0, #3399CC);
          color: #666666;
          font-family: Verdana, Arial, sans-serif; }

header  { background-color: #000033;
          color: #FFFFFF;
          font-family: Georgia, sans-serif; }

main    { padding: 1px 2em;
          display: block; 
          background-color: #FFFFFF; 
          margin-left: 170px; }

h1      { line-height: 200%; 
          background-image: url(../sunset.jpg);
          background-position: right;
          background-repeat: no-repeat;
          padding-left: 2em;
          height: 72px; 
          margin-bottom: 0;}

nav     { float: left;
          width: 160px;
          padding: 0;
          font-weight: bold; }

nav ul  { list-style-type: none;
          padding-left: 1em; }

nav a   { text-decoration: none; }

nav a:link { color: #FFFFFF; }
nav a:visited { color: #C2E0F0; }
nav a:hover { color: #CCCCCC; }

h2      { color: #3399CC;
          font-family: Georgia, serif; }

dt      { color: #000033;
          font-weight: bold; }

h3      { color: #000033; }

.resort { color: #000033;
          font-size: 1.2em; }

footer  { padding: 1em;
          margin-left: 170px;
          font-size: .07em;
          font-style: italic;
          text-align: center; 
          background-color: #FFFFFF;}

#wrapper { min-width: 700px;
           max-width: 1024px;
           box-shadow: 5px 5px 5px #828282;
           margin-left: auto;
           margin-right: auto; 
           background-color: #000033;}

#homehero { height: 300px;
            margin-left: 170px;
            background-image: url(../coast.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;}

#yurthero { height: 300px;
            margin-left: 170px;
            background-image: url(../yurt.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;}

#trailhero { height: 300px;
            margin-left: 170px;
            background-image: url(../trail.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;}

#mobile    { display: none; }

#desktop   { display: inline; }

@media only screen and (max-width: 1024px) {
    body { margin: 0; padding: 0;
           background-image: none; }
    #wrapper { width: auto; min-width: 0;
               margin: 0; box-shadow: none; }
    h1 { margin: 0; }
    nav { float: none; width: auto; 
          padding: 0.01em 1em; 
          background-color: #124373; }
    nav li { display: inline-block; }
    nav a { padding-right: 2em; }
    main { padding: 1em; margin-left: 0;
           font-size: 90%; }
    footer { margin: 0; }
    #homehero { margin-left: 0; }
    #yurthero { margin-left: 0; }
    #trailhero { margin-left: 0; }
}

@media only all and (max-width: 768px) {
    h1 { height: 100%; font-size: 1.5em;
         padding-left: 0.3em; }
    nav { padding: 0; }
    nav a { display: block; padding: 0.2em;
            font-size: 1.1em;
            border-bottom: 1px solid #330000; }
    nav ul { margin: 0; padding: 0; }
    nav li { display: block; margin: 0; 
             padding: 0; }
    main { padding: 0.1em 0.6em 0.1em 0.4em; }
    #homehero, #yurthero, #trailhero { display: none; }
    footer { padding: 0; }
    #mobile { display: inline; }
    #desktop { display: none; }
}