/* ---------- General ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:16px;
}

body{
    min-height:100vh;

    display:flex;
    flex-direction:column;

    background-image:url("indexbackground.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    font-family:Arial, Helvetica, sans-serif;
    color:white;
}

/* ---------- Main content ---------- */

.wrapper{
    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    width:min(90%,700px);

    margin:auto;
    padding:3rem 1rem;
}

/* ---------- Logo ---------- */

#indexlogo{
    margin-bottom:2rem;
}

#indexlogo img{
    width:clamp(180px, 35vw, 420px);
    height:auto;
}

/* ---------- Headings ---------- */

h2{
    font-size:clamp(1.5rem, 2vw + 1rem, 3rem);
    margin-bottom:1.5rem;
    text-align:center;
}

/* ---------- Text ---------- */

p{
    text-align:center;
    font-size:clamp(1rem, 0.7vw + 0.9rem, 1.4rem);
    line-height:1.5;
    margin:.3rem 0;
}

a{
    color:white;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

/* ---------- Social Media ---------- */

.socialmediawrapper{
    display:flex;
    justify-content:center;
    gap:1.5rem;
    margin-top:2rem;
}

.socialmediaicon{
    width:clamp(40px, 6vw, 70px);
    height:auto;
    transition:transform .2s;
}

.socialmediaicon:hover{
    transform:scale(1.1);
}

/* ---------- Footer ---------- */

.infopanel{
    width:100%;
    background:rgb(31,31,31);
    padding:2rem;
    text-align:center;
    font-size:clamp(.9rem, .5vw + .8rem, 1.2rem);
}

/* ---------- Mobile ---------- */

@media (max-width:600px){

    .wrapper{
        padding:2rem 1rem;
    }

    .socialmediawrapper{
        gap:1rem;
    }

}