body, h1, p, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

header {
    background-color: #343a40;
    color: white;
    padding: 100px 0;
    text-align: center;
}

.header-content {
    max-width: 800px;
    margin: 0 auto;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

header p {
    font-size: 1.2rem;
    opacity: 0.8;
}

.navbar-nav {
    margin-left: auto;
}

.ml-auto {
    position: relative;
}

.loggedin {
    position: absolute;
    right: 266px; 
}

.navbar-nav {
    margin-right: 20px;
}

.navbar-toggler {
    margin-left: auto;
}


nav {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 10px 0;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-size: 1.2rem;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.animated {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.fadeInUp {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); 
}

 /* Animaatioelementin tyylit */
 .animated-icon {
    position: fixed;
    top: 20px; /* Sijoita yläkulmaan */
    right: 1838px; /* Sijoita oikeaan yläkulmaan */
    font-size: 48px; /* Suurempi koko */
    color: #ff5733; /* Väri */
    animation: bounce 1s ease-in-out infinite; /* Käynnistä animaatio */
    cursor: pointer; /* Lisää hiiren kursorille käden osoitin */
}

/* Pomppiva animaatio */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); } /* Animaation korkein kohta */
}