body{
     background-image:url("../../images/flower.jpg");
     background-size:cover;
     background-repeat: no-repeat; 
     background-position:center;
     background-attachment: fixed; 
     font-size:large;
   }

.box2{
        width:100%;
        height:400px;
        margin-bottom:20px;
}
  /* Make the image fully responsive */
  .carousel-inner img{
    width: 100%;
    height: 100%; 
  }

.imoji{
        font-size:24px; 
        color:white;
        text-shadow:2px 2px 4px #000000;
        margin:1px;
}

.imoji2{
        font-size:36px; 
        color:white;
        text-shadow:2px 2px 3px green;
        margin:10px;
}


.img1{ 
        width: 100%;
        height:300px;   /* must be px not be em */
        border-radius:5px 5px 0 0;
}

.img2{
   width:30%;
   height:100px;
   border-radius:50%;
   margin-left:10%;
}

.img3{
   width:100%;
   height:270px;
}
  
.img5{   
   width:100%;
   height:450px;
   box-shadow: 8px 8px 10px 0 #888899; 
   margin-bottom:30px;
}

#navcolor{
        color:white;
}

.box1{
   background-color:white;     
   border:1px solid lightgrey;
   border-radius:5px;
   /* box-shadow: 8px 8px 10px 0 #888899; */
   margin-bottom:30px;
}

#demo, #demo2, #demo3{
   width:100%;
   border:1px solid lightgrey;
   border-radius:5px;
   box-shadow: 8px 8px 10px 0 #888899; 
   margin-bottom:30px;
}

#t1{
   background-color:rgba(200,200,200,0.1);
   font-style: oblique 12deg;
   color:purple;
}

#t11{
   font-family: fantasy;
   color:white;
   text-shadow: 2px 2px 3px purple, -2px 2px 3px purple, 2px -2px 3px purple, -2px -2px 3px purple;
}

h4{
   text-shadow: 2px 2px 1px navy, -2px 2px 1px navy, 2px -2px 1px navy, -2px -2px 1px purple;
}

.box5{
        position:relative;
}


.text-block {
   position: absolute;
   bottom: 80px;
   left:20px;
   right:20px; 
   background-color: rgba(150,150,150,0.6);
   color: white;
   font-size:x-large;
   font-weight:bold;
   padding-left: 40px;
   padding-right: 20px;
}

h3{
        padding:15px 20px 0 20px;
}

 p{
        padding:15px 20px 30px 20px;
}

 span{
        color:blue;  
        padding-left:15px;
}

#line2{
    width:100%;
    height:60px;
    background-color:rgba(200,200,230,0.4);
    margin-bottom:20px;
}

button{
        margin:10px;
}

#t1:hover, .t2:hover{
  background-color:white;
}

#com1{
   margin-top:30px;
   text-align:center;
}

#crane:hover{
transform:rotateY(180deg);
}

#dragon:hover{
transform:rotateY(180deg);
}

#dinosaur:hover{
transform:rotateY(180deg);
}