*      {box-sizing: border-box;
}

h1     {color: #f0c330;
       
}



body     {width: 100%;
          height: 100%;
          margin: 0 auto;
          background-color: #212121 ;
          padding: 0;
         
}

.hero    {background-image: url("designheroimage1800wide.jpg");
          /*height: 50%;*/
          background-position: center;
          background-repeat:no-repeat;
          background-size: cover;
          border: dotted 1px yellow;
          margin: 0 auto;
          width:100%;
          min-height: 328px;
          
}

.navigation  {width: 80%;
              background: #757575 ;
              color: white;
              margin: 0 auto;
              height:max-content;
              padding-bottom: 5px;
              padding-left: 2%;
              padding-right: 2%;
              padding-top: 0;
}

.wrapper  { width: 80%;
            margin: 0 auto;
            background-color:#757575;
            height: max-content;
            padding-right: 2%;
            padding-left: 2%;
            }

.heading    {width:100%;
             margin: 0 auto;
             background-color:#757575;
             padding-left: 2%;
             padding-right:2%;
             padding-top:20px;
             margin-top: -20px;}

.main       {margin: 0 auto;
             position:relative;
             width:80%;
             overflow:hidden;
             padding-top: 56.25%;}

.main2      { margin: 0 auto;
             position:relative;
             width:80%;
             overflow:hidden;
             padding-top: 56.25%;}

.heading2    {width: 80%;
              margin: 0 auto;
              padding-bottom:15px;
              padding-top: 20px;}

 .heading3   {width: 80%;
              margin: 0 auto;
              margin-top: 50px;
              padding-bottom:15px;
              padding-top: 20px;}

.css       {width: max-content;
            margin: 0 auto;
            text-decoration: underline;
            
            font-weight: bold;
            font-size: 1.4em;}

 .html     {width: max-content;
            margin: 0 auto;
            text-decoration: underline;
            
            font-weight: bold;
            font-size: 1.4em;}

.iframe   {position: absolute;
           border: solid 1px white;
           border-radius: 10px;
           top: 0;
           left: 0;
           bottom: 0;
           right: 0;
           width: 100%;
           height: 100%;}

.iframe2  {position: absolute;
           border: solid 1px white;
           border-radius: 10px;
           top: 0;
           left: 0;
           bottom: 0;
           right: 0;
           width: 100%;
           height: 100%;}

   

.designer  {color: #f0c330;
            font-size: 1.2em;
            /*position: relative;
            left: 20px;
            bottom: 20px;*/
            font-weight: bold;
            margin-left: 20px;
            margin-bottom: 20px;
}

html    {height: 100%;
         width:100%;
}


ul        {list-style-type: none;
           width: 100%;
           margin: auto;
           position: relative;
           background:#757575 ;
           padding:0;
           text-align:center;
}

li        {display: block;
           padding-left: 20px;
           font-size: 1.4em;
           width: 98%;
           border-radius: 10px;
           margin-left: 1%;
           margin-right: 1%;
           margin-bottom: 2px;
           background: black;
           padding: 3px;
}

.nav      {text-decoration: none;
           color: #f0c330;
}



.nav:hover{color: white; 
}

.p1 {font-size: 1.2em;
     color: white;}

.p2  {padding-top: 10px;
      font-size: 1.2em;
      color: white;}

.p-copyright  { width: max-content;
                margin: 0 auto;}

.div-copyright  { padding-top: 30px;
                  padding-bottom: 30px;}


@media only screen and (max-width: 519px) {
    
   
   
h1              {color: #C6930A;
                 font-size: 38px;
                 /*position: relative;
                 left:30px;
                 top: 10px;*/
                 margin:0;
                 margin-left: 30px;
                 margin-top: 10px;
}
    
      
  
.designer       {color: #C6930A;
                 font-size: 22px;
                 /*position: relative;
                 left: 30px;
                 top:5px;*/
                 font-weight:bold;
                 margin:0;
                 margin-left: 30px;
                 margin-top: 5px;
}
}


@media only screen and (min-width:520px) {
    
  
  
h1              {color: #C6930A;
                 font-size: 40px;
                 /*position: relative;
                 left:30px;
                 top: 10px; */
                 margin:0;
                 margin-left: 30px;
                 margin-top: 10px;
}
  
  
.designer        {color: #C6930A;
                 font-size: 25px;
                 /*position: relative;
                 left: 30px;
                 top: 5px;*/
                 font-weight:bold;
                 margin:0;
                 margin-left: 30px;
                 margin-top: 5px;
}
}
 


@media only screen and (min-width: 641px) { 
  /* Reduces size of Logo Text*/
  
  
  
h1              {color: #C6930A;
                 font-size: 2.9em;
                 /*position: relative;
                 left:30px;
                 bottom: 10px;*/
                 margin:0;
                 margin-left: 30px;
                 margin-top: 10px;
}
    
  
  
.designer        {color: #C6930A;
                 font-size: 1.7em;
                 /*position: relative;
                 left: 30px;
                 bottom: 20px;*/
                 font-weight: bold;
                 margin:0;
                 margin-left: 30px;
                 margin-bottom: 20px;
}
}

@media only screen and (min-width: 782px){
  /* reduces size of Logo*/
  
   
h1               {color: #C6930A;
                  font-size: 3em;
                  /*position: relative;
                  left:40px;
                  bottom:10px;*/
                  margin:0;
                  margin-left: 40px;
                  margin-top: 10px;
}

.designer         {color: #C6930A;
                  font-size: 1.8em;
                  /*position: relative;
                  left: 40px;
                  bottom: 20px;*/
                  font-weight: bold;
                  margin:0;
                  margin-left: 40px;
                  margin-bottom: 20px;
}



 @media only screen and (min-width: 905px) {
  /* reduces size of Logo */
  
    
    
h1               {color: #C6930A;
                  font-size: 3.6em;
                  /*position: relative;
                  left: 40px;
                  bottom: 20px;*/
                  margin:0;
                   margin-left: 40px;
                   margin-top: 20px;
}
    
.designer        {color: #C6930A;
                  font-size: 1.9em;
                  /*position: relative;
                  left: 40px;
                  bottom: 40px;*/
                  font-weight: bold;
                  margin:0;
                  margin-left: 40px;
                  margin-bottom: 40px;
 }
 } 


@media only screen and (min-width: 1048px) {
  /* Changes size of heading */
  
  
  
h1               {color: #C6930A;
                  font-size: 4em;
                  /*position: relative;
                  left:50px;
                  bottom: 10px;*/
                  margin:0;
                  margin-left: 50px;
                  margin-top: 10px;
}
  
  .designer      {color: #C6930A;
                  font-size: 2.1em;
                  /*position: relative;
                  left: 50px;
                  bottom: 40px;*/
                  font-weight: bold;
                  margin:0;
                   margin-left: 50px;
                   margin-bottom: 40px;
  
  }
  }


 @media only screen and (min-width: 1262px) {
  /* changes size of heading */
  
    
    
 h1               {color: #C6930A;
                   font-size: 5em;
                   /*position: relative;
                   left:50px;
                   bottom: 20px;*/
                   margin:0;
                  margin-left: 50px;
                  margin-top: 20px;
                   
 }
    
    
    
 .designer        {color: #C6930A;
                   font-size: 2.2em;
                   /*position: relative;
                   left: 50px;
                   bottom: 2px;*/
                   font-weight: bold;
                   margin:0;
                   margin-left: 50px;
                   margin-bottom: 2px;
    }
}