@import url(https://fonts.googleapis.com/css?family=Pathway+Gothic+One);



html { width: 100%;
       height: 100%;
       -webkit-text-size-adjust: 100%;
     }





body { width: 100%;
       height: 100%;
       margin: 0px;
       padding: 0px;
       font-family: 'Pathway Gothic One', arial, sans-serif;
       font-size: 16px;
       background: #000;
       color: #fff;
       background-attachment: fixed;
       box-sizing: border-box;
     }




h1 { font-size: 70px;
     margin: 0px;
   }

h2 { font-size: 30px;
     margin: 0px;
   }

#temp h2 { 
         }



a { color: #fff;
    text-decoration: none;
    cursor: pointer;
  }






form { position: absolute;
       top: 50%;
       width: 100%;
       height: 80px;
       margin-top: -40px;
       text-align: center;
       font-size: 20px;
     }

input,
select { -webkit-appearance:none;
         font-family: 'Pathway Gothic One', arial, sans-serif;
         font-size: 20px;
         line-height: 20px;
         border-radius: 0px;
         border: 2px solid #ddd;
         width: 200px;
         height: 50px;
         box-sizing: border-box;
         padding: 12px;
       }

input[type='submit'] { width: 70px;
                       margin-left: 10px;
                       border: 2px solid #0a0;
                       background-color: #0a0;
                       color: #fff;
                     }



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


#clipboard { position: absolute;
             top: 50%;
             width: 100%;
             height: 200px;
             margin-top: 40px;
             text-align: center;
             font-size: 20px;
           }

   

         










/*
+------------------------------------------------------------+
| 1180px wide or less                                        |
+------------------------------------------------------------+
*/

@media (max-width: 1180px)
    {

    header { max-width: 100%;
             margin: 0px 5px;
           }

    nav { max-width: 100%;
          margin: 0px 5px 5px 5px;
        }

    main { max-width: 100%;
           margin: 5px 0px 0px 5px;
         }



    footer { max-width: 100%;
             margin: 0px 5px;
           }

    }










/*
+------------------------------------------------------------+
| 990px wide or less                                         |
+------------------------------------------------------------+
*/

@media (max-width: 990px)
    {



    }










/*
+------------------------------------------------------------+
| 770px wide or less (most tablets)                          |
+------------------------------------------------------------+
*/

@media (max-width: 770px)
    {

    body { font-size: 16px;
         }

    header  { font-size: 25px;
            }



    }










/*
+------------------------------------------------------------+
| 600px wide or less                                         |
+------------------------------------------------------------+
*/

@media (max-width: 600px)
    {



    }










/*
+------------------------------------------------------------+
| 450px wide or less (most phones)                           |
+------------------------------------------------------------+
*/

@media (max-width: 450px)
    {

    nav { font-size: 18px;
          padding: 10px;
        }



    }