body{
    background-color: rgb(153, 153, 153);
    background-image: url("../img/Back.png");
    align-items: center;
}

.content{
    display: flex;
    width: 1280px;
}

.content_container{
    width: 1280px;
    margin: 0 auto;
    display: grid;
    row-gap: 16px ;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

#nav {
    background-color: #C4C4C4;
    width: 240px;
    height: fit-content;
    box-shadow: 6px 6px #333333;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.text_button {
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    width: 220px;
    height: 25px;
    padding: 5px;
    
}

.shake_text:hover {
    display: inline-block;
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

a{
    text-decoration: none;
}

a:hover{
    color: #005507;
}

.main{
    background-color: #C4C4C4;
    width: auto;
    height: fit-content;
    font-family: "Electrolize", sans-serif;
    font-size: 28px;
    margin-left: 15px;
    box-shadow: 6px 6px #333333;
    padding: 15px;
}

#logo{
    background-color: #BCB076;
    padding: 4px;
    box-shadow: 6px 6px #333333;
    grid-row: 1 / 2
}

.flex{
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    flex-shrink: 1;
}

ul, ol {
  margin: 0;
  padding: 5px;
}

li{
    list-style: none;
}

aside{
    display: flex;
    flex-direction: column;
    gap: 15px
}

.funny_buttons{
    margin: 5px;
    font-family: "Comic Sans MS" ;
    justify-self: center ; 
    background: linear-gradient(to left, 
    #ff0000, 
    #ff7f00, 
    #ffff00, 
    #00ff00, 
    #0000ff, 
    #4b0082, 
    #8b00ff, 
    #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;
    animation: rainbow-animation 4s linear infinite;
    grid-column: 1 / -1;
    grid-row: 1;           
}

@keyframes rainbow-animation {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

.buttons{
    display: grid;
    background-color: #C4C4C4;
    width: 240px;
    height: fit-content;
    box-shadow: 6px 6px #333333;
    padding: 5px;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 5px;
}

.carry{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #C4C4C4;
    width: 240px;
    height: fit-content;
    box-shadow: 6px 6px #333333;
    padding: 5px;
}

#guestbook{
    width: 550px;
    height: 550px;
}

.hobby_container{
    display: grid;
    height: auto;
    width: auto;
    grid-template-columns: repeat(2, 500px);
    gap: 15px;
}

.hobby_buttons{
    background-color: #808080;
    box-shadow: 6px 6px #333333;
}

.shake_buttons:hover {
    display: inline-block;
    animation: shake_button 0.75s infinite;
}

@keyframes shake_button {
    20% { transform: rotate(0deg); }
    40% { transform: rotate(-1deg); }
    60% { transform: rotate(0deg); }
    80% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

p{
    margin: 5px;
}