body{
    margin: 0px 0px;
    background-color: var(--background);
}

/* --------------------Content-------------------- */
.content{
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.col{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-items: center;
}

.left{
    margin-right: 1rem;
}

.right{
    margin-left: 1rem;
}

.content .col img{
    max-width: 100%;
    border-radius: 15px;
    min-width: 50%;
}

.content p{
    font-size: clamp(1.2rem, 1rem + 1VW, 1.8rem);
}






/* --------------------Hero-------------------- */
#heading{
    display: flex;
    flex-direction: column;
    padding: 2rem;
    min-height: 40vh;
    align-items: flex-start;
    text-align: left;
    justify-content: center;
    background-image: url(/img/WSP.svg);
    background-repeat: no-repeat;
    background-position: horizontal vertical;
    background-position: 100% 100%;
    background-size: auto 120%;
    margin-top: 100px;
}
#heading h1{
    color: var(--socialistRed);
    font-family: var(--ff-main);
    font-size: clamp(6rem, 1rem + 8VW, 12rem);
    margin: 0px;
    font-style: bold;
    font-weight: 800;
    text-shadow: 3px 3px var(--accent);
}
#heading h2{
    color: var(--accent);
    font-family: var(--ff-second);
    font-size: clamp(1rem, 1rem + 6VW, 5rem);
    margin: 0px;
}

#heading button{
    font-size: clamp(2.5rem, 1rem + 2VW, 4rem);
    margin-top: 4rem;
}
















/* --------------------About-------------------- */
#about{
    background-color: var(--accent);
}

/* #about img{
    height: 10%;
} */

#about h1{
    margin: 0;
    font-size: clamp(4rem, 1rem + 5VW, 10rem);
    text-align: right;
}

#about p{
    margin: 0;
    color: var(--text-light);
    text-align: right;
}

#about button{
    font-size: clamp(2.5rem, 1rem + 1VW, 4rem);
    margin-top: 30px;
    box-shadow: none;
    border-color: var(--socialistRed);
}






/* --------------------WWD-------------------- */
#WWD{
    background-image: url(/img/line.svg);
    background-repeat: no-repeat;
    background-position: horizontal vertical;
    background-position: -20% 20%;
    background-size: auto 120%;
}
#WWD h1{
    text-align: right;
    font-size: 15rem;
    /* font-size: clamp(6rem, 2rem + 8VW, 16rem); */
    margin: 0;
    text-shadow: 3px 3px var(--accent);
    line-height: 0.8;
}
#WWD button{
    font-size: clamp(2.5rem, 1rem + 1VW, 4rem);
    margin-top: 30px;
}

#go-text{
    border: 2px solid var(--accent);
    background-color: var(--secondary-button);
    box-shadow: 5px 5px var(--accent);
}

#go-text p{
    margin: 2rem;
}
#go-text button{
    margin: 2rem;
}







/* --------------------Media querys-------------------- */
@media screen and (max-width: 1500px) {}

@media screen and (max-width: 1300px) {
    

    .content{
        flex-direction: column;
    }
    .col{
        margin-bottom: 2rem;
        width: 100%;
    }
    .left{
        margin-right: 0;;
    }
    .right{
        margin-left: 0;
    }

    #heading{
        /* background-position: horizontal vertical; */
        background-position: 100% 100%;
        background-size: auto 100%;
    }
    #WWD .col h1{
        text-align: center;
        line-height: 1;
        font-size: 8rem;
    }

}

@media screen and (max-width: 1000px) {
    #heading{
        /* background-position: horizontal vertical; */
        background-position: 50% 100%;
        background-size: auto 70%;
    }
}

@media screen and (max-width: 800px) {}