/*Styling för sidan kontakt*/

/*Styling för formuläret.*/
.formulär {
    display: inline-block;
    margin: auto; /*Sätter marginalerna på auto.*/
    background-color: rgb(203, 228, 253); /*Bakgrundsfärg i formuläret.*/
    width: 400px; /*Bredden på formuläret.*/
    padding-top: 30px; /*Lite padding överst i formuläret.*/
    padding-bottom: 30px; /*Lite padding i botten av formuläret.*/
    margin-top: 40px; /*Marginal över formuläret.*/
    border: solid 2px rgb(2, 81, 160); /*Styling för formulärets ram.*/
    border-radius: 20px; /*Rundar hörnen på formuläret.*/
    box-shadow: 0 5px 10px; /*Lägger till en skugga på formuläret.*/
}

/*Styling för inputfälten.*/
#fname, #lname, #email, #message{
    width: 250px; /*Sätter bredden till 250px.*/
    padding: 7px; /*Ger fälten lite padding för att bli lite större och tydligare.*/
    border-radius: 7px; /*Ger hörnen på input fälten en rundning.*/
    border: solid 1px; /*Styling för kanten på input fälten.*/
    margin-top: 10px; /*Sätter lite marginal över fälten.*/
}

/*Gör inputfältet för meddelande större eftersom det oftast skrivs mer i den än i dem andra fälten.*/
#message {
    padding-bottom: 100px;
}

/*Styling för delen där man kan ladda upp ett längre meddelande.*/
#upload-file {
    margin-top: 10px;
    margin-left: 80px;
}

/*Styling för skicka-knappen i formuläret.*/
.button {
    width: 100px; /*Bredden för knappen.*/
    height: 30px; /*Höjden för knappen.*/
    background-color: dodgerblue; /*Färgen på knappen.*/
    border: none; /*Tar bort kanten på knappen.*/
    border-radius: 5px; /*Rundar hörnen på knappen.*/
    color: white; /*Gör texten vit.*/
    margin-top: 20px; /*Lägger till lite utrymme över knappen.*/
}

/*Styling för vad som händer vid hovring.*/
.button:hover {
    color: black; /*Texten blir svart istället för vit.*/
    cursor: pointer; /*Pekaren blir en hand för att tydliggöra för användaren att man ska klicka där.*/
    transition-duration: 0.4s; /*Gör så att förändring vid hovring tar 0.4s.*/
    box-shadow: 0 8px 16px; /*Ger knappen en skuggning vid hovring.*/
}

/*Styling för responsivitet för större skärmar. Vid större skärm blir formuläret större och texten 
större för att man ska se bättre. Även knappen blir större.*/
@media screen and (min-width: 1200px) {
    p {
        margin-bottom: 0;
    }

    .formulär {
        width: 500px;
        padding: 50px;
        font-size: 18px;
    }

    #fname, #lname, #email, #message{
        width: 300px;
        padding: 14px;
    }
    
    #message {
        padding-bottom: 150px;
        margin-bottom: 30px;
    }

    #upload-file {
        margin-left: 130px;
        font-size: 17px;
    }

    .button {
        width: 150px;
        height: 40px;
        font-size: 18px;
    }
}