.bounce {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
  
  @keyframes bounce {
    0%   { top: 0px; }
    50%  { top: 100px; }
    100% { top: 0px; }
  }

  .transform-hover {
    width: 100px;
    height: 100px;
    background-color: green;
    transition: transform 0.5s ease-in-out;
  }
  
  .transform-hover:hover {
    transform: rotate(45deg) scale(1.5);
  }

h1 { 
    color: #ff00e6 ;
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 600;
    font-style: normal;
}

p {
    line-height: 150%;
    font-weight: 20%;
}

* { 
    color: antiquewhite;
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 100%;
    font-style: normal;
}

body {
        background-color: #2b1a04;
}

#McKennaSaltonBio {
    font-size: .8em;
    width: 900px;
    height: 150px;
    } 

a:link { color: rgb(161, 222, 255); }
* {padding: .2%;}

a:visited { color: blue;}
a:hover { color: chartreuse;}

footer { 
        text-decoration: blink;
        text-transform: uppercase;
        color: #ff00e6;
    }

#wrapper {
    width: 80%;
    margin: auto;
    }

    .column {
        width: 33.33%;
        float: left;
        margin: 10%;
        }

        @media only screen and (max-width: 480px) {
            .column {
            width: 100%;
            float: left;
            margin: 0%
            }}


  
            body {
              font-family: 'Special Gothic Expanded One', sans-serif;
              padding-top: 20px;
            }
        
            header {
              text-align: center;
              margin-bottom: 40px;
            }
        
            img {
              max-width: 100%;
              border-radius: 8px;
            }
        
            footer {
              margin-top: 40px;
              text-align: center;
              padding: 20px 0;
              border-top: 1px solid #ddd;
            }
        
            nav ul {
              list-style-type: none;
              padding: 0;
            }
        
            nav li {
              margin: 10px 0;
            }
        
            nav a {
              text-decoration: none;
              color: #2b2b2b;
            }
        
            nav a:hover {
              text-decoration: underline;
            }

.fade-in {
  animation: fadeIn 1.5s ease-in forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}


nav a {
  color: rgb(161, 222, 255);
  text-decoration: none;
  transition: color 0.3s ease;
}

nav a:hover {
  color: chartreuse;
  text-decoration: underline;
}

.hover-zoom {
  transition: transform 0.4s ease-in-out;
}

.hover-zoom:hover {
  transform: scale(1.05);
}


body {
  transition: background-color 0.5s ease;
}