/* Author:       Matt Wolf, Owner, Wolf Digital Solutions, LLC                  */
   /* Date:         7-17-22                    */
   /* Description:  common styles for the site           */

   /*font imports*/
   @import url(fonts/journal.css);
   @font-face {
        font-family: EduNSWACT-Regular;
        src: url(fonts/EduNSWACTFoundation-Regular.ttf);
    }
    @font-face {
        font-family: EduNSWACT-Bold;
     src: url(fonts/EduNSWACTFoundation-Bold.ttf);
    }
    @font-face {
        font-family: PressStart;
     src: url(fonts/PressStart2P-Regular.ttf);
    }
   /* Eric Meyers reset*/
   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, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td,
   article, aside, canvas, details, embed, 
   figure, figcaption, footer, header, hgroup, 
   menu, nav, output, ruby, section, summary,
   time, main, mark, audio, video {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
   article, aside, details, figcaption, figure, 
   footer, header, hgroup, main, menu, nav, section {
       display: block;
   }
   body {
       line-height: 1;
   }
   ol, ul {
       list-style: none;
   }
   blockquote, q {
       quotes: none;
   }
   blockquote:before, blockquote:after,
   q:before, q:after {
       content: '';
       content: none;
   }
   table {
       border-collapse: collapse;
       border-spacing: 0;
   }


/*start of the css for the site*/

body{
background-image: url(../images/XAML.JPG);
}
#wrapper{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(200,200,200,.85);
    
}
#site-header{
    text-align: center;
    width: 100%;
    font-size: 4vw;
    font-family: PressStart;
    padding-top: 10px;
    padding-bottom: 25px;
    padding-left:5%;
}


#navbar-custom{
    font-size: 2.5vw;
    font-family: PressStart;
    border-bottom: solid 1px rgba(240,240,240,.9);
}

.nav-item{
    margin-left:auto;
    margin-right: auto;

    padding-right: 5%;
    
}

h3{
    font-size:3vw;
    font-family: PressStart;
    
}
h4{
    font-size: 2.25vw;
    font-family: PressStart;
}

#contact{
    width: 75%;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
}

#about{
    width: 75%;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
}

#examples{
    
     width: 75%;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
}
#user-name-input, #user-email-input{
    margin-left: 12.5%;
    width: 75%;
}
#user-text-area, #emailHelp{
    margin-left: 12.5%;
    width: 75%;
}
#emailHelp{
    color: black;
}


/******************************************************************************************************************/
  /* screen width greater then 1080px */
  @media screen and (min-width:1080px) {
    #site-header{
        font-size: 2vw;
    }
    #navbar-custom{
        font-size: 1.5vw;
    }
    h3{
        font-size:1.125vw;
    }
    h4{
        font-size: 1vw;
    }
}


/******************************************************************************************************************/
  /* screen width greater then 1600px */
  @media screen and (min-width:1600px) {
        #site-header{
            font-size: 2.5em;
        }
        #navbar-custom{
            font-size: 1.75em;
        }
        h3{
            font-size:1.5em;
        }
        h4{
            font-size: 1em;
        }
  }