@charset "UTF-8";

body {
	background-color: #101010;
	background-image: url("moonlight-1226253.jpg");
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
 	background-size: cover; /* Resize the background image to cover the entire container */
}




/* menu */
	#dock-container {
	      position: fixed;
	      bottom: 0;
	      text-align: center;
	      right: 30%;
	      left: 30%;
	      width: 40%;
	      background: rgba(255,255,255,0.2);
	      border-radius: 12px 12px 0 0;
	  }
	  #dock-container li {
	      list-style-type: none;
	      display: inline-block;
	      position: relative;
	  }
	

#dock-container li img {
          width: 64px;
          height: 64px;
          -webkit-box-reflect: below 2px
                    -webkit-gradient(linear, left top, left bottom, from(transparent),
                    color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
          -webkit-transition: all 0.3s;
          -transition: all 0.3s;
          -webkit-transform-origin: 50% 100%;
          -transform-origin: 50% 100%;
        }
    
#dock-container li span {
            display: none;
            position: absolute;
            bottom: 140px;
            left: 0;
            width: 100%;
            background-color: rgba(0,0,0,0.75);
            padding: 4px 0;
            border-radius: 12px;
        }
#dock-container li:hover span {
    display: block;
    background-color:transparent;
    color: #903030;
}
#dock-container li:hover img {
        transform: scale(1.6);
        background-color: rgba(255,48,48,0.1);
        box-shadow: 0 0 10px rgba(255,48,48,0.7);
    }
    
#content-container {
	      position: fixed;
	      bottom: 40px;
	      text-align: left;
	      right: 10px;
	      left: 5%;
	      top: 40px;
	      width: 100%;
	      height: 100%;
	      visibility: hidden;
	
}
    
#content-container iframe {
	margin-top: 20px;
	margin-bottom: 20px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 4px 4px 14px #000;
	-webkit-box-shadow: 4px 4px 14px #000;
	box-shadow: 4px 4px 14px #000;
	-moz-transform:rotate(-5deg);
	-webkit-transform:rotate(-5deg);
	-o-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.05);
	
	border-top: none;
    border-right: none;
    border-left: #903030 1px dotted;
    border-bottom: #903030 2px solid;
    
    width: 80%;
    height: 75%;
    
}