h1,
h2,
h3 {
    color: #f76c6c;
    font-family: "effra-cc-variable", Helvetica, sans-serif;
    font-variation-settings: "wght" 800;
}

.start {
    background-image: url(../bilder/bakgrundlc.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}

.display-name {
    margin-top: -20%;
    position: relative;
    width: 100%;
    height: 100%;
    user-select: none;
}

.fore {
    font-size: 20vw;
    position: absolute;
    top: 20%;
    left: -1%;
    left: -50vw;
    animation: slideInLeft 1.5s ease forwards;
}

.last {
    font-size: 20vw;
    position: absolute;
    top: 40%;
    left: 43%;
    clip-path: inset(0 10vw 0 0);
    left: 100vw;
    animation: slideInRight 1.5s ease forwards;
}

.info {
    margin: 50vh 5% 0 5%;
    width: 90%;
}

.square {
    position: absolute;
    top: calc(17.5vw * 2.5);
    left: 1vw;
    width: 38vw;

    padding: 2vw;
    color: #f7f7f7;
    border-radius: 10px;
}

.square h4 {
    color: #f7f7f7;
    padding: 0;
    margin: 0;
    font-family: "effra-cc-variable", Helvetica, sans-serif;
    font-variation-settings: "wght" 800;
    font-size: 3vw;
}

.square p {
    font-size: 1.7vw;

}

.buttons ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li a {
    text-decoration: none;
    color: #f7f7f7;
}

.buttons li {
    margin: 0 1%;
    padding: 1% 2%;
    border: 2px solid #f7f7f7;
    border-radius: 10px;
    background-color: transparent;
    transition: transform 0.3s ease;
}

.buttons li:hover {
    transform: scale(1.05);
}

.buttons li.btn1,
.buttons li.btn2,
.buttons li.btn3 {
    color: #f7f7f7;
    font-family: Arial, sans-serif;
    font-size: 1em;
    cursor: pointer;
}

/* Animationer */
@keyframes slideInLeft {
    from {
        left: -9vw;
    }

    to {
        left: -1%;
    }
}

@keyframes slideInRight {
    from {
        left: 50vw;
    }

    to {
        left: 43%;
    }
}