p {margin-left: 5px; font-family: Arial, Helvetica, sans-serif;}

    #homebodimation {user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; -moz-user-select: none; opacity: 1; animation-name: homepage; animation-duration: .5s; animation-timing-function: linear;}
    @keyframes homepage {from {opacity:0;} to {opacity:1} ;}
    #rightbodimation { animation-name: slideright; animation-duration: .5s; animation-timing-function: linear;}
    @keyframes slideright {from {transform: translateX(360px)} to {transform: translateX(20px)} ;}

    /*HEADINGS FOR WEBSITES*/
   .header_menu {padding:8px; background-color: rgb(10,10,30); color:tomato; padding:20px; padding-left:15px; padding-right:30px; border:none; margin: -8px -8px 0px -8px; position: static; }
   .motto{font-family:cursive; color: orange; font-size: 30px}
   .material-icons{ color:dodgerblue;}
   .articleheadings {font-size: 20px; padding:10px; color:white; background-color: tomato; text-align: center; border-radius:20px;}
   .subarticleheadings {background-color: darkgrey; font-size:20px; color: white; padding:8px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;}

     /*MARGINS*/
     .rightmargin {margin-right: -8px}
     .leftmargin { margin-left: -8px}
     .fullmargin {margin-left: -8px; margin-right:-8px;}

     /*Footers for websites*/
     .footer{background-color: rgb(10,10,30); color: white; font-size: 20px; position: relative; bottom: 0; margin: 0px -8px -30px -8px; text-align: center; padding: 20px;}

      /*IMAGE STYLE*/
    .image { margin-right: -10px; margin-left: -10px; width: 362px;}
    .iframe {margin-left:-10px; width:359px;}
    .copyright-image { user-select:none; pointer-events:none; width: 100%; height: auto; }
    .heroimage { width: 100%; filter: brightness(45%); user-select: none; pointer-events: none; }
    .slideH {height:600px; width:370px;}

    /*TEXT SHADOW*/
    .textshadow {text-shadow: 1px 1px .5px grey;}
    .herotext { text-shadow: 1px 2px .5px black; color:white; text-align:center; font-size:40px; position: absolute; top: 130px; }
    #bar { height: 5px; width: 0px; position: absolute; border: none; text-align: center; top: 270px; background-color: tomato; transition-delay: 5s; transition: 3s linear; }
    #blue { width:45px; height:45px; background-color: dodgerblue; position: absolute; top: 120px; left: 45px; }
     
     /*HORIZONTAL SCROLLING*/
     .horizontals {max-width:auto; height:200px}
     .horizontal-scrolling {white-space:nowrap; overflow:auto; padding:3px; background-color: tomato; margin-left: -8px; margin-right:-8px}

     /*MENU AND DROP DOWN*/
    a {text-decoration: none; cursor: pointer; color:dodgerblue; }
    .menucontainer { position: relative; cursor: pointer; overflow: hidden;}
    .overlay {background-color: rgb(10,10,30); position: absolute; height:0; width: 370px; transition: .2s linear; top: 35px; margin-left: -15px; overflow: hidden; z-index: 4;}
    .menuword {font-size: 17px; color: white; width: 300px; height: 150px; text-align: center; top: 35%; position: relative; padding: 10px; transform: translateY(-30px);}
    .menucons {color: tomato; border: 1px solid tomato; padding: 10px; border-radius: 50%;}
    .menutag {font-size: 15px; font-family: Arial, sans-serif;}
    .bottomborder {border-bottom: .1px solid grey; padding: 7px;}
    .menucontainer:hover .overlay {height:400px; }
    
    .block1 { position: absolute; text-align: center; left: 25px; top: -60px; padding:10px; }
    .block3 { position: absolute; text-align: center; padding:10px; right:0px; top: -60px; }
    .block2 { position: absolute; text-align: center; padding:10px; right:110px; top: -60px; }
    
  
    @media screen and (min-width:600px) {
     .overlay { width:100vw; top: 40px; }
     .menuword{ width: 100%; }
     .block1 {left: 80px; }
     .block2 { left: 100px; }
     .block3 { right: 80px; }
      }

    .stream {animation-name: stream; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function:linear}
    @keyframes stream {from {transform: translateX(350px)} to {transform: translateX(-300px)} }


    /*FORMS and Form inputs designs*/
    .formposition {text-align: center; position: relative;}
    .forminput { padding:7px; height: 30px; width:250px; border:none; border-radius: 5px; background-color: white; opacity:80%}
    .submitbutton {padding: 10px; height: 43px; width: 261px; color: white; border: none; font-size: 20px; text-align: center; border-radius: 5px; background-color: dodgerblue; }
   .formlabel {color: white; text-align: left; left: 35px; position: relative; border-bottom: 1px solid dodgerblue; max-width: 250px; padding-bottom: 5px; bottom: -10px;}
   .loginFormLabel {color: white; text-align: left; left: 35px; position: relative; border-bottom: 1px solid dodgerblue; max-width: 250px; padding-bottom: 5px; bottom: -10px;}
   .inputSelect { padding:7px; height: 45px; width:260px ;border:none; border-radius: 5px; background-color: white; opacity:80%; }
   .formcard {border-bottom-left-radius:30px; border-bottom-right-radius: 30px; box-align:center; box-shadow: 0.5px 15px 20px grey; padding-bottom:5em; overflow: hidden;}
    #toggleEye { cursor: pointer; color: black; position: absolute; right: 55px; top: 150px; }


     #passworderror, #phonenumbererror, #emailerror{color: red; font-size: 15px; animation-name: wiggle; animation-duration: 0.2s; animation-iteration-count: 32;}
     @keyframes wiggle {
    0% {transform: translate(0px, -5px)}
    25% {transform: translate(-5px, 5px)}
    50% {transform: translate(5px, -5px)}
    75% {transform: translate(0px, 5px)}
    10% {transform: translate(-5px, 0px)}
     0% {transform: translate(0px, 0px)}
    ;}
    
    /*A timestamp that shows the date an article was last updated*/
    #timestamp { color: lightslategray; font-size: 15px; border-radius: 9px; width: 300px; padding: 5px;}
    .timestamp { color: lightslategray; font-size: 15px; border-radius: 9px; width: 300px; padding: 5px; }