:root {
--headercolour: #fd5800; /* #fd5800 */
--headerfonts: 'Zen Old Mincho', times, serif;
--bodyfonts: 'Karla', 'helvetica neue', arial, sans;
}

.container {
    width: 905px;
    margin: auto;
    padding: 0px;
    display: flex;
    justify-content: center;
}

.header {
    width: 870px;
    margin: auto;
}

.main {
    /* Uncomment for card effect background-color: whitesmoke;
    box-shadow: 2px 2px 4px 3px #cecece; */
    max-width: 570px;
    border-radius: 10px;
    padding: 0px; /* pad this out if going for the card effect and change background color */
}

.sidebar {
    width: 300px;
    padding-top: 0px;
    margin-top: 0px;
    position: relative;
    top: -20px;
    left: 35px;
   /* margin-bottom: -300px;  this removes the white space where the sidebar was */
}

@media (max-width: 905px)
{
    .sidebar {
        width: 500px;
        position: relative;
        top: -20px;
        left: 0px;
    }

    .main {
        width: 500px;
        max-width: 500px;
    }

    .header {
        width: 500px;
    }

    .container {
        width: 500px;
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 550px)
{
    .sidebar {
        width: 350px;
        position: relative;
        top: -20px;
        left: 0px;
    }

    .main {
        width: 350px;
        max-width: 350px;
    }

    .header {
        width: 350px;
    }

    .container {
        width: 350px;
        display: flex;
        flex-direction: column;
    }
}

body {
    background-color: #ffffff; /* was rgb(248, 239, 240); */
}

h1 {
    font-family: var(--headerfonts);
    color: var(--headercolour);
    /* font-size: 3.2em; */
    font-size: 5em;
    line-height: 1em;
    margin-bottom: 30px; 
    font-weight: 900;
    }

h2 {
    font-family: var(--headerfonts);
    color: var(--headercolour);
    font-size: 2em;
}

h3 {
    font-family: var(--headerfonts);
    color: var(--headercolour);
    font-size: 1.7em;
    font-weight: 900;
    /* border-bottom: 1px dashed black; */
}

h4, h5 {
    font-family: var(--headerfonts);
    color: var(--headercolour);
}

p, ul {
    font-family: var(--bodyfonts);
    color: #171717;
    font-size: 1.25em;
    font-weight: 300;
    line-height: 1.3em;
    /* letter-spacing: 0.01rem;
    word-spacing: 0.02rem; */
}

hr {
    border: solid 1px;
}

.tagline {
    color: #171717;
    font-size: 1.35em;
    font-family: var(--bodyfonts);
    text-transform: none;
    font-weight: 300;
    margin-bottom: 35px;
}

.headshot {
    width: 100%; /*was 100% */
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: relative;
}

label {
    font-size: 1em;
    font-family: var(--bodyfonts);
}

input {
    width: 250px;
    padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
    font-size: 1em;
    font-family: var(--bodyfonts);
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-family: var(--bodyfonts);
}

button {
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: var(--headercolour);
    font-family: var(--bodyfonts);
    font-weight: 700;
    color: white;
    float: right;
}

button:hover {
    background-color: orange;
}