/*button{
    cursor: pointer;
    border-radius: 150px;
    border: 5px palevioletred solid;
}*/
img{
    float: left;
    border: 5px palevioletred solid;
    transition: transform 0.7s ease, filter 0.25s ease-in-out, box-shadow 0.3s ease, border 0.3s ease-in-out,opacity 0.7s ease-in-out;
    display: block;
    margin: 20px auto;
    transform-style: preserve-3d;
    transform: translateY(40px) scale(0.98);
    opacity: 0;

}
img.reveal{
    opacity: 1;
    transform: translateY(0) scale(1);
}
p{
    color: palevioletred;
   font-family:Georgia, 'Times New Roman', Times, serif;
    border: 3px,white , dotted;
    text-align: center;
}
body{
   padding: 0px;
background-color: rgb(175, 246, 175);
color: black;
font-size: 20px;
}
img:hover{
    border: 5px palevioletred solid;
    border-radius: 50px;
    cursor: pointer;
    transform: perspective(800px) rotateY(8deg) rotateX(10deg) scale(1.05);
    filter: brightness(1.05) saturate(1.1);
    box-shadow: 0 26px 50px palevioletred;
    border-color: palevioletred;

}

body {
margin: 0;
padding: 0;
}

h1, p {
margin: 10px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
justify-content: center;
}
ul li a.active {
background-color: #04AA6D;
}

ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;

}

ul li a:hover {
background-color: #111111;
}
.dark-mode {
background-color: black;
color: white;
}

img{
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
display: block;
margin-left: 400px;
margin-top: 20px;
}

h1{
text-align: center;
}

.video{
justify-self: center;

}

button{
border: 3px solid navy;
border-radius: 15px;
padding: 5px;
background-color:aliceblue;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
  display: block; /* Required if the parent is not a flex container */
  margin: 50px auto;
  transition: box-shadow 0.25s,transform 0.3s ease, filter 0.25s ease-in-out, box-shadow 0.3s ease, border 0.3s ease-in-out, text-shadow 0.25s ease-in-out, background 0.25s ease-in-out;
  transform-style: preserve-3d;
}
button:hover{
background-color:chartreuse;
color: indigo;
box-shadow: 0 12px 20px palevioletred;
transform: translateY(-2px) rotate(-1deg) scale(1.03) perspective(600px) rotateX(8deg) rotateY(-4deg) translateY(-2px);
text-shadow: 0 5px 5px palevioletred;
}