*,
*:before,
*:after {
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-size: 100%;
  font-weight: normal;
  background-color: transparent;
}

a:link {color: black; text-decoration: none;}
a:visited {color: black; text-decoration: none;}
a:hover {color: black; text-decoration: none;}
a:active {color: black; text-decoration: none;}

.home {
  cursor: pointer;
  padding: 15px;
  font-size: 40px;
}

.snowman {
	position: absolute;
	transform: translate(50%, 30%);
	width: 500px;
	height: 500px;
}

.head {
	z-index: 2;
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-image:linear-gradient(90deg, snow, Gainsboro);
}

.head:hover {
	background-image:linear-gradient(90deg, white, white);
}

.eyeleft {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: black;
}

.eyeright {
	position: absolute;
	top: 100px;
	left: 200px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: black;
}

.nose {
	position: absolute;
	top: 130px;
	left: 150px;
	width: 100px;
	height: 30px;
	border-bottom-right-radius: 50%;
	border-top-left-radius: 50%;
	background-image: linear-gradient(90deg, DarkOrange, Coral);
}

.body {
	z-index: 1;
	position: absolute;
	top: 250px;
	left: -90px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background-image:linear-gradient(90deg, snow, Gainsboro);
}

.body:hover {
	background-image:linear-gradient(90deg, white, white);
}

.button1 {
	position: absolute;
	top: 250px;
	left: 45%;
	width: 50px;
	height: 50px;
	border: 10px double DarkRed;
	border-radius: 50%;
	background-color: red;
}

.button1:hover {
	border: 10px double Gold;
	background-color: yellow;
}

.button2 {
	position: absolute;
	top: 250px;
	left: 45%;
	top: 100px;
	width: 50px;
	height: 50px;
	border: 10px double DarkGreen;
	border-radius: 50%;
	background-color: green;
}

.button2:hover {
	border: 10px double navy;
	background-color: blue;
}

.marquee{
	position: fixed;
	padding: 10px;
	font-family: "Helvetica Nueu", Helvetica, Arial, san-serif;
	overflow: hidden;
	background-color: transparent;
}

.marquee p:after {
  content:"";
  white-space:nowrap;
  padding-right:50px;
}

.marquee p {
  margin:0;
  padding-left:600px;
  display:inline-block;
  white-space:nowrap;
    -webkit-animation-name:marquee;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:marquee;
    -moz-animation-timing-function:linear;
    -moz-animation-duration:10s;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:marquee;
    -ms-animation-timing-function:linear;
    -ms-animation-duration:10s;
    -ms-animation-iteration-count:infinite;
    -o-animation-name:marquee;
    -o-animation-timing-function:linear;
    -o-animation-duration:10s;
    -o-animation-iteration-count:infinite;
    animation-name:marquee;
    animation-timing-function:linear;
    animation-duration:10s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}