/* -----------------------------
   colours used
   -----------------------------
    #2f2554 Dark Purple
    #4c328e Mid Purple
    #ae77af Light Purple
    #7fc3ca Teal 
    #ae77af Pink

*/

/* -----------------------------
   fonts - add

   @font-face {
    }
   -----------------------------  */

    body {
        width: 100%;
        height:100%;
        margin: 0px auto;
        padding:0px; 
        color:#444;
        font-family: 'Open Sans',sans-serif;
        font-size: 1em;
        line-height: 1.4em;
        background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
    }

    p{
        
        padding-bottom: 1.5em;
        
    }
    header {
        /* Keeps page container centered on the page when larger than 1024 */
        background: rgba(0, 0, 0, 0.3);
        max-width: 600px;
        margin: 0px auto;
        /* padding:2em; */
        text-align: center;
        
    }

    #hero {
        width: 100%;
        height: 800px;
        background-position:center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      

    h1 {
        font-size: 2.8em;
        line-height: 1.2em;
        padding:0.5em;
        font-family: 'Belleza',serif;
        color: white;
        /* padding: 0.6em; */
    }
    

    .container-full {
        width: 100%;
        margin: 0px auto;
        padding:0px; 
        /* border:thin red solid; */
    }
    .container-600 {
        /* Keeps page container centered on the page when larger than 1024 */
        max-width: 600px;
        margin: 0px auto;
        padding:4em 2em;
        border:thin green solid;
    }
    .grey {
        background-color: #efefef;
    }
    .pink {
        background-color: #ae77af;
  
    }
    .darkpurple {
        background-color:#2f2554;
  
    }
    .midpurple {
        background-color:#4c328e;
    }

    
    
    
    /* ====================================
        Desktop Widths
        ==================================== */

    .submitButton {
        background:#4c328e;
        color: white;
        margin: 0px auto;
        width: 100%;
        border: none;
        border-radius: 4px;
        text-transform: uppercase;
        cursor: pointer;
        font-weight: 500;
        padding: 12px 8px;
        display:none;
    }
    .halfButton {
        /* background:#4c328e; */
        color: white;
        
        width: 50%;
        border: none;
        border-radius: 4px;
        text-transform: uppercase;
        cursor: pointer;
        font-weight: 500;
        font-size: 1.1em;
        padding: 16px 8px;
    }

   

    
    /* ====================================
        Styles for small width screens
        ==================================== */
    @media screen and (max-width: 50em) {
        
         .halfButton {
            /* ain't half no more! */       
            width: 100%;

        }

    }

    .wrapper {
        width: 600px;
        height: 200px;
        position: absolute;
        margin: -100px 0 0 -300px;
        top: 50%;
        left: 50%;
        -moz-border-radius: 80px 80px 80px 80px;
        -webkit-border-radius: 80px 80px 80px 80px;
        border-radius: 80px 80px 80px 80px;
        -webkit-box-shadow: 10px 10px 14px 7px rgba(0, 0, 0, 0.61);
        -moz-box-shadow: 10px 10px 14px 7px rgba(0, 0, 0, 0.61);
        box-shadow: 10px 10px 14px 7px rgba(0, 0, 0, 0.61);
        font-size: 50px;
      }
      
      #digital-watch {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 600px;
        height: 100px;
        position: absolute;
        margin: -50px 0 0 -300px;
        left: 50%;
        top: 45%;
        text-align: center;
        font-size: 95px;
        line-height: 0.8;
      }
      
      #meridiem {
        font-size: 0.4em;
      }
      
      /* #buttons {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 400px;
        height: 60px;
        position: absolute;
        margin: -30px 0 0 -200px;
        left: 50%;
        top: 85%;
        text-align: center;
      }
      
      #buttons input {
        width: 100px;
        height: 40px;
        position: relative;
        top: -20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #4CAF50;
        cursor: pointer;
        border-radius: 40%;
        font-size: 0.4em;
        color: white;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
      } */
      
      /* #buttons input:hover {
        -webkit-box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        -moz-box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        border: 3px solid #4CEB13;
      } */
      
      /* #buttons input:disabled {
        opacity: 0.8;
        cursor: not-allowed;
        border: none;
      } */