/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}


body {
	background:#f5dcbc;
}


#container {
	width: 1000px;
    margin: auto;
    position: relative;
}




div#yin-yang {
      width: 96px;
      box-sizing: content-box;
      height: 48px;
      background: #eee;
      border-color: black;
      border-style: solid;
      border-width: 2px 2px 50px 2px;
      border-radius: 100%;
      position: relative;
    transition: all 2s;
    }
    #yin-yang:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: #eee;
      border: 18px solid black;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }
    #yin-yang:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: black;
      border: 18px solid #eee;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }

div#yin-yang:hover{
    transform: rotate(90deg) translate(50px, -50px) scale(0.5);
}





div#moon{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 15px 15px 0 0 yellow;
    position: absolute;
    right: 100px;
    transition: all 3s;
}

div#moon:hover{
    width: 100px;
    height: 100px; 
    transform: scale(2) rotate(540deg);
}





div#club{
    position: absolute;
    top: 500px;
    left: 500px;
    color: green;
    transform: scale(3);
    transition: all 2s;
}

div#club:hover{
    transform: scale(15);
    color: darkslateblue;
}




div#mountain{
    position: absolute;
    right: 200px;
    top: 570px;
    transform: scale(5);
    transition: all 2s;
    text-shadow: 2px 2px 5px #34383b;
}

div#mountain:hover {
    transform: scale(10) skewX(20deg) skewY(10deg);
}



div#heart{
    position: absolute;
    right: 400px;
    top: 150px;
    transform: scale(15);
    color: #b5000c;
    transition: all 2s;
}

div#heart:hover {
    transform: scale(3);
    right: 300px;
    top: 300px;
    text-shadow: 4px 4px 10px orange;
}



div#horse{
    position: absolute;
    transform: scale(10);
    left: 100px;
    top: 500px;
    
    transition: all 2s;
}

div#horse:hover{
    transform: scale(-10) rotate(180deg);
    color: #e37419;
}



div#squares{
    position: absolute;
    left: 275px;
    top: 275px;
    transform: scale(5);
    color: orchid;
    text-shadow: 15px 15px orchid, -15px -15px orchid, 15px -15px orchid, -15px 15px orchid;
    transition: all 5s
    
}

div#squares:hover{
    transform: translateX(-20px) translateY(-20px) scale(6) rotate(45deg);
    text-shadow: 10px 10px orchid, -10px -10px orchid;
}

div#phone{
    position: absolute;
    right: 0px;
    top: 450px;
    font-size: 50px;
}
#phone span {display: none;
    }

/*@keyframes bubble {
  from {transform: scale(1);}
  to {transform: scale(1.5);}
}*/

div#phone:hover span{
    display: block;
    position: relative;
    top: -60px;
    right: -35px;}
    /*animation-name: bubble;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}*/


div#circle{
    position: absolute;
    left:300px;
    top: 600px;
    width:50px;
    height:50px;
    border-radius:50%;
    background: #8c86e3;
    transition: all 3s;
}


div#circle:hover{
  width: 200px; 
  aspect-ratio: 1;
  background: #F8CA00;
  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))));
}



div#fun{
    position: absolute;
    left: 700px;
    top: 400px;
    transform: scale(5);
    color: olivedrab;
    text-shadow: 15px 15px olivedrab, -15px -15px olivedrab;
    transition: all 5s
    
}

div#fun:hover{
    transform: translateX(20px) translateY(20px) scale(6) rotate(90deg);
    text-shadow: 10px 10px orange, -10px -10px orchid;
}