/* Fontstil och border-box */
* {
    box-sizing: border-box;
    font-family: sans-serif;
}

/* responsiv bakgrundsbild */
body {
    margin: 0;
    padding: 0;
    background-image: url(Darkplain.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

}

/* Navigation bar stil, placering och animation */
.navbar {
    background-color: yellow;
    align-items: center;
    display: flex;
    justify-content: space-between;
    color: rgb(0, 0, 0);
    opacity: 1;
    animation: appear 0s 0.5s ease-out forwards;
}

/* Logotype*/
.brand-title {
    font-size: 1.5rem;
    margin: .5rem;
}

/* Navigationsbar ta bort margin, padding */
.navbar-links ul {
    margin: 0;
    padding: 0;
    display: flex;
}

/* Ta bort prickar för listor */
.navbar-links li {
    list-style: none;
}

/* Modifiering länkar */
.navbar-links li a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    padding: 1rem;
    display: block;
}

/* Stil vid hover på länkar */
.navbar-links li a:hover {
    background-color: rgb(156, 156, 94);
    color: black;
}

/* Hamburger menu knapp*/
.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 25px;
}

/* Hamburger stil */
.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
}

/* Mobilanpassad navbar vid 600px */
@media (max-width: 600px) {
    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links li {
        text-align: center;
    }

    .navbar-links li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }

    .container-1 {
        flex-direction: column;
    }

}



.container-1 {
    display: flex;
    color: white;
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.container-1 a {
    text-decoration: none;
    color: yellow;
}

.container-1 a:hover {
    text-decoration: none;

}

.container-1 img {
    max-height: 60vh;
    height: auto;
    width: 100%;
    animation: appear 2s ease-in;
}

.container-1 img:hover {
    transform: scale(1.05);
    transition: transform .5s ease;
}


.container-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    width: 100%;
    background-color: rgb(0, 0, 0);

}

.container-2 .schema {
    margin: 2%;
    transition: transform .5s ease;
    cursor: pointer;
}

.container-2 .schema:hover {
    transform: scale(1.05);

}

.container-2 .galleri {
    margin: 2%;
    transition: transform .5s ease;
    cursor: pointer;
}

.container-2 .galleri:hover {
    transform: scale(1.05);
}

.container-2 .form {
    margin: 2%;
    transition: transform .5s ease;
    cursor: pointer;
}

.container-2 .form:hover {
    transform: scale(1.05);

}

.container-2 .animation {
    margin: 2%;
    transition: transform .5s ease;
    cursor: pointer;
}

.container-2 .animation:hover {
    transform: scale(1.05);

}

h2 {
    color: black;
    background-color: yellow;
}

h3 {
    margin: 0;
    padding: 0;
}

/* h4 animation */
h4 {
    font-size: 1rem;
    margin: 0.2rem;
    float: left;
    white-space: nowrap;
    color: white;
    opacity: 0;
    animation: appear-2 1s 4.5s ease-out forwards;
}


/* Text animation */
.textappear-1 {
    color: yellow;
    opacity: 0;
    animation: appear 1s 2s ease-out forwards;
}

.textappear-2 {
    color: rgb(255, 255, 255);
    opacity: 0;
    animation: appear 1s 3s ease-out forwards;
}

.textappear-3 {
    color: rgb(255, 255, 255);
    opacity: 0;
    animation: appear 1s 4.6s ease-out forwards;
}

.textappear-4 {
    color: rgb(255, 255, 255);
    opacity: 0;
    animation: appear 1s 4.8s ease-out forwards;
}

.textappear-5 {
    color: rgb(255, 255, 255);
    opacity: 0;
    animation: appear 2s 5s ease-out forwards;
}

.textappear-5:hover {
    transform: scale(1.2);
    transition: transform .5s ease;
}

.textappear-6 {
    color: rgb(255, 255, 255);
    opacity: 0;
    animation: appear 1s 5.2s ease-out forwards;
}

.textappear-7 {
    color: rgb(255, 255, 255);
    opacity: 0;
    animation: appear 1s 5.4s ease-out forwards;
}

.textappear-8 {
    position: relative;
    color: rgb(255, 255, 255);
    opacity: 0;
    animation: appear 3s 5.5s ease-out forwards;
}

.textappear-9 {
    position: relative;
    cursor: pointer;
    color: yellow;
    opacity: 0;
    animation: appear-2 3s 5.8s ease-out forwards;
}

/* Animation 1 */
@keyframes appear {
    0% {
        left: -10%;
        opacity: 0;
    }

    100% {
        opacity: 1;
        left: 0%
    }
}

/* Animation 2 */
@keyframes appear-2 {
    0% {
        top: -10%;
        opacity: 0;
    }

    100% {
        opacity: 1;
        top: 0%;

    }
}