/*************************************************************************
* 
* 
* 
*==========================================
   Title:  SeizureHero Style Sheet
   Author: Kevin Known
   Date:   29 Aug 2023
==========================================
* 
* 
* Cloudy Mountain CONFIDENTIAL
* __________________
* 
*  [2021] - [2024] Cloudy Mountain Computers
*  All Rights Reserved.
* 
* NOTICE:  All information contained herein is, and remains
* the property of Cloudy Mountain Computers and its suppliers,
* if any.  The intellectual and technical concepts contained
* herein are proprietary to Cloudy Mountain Computers
* and its suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Cloudy Mountain Computers.
*
* 
* 
* 
*  
*/




/* Animation */


.cloudAnimation {
    animation-name: stylie-transform-keyframes;
    animation-duration: 8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    transform-origin: 0 0;
    height: 10%;
    width:  10%;
}
@keyframes stylie-transform-keyframes {
    0% {
        transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
        animation-timing-function: cubic-bezier(.25,.25,.75,.75);
    }
    100% {
        transform:translate(1831px, -331px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
    }
}
html::after {
    content: url(https://ga-beacon.appspot.com/UA-42910121-1/stylie?pixel);
    position: absolute;
    left: -999em;
}





.cloudAnimation2 {
    -moz-animation-name: stylie2-transform-keyframes;
    -moz-animation-duration: 9s;
    -moz-animation-delay: 1s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 0 0;
    -o-animation-name: stylie2-transform-keyframes;
    -o-animation-duration: 3s;
    -o-animation-delay: 4s;
    -o-animation-fill-mode: forwards;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 0 0;
    -webkit-animation-name: stylie2-transform-keyframes;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 4s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 0 0;
    height: 10%;
    width:  10%;
}
@-moz-keyframes stylie2-transform-keyframes {
    0% {
        -moz-transform:translate(150px, 50px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
        -moz-animation-timing-function: cubic-bezier(.25,.25,.75,.75);
    }
    100% {
        -moz-transform:translate(1565px, -158px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
    }
}
@-o-keyframes stylie2-transform-keyframes {
    0% {
        -o-transform:translate(150px, 50px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
        -o-animation-timing-function: cubic-bezier(.25,.25,.75,.75);
    }
    100% {
        -o-transform:translate(1565px, -158px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
    }
}
@-webkit-keyframes stylie2-transform-keyframes {
    0% {
        -webkit-transform:translate(150px, 50px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
        -webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);
    }
    100% {
        -webkit-transform:translate(1565px, -158px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
    }
}
html::after {
    content: url(https://ga-beacon.appspot.com/UA-42910121-1/stylie?pixel);
    position: absolute;
    left: -999em;
}



/* Animation End */

.siteNameBanner{
    text-align: center;
    font-size:7vw;
    /*font-size:70px;*/

    color: cornflowerblue;
    font-family: scaryFont;
    animation-name: bannerAnimation;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    position: relative;
    left:15%;

    height:5%;
    /*border: 5px solid red;*/

    width:70%;


}


.navStyle{

    width: 100%;

    top:100%;
    border: 6px solid #76EE00;
    border-radius: 25px;
    height: 60%;
    font-size:1.75rem;
    font-family: scaryFont;
}





.greetingText{

    font-size:2.5vw;
    color:#7FFF00;
    width: 68.5%;
    position: relative;

    text-shadow: 1px 1px black;

    /*border: 5px solid red;*/
    top:-10%;

}




.navHeader{
    color: cornflowerblue;
    font-size:6rem;
    width: 100%;
    /*   text-shadow: 10px 10px blue; */
    text-align: center;
    /* border: 5px solid red;*/
}





/* main */
/*background css*/

body {
    background: url("background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:  60%; /*or 70%, or what you want*/
    height: 100%;
  
    
    background-position: center center;
}




/* Links */

.a{
    color:green;

}

a.ex1:hover, a.ex1:active {
    color: greenyellow;
}



a:link {
    color: red;
}

/* visited link */
a:visited {
    color: #A9A9A9;
}

/* mouse over link */
a:hover {
    color: greenyellow;
}

/* selected link */
a:active {
    color:green ;
}

/*End Links */



body, html {
    height: 65%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
}
body .container1, body .container2, body .container3, html .container1, html .container2, html .container3 {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}






/*inline style code */
        .container {
            width: 80%;
            margin: 0 auto;
        }

        .left-wrap, .right-wrap {
            width: 50%;
            float: left;
            box-sizing: border-box;
            padding: 10px;
        }

        .right-wrap {
            float: right;
        }

        .clear-both {
            clear: both;
        }



.footer a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px; /* Adjust for better touch targets on mobile */
}


/* Base font size */
.footer p {
    font-size: 1.2em; /* Adjust as needed */
}


/*Media Queries*/



/* Smaller font size for smaller screens */
@media screen and (max-width: 600px) {
    .footer p {
        font-size: 1.2em; /* Smaller font size on small screens */
    }
}

/* Larger font size for larger screens */
@media screen and (min-width: 1024px) {
    .footer p {
        font-size: 1.1em; /* Larger font size on large screens */
    }
}




@media screen and (max-width: 768px) {
    .left-wrap, .right-wrap {
        width: 100%;
        float: none;
    }
}