/* Tags and Elements defined below */


body {
    max-width: 1100px;
    margin:auto; /* center page on screen */
    padding: 20px;
    background-color:rgb(227, 199, 242);
    background-image: url('images/abstract-photo.jpg');
}

/* for Responsive Website Design */
img {
    max-width:100%;
    height:auto;
    /*display: block;*/
}

figure {
    width: 320px;
    display: inline-block;
    margin: 15px;
    text-align: center;
}

/* if Tahoma font not found, use Geneva */
p {
    font-size:14px;
    font-family:Tahoma, Geneva
}


header {
    background-color:#369;
    background-image:url('images/banner3.jpg');
    padding-top: 25%; 
    background-size: 100%;

 }

aside {
    width:25%;
    margin: auto;
    float:left;
        text-align:right; padding:14px;
        box-sizing:border-box;
    }


section {
    text-align: center;
    width: 320px;
    padding:14px; 
    box-sizing:border-box;
    display: inline-block;
}


nav {
    overflow: hidden;
    text-align:left; 
    padding:12px; 
    background-color:rgb(218, 151, 237);
    overflow: hidden;
} 


nav a { 
    display: block;
    width: 30%;
    text-decoration: none;
}

/* display:block = top to bottom */

nav li {
    list-style:none
}

nav li a {
    border:6px;
    padding:6px;
}

nav li a:hover {
    border: 2px solid #AAA;
}

@media only screen and (min-width:640px){
nav a {display:inline}
/* display:inline = left to right */
nav li {display:inline; padding:0 18px}
}

.navbar ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.navbar a{
    color: rgb(2, 0, 128);
    text-decoration: none;
    padding: 15px;
    text-align: center;
}

.navbar a:hover{
    background-color:rgb(166, 226, 246);

}

.navbar li{
    float: left;
}

.navbar ul li.selected a {
    color:rgb(135, 56, 117); 
    background-color:rgb(242, 232, 159);
}

main {
    color:rgb(125, 0, 153); 
    background-color:rgb(193, 218, 235); 
    padding: 14px;
    
 }
    
footer {
    text-align: left;
    color:#FFF; 
    background-color:rgb(218, 151, 237); 
    font-size:12px; height:80px; 
}

blockquote {
    text-align:justify;
}


blockquote:first-letter {
    font-size:1.8em;
    font-weight:bold;
}

h1 {
    color:rgb(145, 5, 252);
}

h2 {
    color:rgb(125, 0, 153);
}

th {
    background-color: lightgoldenrodyellow;
    text-align: center;
}

table {
        border:4px solid #003399; 
    border-collapse:collapse;
    margin-left: auto;
    margin-right: auto;
}


td {
    border: 1px solid #0088dd;
     padding: 15px;
    } 



/*ID's*/
 #wrapper {
    margin:0 auto; 
    background-color: #FFF; 
    border: 4px #009 solid
} 

 #portafolio {
    color:rgb(29, 69, 90); 
    background-color:rgb(225, 168, 235)
}

#timeButton {
    background-color: yellow;
}

#quoteButton {
    background-color: rgb(238, 181, 238);
}

 /*Classes*/
.highlight {
    background-color:rgb(225, 168, 235)
}
.disclaimer {
    color:rgb(108, 22, 22)
}
.center{
    text-align:center
}

.box {
    border: 4px rgb(223, 229, 55) solid;
}

.infobar {
    /*display:inline;*/
    background-color:rgb(62, 103, 62);
    color:#fff;
    padding: 4px;
}

.btn {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
} 
 
.btn:hover .btn-slide-show-text1 {
  margin-left: 65px;
} 
 
.btn-rect-to-round {
  height: 55px;
  width: 800px;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  transition: 0.5s ease-in;
} 
 
.btn-rect-to-round:hover {
  border-radius: 60px;
  color: rgb(255, 255, 255) !important;
} 
 
.btn-rect-to-round--pink {
  border: 2px solid rgb(242, 232, 159);
  color:rgb(242, 232, 159) !important;
} 
 
.btn-rect-to-round--pink:hover {
  border-color:rgb(242, 232, 159);
  background:rgb(242, 232, 159);
} 

.required {
    font-weight: bold;
    color: red;
}
 
/*.navbar class is under nav tag*/

/*for javascript animation*/
.container {
    width: 200px;
    height: 200px;
    position: relative;
    border: 2px solid #333;
    overflow: hidden; /* Keeps the ball inside the container visual area */
}

.ball {
    width: 50px;
    height: 50px;
    background-color: rgb(238, 240, 138);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Apply the animation */
    animation: bounce 2s infinite ease-out;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0) scale(1, 1);
    }
    50% {
        transform: translateY(-150px) scale(1, 1); /* Adjust height of bounce */
    }
    75% {
        transform: translateY(0) scale(1.1, 0.9); /* Squish on impact */
    }
}