* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100vh;
    background: linear-gradient(135deg, #6495ED, DodgerBlue, yellow, orange, LightSalmon);
    background-size: 400% 400%;
    animation: Gradient 30s linear infinite;
    animation-play-state: paused;
}
/*animation for the background color*/
@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

/*The SVG*/
svg {
    width: 100%;
    height: 95%;
    border: 5px solid black;
}

/*The Title*/
.title {
    text-anchor: middle;
    font-weight: bold;
    font-size: 5em;
    fill: url(#my-gradient2);
    stroke: black;
    stroke-width: 3px;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: stroke1 6s linear infinite;
    animation-play-state: paused;
}

@keyframes stroke1 {
    to {
        stroke-dashoffset: 0;
    }
}

/*======================================================================*/
/*The footer*/
footer {
    /*Footer*/
    position: fixed;
    width: 100%;
    height: 5%;
    text-shadow: 2px 2px 5px red;
    border: 3px solid blue;
    background-color: cornflowerblue;
    font-style: italic;
    font-weight: bold;
    bottom: 0;
    left: 0;
    clear: both;
}

.foter {
    margin-left: 10%;
    animation: FooterMove 20s infinite;
    animation-play-state: paused;
}

@keyframes FooterMove {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(80%);
    }
}

/*===================================================================*/
/*The div that have info of the page */
#info {
    width: 35%;
    height: 30%;
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(../images/border.gif) 10 round;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    display: inline-block;
    background-color: LemonChiffon;
    box-shadow: 25px 25px 20px #888888;
     overflow: scroll;
    transition: opacity 3s;
}
p{
    width: 100%;
    height: 100%;
}

/*=================================================================================*/
/*The Sun animation to up and down and to change color from yellow to orange*/
.Sun {
    fill: yellow;
    stroke: black;
    animation: SunUpDown 30s linear infinite;
    animation-play-state: paused;
}

@keyframes SunUpDown {
    0%,
    100% {}
    50% {
        transform: translateY(400px);
        fill: orange;
    }
}

/*==============================================================================*/
/*The Ground just pust fill*/
.Ground{
    fill:lightgreen;
    stroke:black;
}

/*===============================================================================*/
.Brids {
    animation: BirdOpacity 30s linear infinite;
    animation-play-state: paused;
}

@keyframes BirdOpacity {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
/*==============================================================================*/
/*THe Windmill*/
/*The Rect*/
.WindmillRect{
    fill:Peru;
    stroke:black;
    stroke-width:2px;
}
/*polygon*/
.RoofWindmill1{
    fill:Silver;
    stroke:DarkSlateGrey;
    stroke-width:1;
}
/*Cricle*/
.RoofWindmill2{
    fill:silver;
    stroke:black;
    stroke-width:2px;
}

/*Anumation to the 4 Fans To Rotate*/
.Fans {
    fill:Cornsilk;
    stroke:DarkSlateGrey;
    stroke-width:1;
    animation: FansRotate 10s linear infinite;
    animation-play-state: paused;
}

@keyframes FansRotate {
    to {
        transform: rotate(360deg);
    }
}

/*Rect*/
.Door1{
    fill:black;
    stroke:black;
    stroke-width:2; 
}
/*Cricle*/
.Door2{
    fill:silver;
    stroke:black;
}


.window {
    fill:white;
    stroke:black;
    stroke-width:2;
    animation: ChangeWindowColor 30s linear infinite;
    animation-play-state: paused;
}

@keyframes ChangeWindowColor {
    0%,
    100% {}
    50% {
        fill: yellow;
    }
}

.LinesOnWindow{
    stroke:black;
}

/*=========================================================================================*/
/*The cloud*/
.cloud {
    animation: MoveCloud 60s linear infinite;
    animation-play-state: paused;
}

@keyframes MoveCloud {
    0%,
    100% {}
    50% {
        transform: translateX(1200px);
    }
}

/*The plane*/
.PlaneWithItems {
    animation: MovePlane 20s linear infinite;
    animation-play-state: paused;
}

@keyframes MovePlane {
    to {
        transform: translateX(1700px);
    }
}

.PlaneLine{
    stroke:gray;
    stroke-width:3;
    stroke-linecap:round;
}

.PlaneRect {
     fill:white;
    stroke:black;
    stroke-width=:2;
    animation: ChangeColors 4s linear infinite;
     animation-play-state: paused;
}

@keyframes ChangeColors {
    0% {
        fill: yellow;
    }
    20% {
        fill: orange;
    }
    50% {
        fill: lightgreen;
    }
    80% {
        fill: lightblue;
    }
    100% {
        fill: pink;
    }
}
/*==============================================================================================*/
/*THE Sheep*/

.Body{
     STROKE-WIDTH:2;
    STROKE:black;
    fill:white;
}


.Legs{
     STROKE-WIDTH:2;
    STROKE:black;
    fill:white;
}

.head{
    stroke:black;
    fill:white;
}

.eyes{
    stroke:black;
    fill:white;
    stroke-width:1;
    animation:EyeChangeColor 6s ease infinite;
    animation-play-state: paused;
}

@keyframes EyeChangeColor{
    0%,100%{
        
    }
    50%{
        fill:lightgreen;
    }
} 
.eye1{
    fill:black;
}

.head2{
     stroke:black;
     fill:white;
}

.nose{
    fill:black;
}

.ear1,.ear2{
    stroke:black;
     fill:white;
}
.ear1{
    transform:rotate(-27.78deg) translateX(-120px) translateY(130px);
}
.ear2{
    transform:rotate(29.7449deg) translateX(53px) translateY(-167px);
}
/*=====================================================================*/
/*Three*/
.RectThree{
     stroke-width:2;
    stroke:black;
    fill:#7f3f00;
}

.PathThree{
     STROKE-WIDTH:2;
     STROKE:black;
     fill:#19e519;
}

.EllipseThree{
     STROKE-WIDTH:2;
     STROKE:black;
     fill:#c9680e;
}
.PathThree2{
     STROKE-WIDTH:2;
    STROKE:black;
    fill:#bc5f07;
}
/*=====================================================================*/
/*The button*/
.button:hover {
    /*Button*/
    cursor: pointer;
}

.button:hover>rect {
    fill: DimGray;
}

.button:active {
    transform: translateY(4px);
}


/*====================================================================*/

/*THe sound*/
.sound {
    fill:black;
    transform: translateY(30px);
    opacity: 0;
    animation: MoveSoundUp 5s linear infinite;
    animation-play-state: paused;
}

@keyframes MoveSoundUp {
    to {
        transform: translateY(-200px);
        opacity: 1;
    }
}

/*=====================================================================*/
/*The Flower*/
.LineFlower{
     transform:rotate(-6.46461deg) translateY(10px) translateX(-24px);
    STROKE-WIDTH:5;
    STROKE:#007f00;
    fill:none;
    
}


.folower {
     STROKE-WIDTH:1;
    STROKE:black;
    fill:#ff00ff;
    animation: FlowerChangeColor 5s ease infinite;
    animation-play-state: paused;
}

@keyframes FlowerChangeColor {
    0%,
    100% {}
    50% {
        fill: red;
    }
}

.Flower2{
     STROKE-WIDTH:2;
    STROKE:black;
    fill:#00bf00;
}


#Flower3 {
    transform: rotate(-88.5472deg) translateX(-320px) translateY(-97px);
}
/*==================================================================*/


/*THe Heart*/
.heart {
    fill: red;
    STROKE-WIDTH:2;
    STROKE:black;
    top: 5px;
    width: 50px;
    animation: pulse1 1s ease infinite;
    animation-play-state: paused;
}

@keyframes pulse1 {
    0% {
        transform: scale(1.2);
        fill: red;
    }
    50% {
        transform: scale(1.2315);
        fill: pink;
    }
    100% {
        transform: scale(1.2);
        fill: red;
    }
}



/*===========================================================================*/
/*The Sheep Thinks*/
.Thinks {
     STROKE-WIDTH:2;
    STROKE:black;
    FILL:white;
    opacity: 0;
    animation: ThinksOpacity 5s ease infinite;
     animation-play-state: paused;
}

.txt {
    opacity: 0;
    animation: ThinksOpacity 5s linear infinite;
    animation-play-state: paused;
}


@keyframes ThinksOpacity {
    to {
        opacity: 1;
    }