/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: orange;
  font-family: Georgia;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.icon {
  position:relative;
  width:45px;
}

.video {
  position:relative;
  width:250px;
  height:150px;
  padding-left:50px;
  padding-bottom:20px;
}

.right {
  right:0%;
}

.square {
  position: absolute;
  width:20%;
  top:20%;
  left:40%;
}

.squaretext {
  position: absolute;
  width:20%;
  top:30%;
  left:42%;

}


.right {
  text-align:right;
  position: absolute;
}

.cloud1  {
  width: 9%;
  position: absolute;
  animation-name: myAnimation;
  animation-duration: 240s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation {
  0%   {left:-100%; top:-30px;}
  100% {left:105%; top:-30px;}

}

.cloud2 {
  width: 9%;
  position: absolute;
  animation-name: myAnimation2;
  animation-duration: 180s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation2 {
  0%   {left:-55%; top:-20px;}
  100% {left:105%; top:-20px;}
}

.cloud3 {
  width: 9%;
  position: absolute;
  animation-name: myAnimation3;
  animation-duration: 120s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation3 {
  0%   {left:-10%; top:-30px;}
  100% {left:105%; top:-30px;}
}

.cloud4 {
  width: 9%;
  position: absolute;
  animation-name: myAnimation4;
  animation-duration: 120s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation4 {
  0%   {left:-35%; top:-25px;}
  100% {left:105%; top:-25px;}
}

.cloud5 {
  width: 9%;
  position: absolute;
  animation-name: myAnimation5;
  animation-duration: 190s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation5 {
  0%   {left:-10%; top:-33px;}
  100% {left:105%; top:-33px;}
}

.cloud6 {
  width: 9%;
  position: absolute;
  animation-name: myAnimation6;
  animation-duration: 90s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation6 {
  0%   {left:-10%; top:-28px;}
  100% {left:105%; top:-28px;}
}

.cloud7 {
  width: 9%;
  position: absolute;
  animation-name: myAnimation7;
  animation-duration: 240s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation7 {
  0%   {left:-55%; top:-35px;}
  100% {left:105%; top:-35px;}
}

.cloud8 {
  width: 9%;
  position: absolute;
  animation-name: myAnimation8;
  animation-duration: 160s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation8 {
  0%   {left:-25%; top:-25px;}
  100% {left:105%; top:-25px;}
}

.list {
  position: relative;
  left: 90%;
}

.fish {
  position: relative;
  left: 90%;
}

.foxindex {
  position: absolute;
  width:350px;
}

.dancinfox {
  position: absolute;
  left:80%;
  top:50%;
}

.cat {
  position: absolute;
  right:0%;
}

.rabbit {
  position: absolute;
  left: 90%;
}

.sun {
  position: absolute;
  left: 47%;
 }
 
 .foxies {
  position: absolute;
  width:5%;

 }
 
  .backimg {
  position: absolute;
  width:3%;
  top:4%;
  left:1%;
 }
 
 .backtext {
  position: absolute;
  font-size:20px;
  left:90px;
  text-align:left;
  top:0%;
  color:orange;
 }
 
 .forwardimg {
  position: absolute;
  width:3%;
  top:4%;
  right:1%;
 }
 
 .grape1 { position: absolute; left: 37%; bottom:30%; } .grape2 { position: absolute;  } .grape3 { position: absolute; bottom:0%; } .grape4 { position: absolute; left: 75%; } .grape5 { position: absolute; left: 75%; bottom:0%; }

 .grape6 { position: absolute; left: 25%; top:25%; width:250px } .grape7 { position: absolute; left: 25%; bottom:25%; width:250px } .grape8 { position: absolute; right: 25%; top:25%; width:250px } 
 .grape9 { position: absolute; right: 25%; bottom:25%; width:250px } .grape10 { position: absolute; left: 75%; bottom:0%; }
 
 .grape11 { position: absolute; left: 37%; bottom:30%; } .grape12 { position: absolute;  } .grape13 { position: absolute; bottom:0%; } .grape14 { position: absolute; left: 75%; } .grape15 { position: absolute; left: 75%; bottom:0%; }
 
 h1 { 
  position: relative;
  text-align:center;
}

.welcome {
  position: relative;
  text-align: right;
}


h2 {
  position: relative;
  left:8%;
}


.foxfront {
  position: absolute;
  top: auto;
  width:auto;
  height:20%;
}

.recipes {
  position: relative;
  width:125px;
}


.cube {
  position: relative;
}

.topwelcome1 {
  position: absolute;
  left: 39%;
  top:6%;
}

.topwelcome2 {
  position: absolute;
  left: 55%;
  top:6%;
}

.britney {
  position: relative;
  width:55px;
}

.foxpage {
  position: relative;
  width:350px;
}

.mountain {
  position: absolute;
  width:20%;
  top:10%;
  left:0%;
}

.mountain100 {
  position: absolute;
  width:20%;
  top:23%;
  left:63%;
}

.trees {
  position: absolute;
  width:20%;
  top:18%;
  left:15%;
}