:root {
    --mainfont: 'Roboto', sans-serif;
    --blue:#4C6A72;
    --grey:#F1F1F2;
    --darkgrey:#808181;
    
    }

html {
   width: 100%;
    height: 100%;
    overflow-x: none;
}

html {
 box-sizing: border-box;
}
html:focus-within {
 scroll-behavior: smooth;
}
*,
*::before,
*::after {
 box-sizing: inherit;
}

html {
    box-sizing: border-box;
   }
   html:focus-within {
    scroll-behavior: smooth;
   }
   *,
   *::before,
   *::after {
    box-sizing: inherit;
   }

body {

   width: 100%;
    height: 100%;
    overflow-x: hidden;
}

header {
    
    overflow: hidden;
    background-color: var(--grey); 
    font-family: var(--mainfont);
}

.navlogo {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 40px;
}

.navtext{
    display: flex;
    flex-direction: row;
    gap: 30px;
    list-style: none
    
    
    
}

body {
    height: 100%;
    background-color: #ffffff;
    width: 100%;
    margin:0;


}

p {
    font-family: var(--mainfont);
}


header img {
   width: 100px;
   margin-top: 20px;
}

form {
    height: 100%;
    overflow-x: none;

}


.form {
    overflow-x: hidden;
    gap:10px;
    display:grid;
    grid-template-areas:
    "contactus contactus"
    "firstname lastname"
    "email email"
    "message message"
    "submit submit";
    
    grid-template-columns: 1fr 1fr;
    grid-template-rows:  1fr;
    
    border: solid 1px black;
    
    
    border-radius: 10px;
    margin:15px;
    padding: 20px;
    width: auto;
    
    
    

}

.lastname {
    grid-area:lastname;
    
    border-radius: 5px;
    border: 1px solid black;
    
}

.firstname {
    grid-area:firstname;
    
    border-radius: 5px;
    border: 1px solid black;
    

}

.email {
    grid-area:email;
   
    border-radius: 2px;
    border: 1px solid black;
    
}

.contactus{
    grid-area:contactus;
    
    
    

}

.message {
    grid-area: message;
    height: 200px;
   
    border-radius: 5px;
    border: 1px solid black;
    font-family: var(--mainfont);
   
}

.submit {
grid-area: submit;
border-radius: 5px;
border: 1px solid black;
background-color: var(--blue);
}

@media screen and (min-width: 640px) {
    .form {
        width: 400px;
    }

    body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;

    }

}