
          body {
            /* IE */
            background: linear-gradient(bottom, #ff3232 0%, #fcf528 16%, #28fc28 32%, #28fcf8 50%, #272ef9 66%, #ff28fb 82%, #ff3232 100%);
            /* Firefox */
            background: -moz-linear-gradient(bottom, #ff3232 0%, #fcf528 16%, #28fc28 32%, #28fcf8 50%, #272ef9 66%, #ff28fb 82%, #ff3232 100%);
            /* Chrome,Safari4+ */
            background: -webkit-gradient(linear, bottom left, bottom right, color-stop(0%,#ff3232), color-stop(16%,#fcf528), color-stop(32%,#28fc28), color-stop(50%,#28fcf8), color-stop(66%,#272ef9), color-stop(82%,#ff28fb), color-stop(100%,#ff3232));
            /* Chrome10+,Safari5.1+ */
            background: -webkit-linear-gradient(right, #ff3232 0%, #fcf528 16%, #28fc28 32%, #28fcf8 50%, #272ef9 66%, #ff28fb 82%, #ff3232 100%);
            background-size: 1000%;
        
        -webkit-background-size: 1000%;
        -moz-background-size: 1000%;

        
        /* IE */
        animation-name: fun-time-awesome;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
        /* Firefox: */
        -moz-animation-name: fun-time-awesome;
        -moz-animation-duration: 10s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
        -moz-animation-direction: alternate;
        -moz-animation-play-state: running;
        /* Chrome, Safari */
        -webkit-animation-name: fun-time-awesome;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-play-state: running;
        }

        /* IE */
        @keyframes fun-time-awesome {
            0% {
                background-position: bottom left;
            }

            100% {
                background-position: bottom right;
            }
        }

        /* Firefox */
        @-moz-keyframes fun-time-awesome {
            0% {
                background-position: bottom left;
            }

            100% {
                background-position: bottom right;
            }
        }

        /* Chrome, Safari */
        @-webkit-keyframes fun-time-awesome {
            0% {
                background-position: bottom left;
            }

            100% {
                background-position: bottom right;
            }
        }









            

            /* The figures Here represent the colour it will be at a percentage 100% is when it completes 0% is when it starts feel free to place your own percentage */

            

            /* New way of animation, we are using linear so that it looks cooler and also because it's more fluid like than the old way */
        

     

        button {
            -webkit-animation: Button 3s infinite;
            -webkit-animation-play-state: running;
            -moz-animation: Button 3s infinite;
            -moz-animation-play-state: running;
            animation: Button 3s infinite;
            animation-play-state: running;
            animation-timing-function: linear;
        }





        @-webkit-keyframes Button {

            0% {
                color: #ffffff;
                background-color: #000000;
            }



            10% {
                color: #cccccc;
                background-color: #333333;
            }



            20% {
                color: #999999;
                background-color: #666666;
            }



            30% {
                color: #666666;
                background-color: #999999;
            }



            40% {
                color: #333333;
                background-color: #cccccc;
            }


            50% {
                color: #000000;
                background-color: #ffffff;
            }

            60% {
                color: #333333;
                background-color: #cccccc;
            }

            70% {
                color: #666666;
                background-color: #999999;
            }

            80% {
                color: #999999;
                background-color: #666666;
            }

            90% {
                color: #cccccc;
                background-color: #333333;
            }



            100% {
                color: #ffffff;
                background-color: #000000;
            }
        }



        @keyframes Button {


            0% {
                color: #ffffff;
                background-color: #000000;
            }



            10% {
                color: #cccccc;
                background-color: #333333;
            }



            20% {
                color: #999999;
                background-color: #666666;
            }



            30% {
                color: #666666;
                background-color: #999999;
            }



            40% {
                color: #333333;
                background-color: #cccccc;
            }



            50% {
                color: #000000;
                background-color: #ffffff;
            }


            60% {
                color: #333333;
                background-color: #cccccc;
            }

            70% {
                color: #666666;
                background-color: #999999;
            }

            80% {
                color: #999999;
                background-color: #666666;
            }

            90% {
                color: #cccccc;
                background-color: #333333;
            }



            100% {
                color: #ffffff;
                background-color: #000000;
            }
        }


        p {

            cursor: default

        }



        .version {

            font-size: 64px;

            font-family: Forte;

            text-align: right;

            padding-bottom: 10px;

            color: white;

        }



        .cr {

            font-size: 22px;
            text-align:right;
            color: white;
            padding-right: 10px;

        }
        .title {
            font-size: 30px;
            text-align:center;
            color:white
        }

        input {
            border : 0px;
            border-width : 0px;
            
        }


        
        button {

            background-color: dimgray;

            color: white;

            display: inline-block;

            font-size: 20px;

            text-align: center;

            cursor: pointer;

            border: none;

            border-radius: 4px;

            
        }



            button:hover {

                font-size: 22px;

                animation-play-state: running;
              
            }







        .font {

            font-family: "Comic Sans MS", cursive, sans-serif

        }



        .border {
            border: groove;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-color: #000000;
            background-color: #74c9a0;
        }

        .wrapper {
            text-align:center;
        }

        ul {

            list-style-type: none;

            margin: 0;

            padding: 0;

            overflow: hidden;

            background-color: #333;

        }



        li {

            float: left;

        }



            li a {

                display: block;

                color: white;

                text-align: center;

                padding: 14px 16px;

                text-decoration: none;

            }



                li a:hover {

                    background-color: white;

                    color: black

                }



        div {

            margin: auto;

        }



        .shadow {
            color: #d82ee8;
            text-shadow: 2px 2px 2px #d82ee8, 0 0 10px #5e1266, 0px 0px 5px black;
            text-align: center;
        }

        .gayculator {
            text-align:center;
            font-size:16px;
        }
         .footnote {
            text-align:right;
            font-size:10px;
            
        }
