/* remove unwanted padding and margins */
body, h1, h2, h3, p, ul {
    margin: 0;
    padding: 0;
}

/* Set a background color for everything besides body */

html {
    background-color: #e2ccdd;
}


/* Define the font, width of the body, borders, margins, and text alignment */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #d4d4d4;

    width: 900px;
    margin: 0 auto 0 auto;
    border-radius: 0 0 30px 30px;
    border-left: black solid;
    border-right: black solid;
    border-bottom: black solid;
}

/* Set background color, font color, and font alignment */
header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Set basic values to make the website looks proper (margin and padding) */
header h1 {
    margin-bottom: 10px;
}

/* Add padding to main */
main {
    padding: 20px;
}

/* Add space between the magin and what's underneath it */
section {
    margin-bottom: 30px;
}

/* Set a background color, padding, text color, and text alignment */
footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 0 0 26px 26px;
}

/* Place the label and inputs in the middle of the form */
label, input {
    margin:0 auto;
}

/* Place headers and content in the middle of the page */
h2, p {
    text-align: center;
}

/* Make ordered lists and their contents be in the middle of the site */
ol, ol li {
    text-align: center;
    list-style-position: inside;
}

/* Format a table to look correct and have collapsing borders */
table, tr, th, td {
    padding:5px;
    border: black solid;
    border-collapse: collapse;
    margin: auto;
}

/* Make labels and inputs be aligned in the center of the website */
label, input {
    margin:0 auto;
}

/* Set values to keep the "logo" the proper size with a border */
.logo {
    max-width: 50%;
    max-height: 200px;
    border-radius: 10px;
    border:#8a8a8a solid;
}

/* Make a column that floats to the right with a border and background color */
.columnLeft {
    float: left;
    max-width: 45%;
    border: black solid;
    border-radius: 10px;
    padding:10px 5px 10px 5px;
    background-color: #8a8a8a;
    margin-bottom: 10px;
}

/* Make the image stay in the middle with proper padding and sizing */
.columnLeft img {
    padding:5px 10px 5px 10px;
    margin: 0;
    max-width: 95%;
}

/* Center the header and content */
.columnLeft h2, p {
    text-align: center;
}

/* Same as the left column, but floated to the right */
.columnRight {
    float: right;
    max-width: 45%;
    border: black solid;
    border-radius: 10px;
    padding:10px 5px 10px 5px;
    background-color: #8a8a8a;
    margin-bottom: 10px;
}

.columnRight img {
    padding:5px 10px 5px 10px;
    margin: 0;
    max-width: 95%;
}

.columnRight h2, p {
    text-align: center;
}

/* Set a proper width for the form, provide padding, margin, text alignnment, and hide overflow */
.form {
    max-width:85%;
    margin:10px auto 10px auto;
    padding:10px 5px 10px 5px;
    text-align:center;
    border-radius: 10px;
    border:black solid;
    background-color: #8a8a8a;
    overflow: hidden;
}

/* Format the menu bar when large screen */
#menu {
    display: flex;
    list-style-type: none;
    justify-content: space-evenly;
  }
  
  /* Make image buttons look better */
  a:link, a:visited {
    text-decoration: none;
    color: white;
    background-color: #302b2b;
    border: 2px solid black;
    border-radius: 5px;
    padding:5px;
    display: block;
  }
  
  /* Change the color of button when hovered over */
  a:hover {
    background-color:black;
  }
  
  /* By default, hide slicknav menu */
  .slicknav_menu {
      display:none;
  }


  /* If the user's screen is under 1100px, give them a mobile friendly layout with slicknav */
@media screen and (max-width:1100px) {
    /* make the HTML background look the same as the body background */
    html {
        padding:0px;
        background-color: #d4d4d4 ;
    }

    /* Make the body as wide as the website, set margin to 0, make font larger, no borders */
    body {
        width:100%;
        height: 100%;
        padding:0px 0px 10px 0px;
        border-radius: 0;
        margin:0px;
        font-size: 19;
        border: none;
    }

    /* Remove the border radius from the footer */
    footer {
        border-radius: 0;
    }

    /* Add more padding to improve readability */
    p {
        padding:10px;
    }

    /* Make the column into a row so that it is easier to read for the user */
    .columnLeft {
        max-width:95%;
        margin:10px auto 10px auto;
        padding:10px 5px 10px 5px;
        text-align:left;
        border-radius: 10px;
        border:black solid;
        background-color: #8a8a8a;
        overflow: auto;
        float: none;
    }

    /* Change the column image size */
    .columnLeft img {
        float: left;
        max-width: 50%;
    }

    /* Once more a repeat of columnLeft */
    .columnRight {
        max-width:95%;
        margin:10px auto 10px auto;
        padding:10px 5px 10px 5px;
        text-align:left;
        border-radius: 10px;
        border:black solid;
        background-color: #8a8a8a;
        overflow: auto;
        float: none;
    }

    .columnRight img {
        float: left;
        max-width: 50%;
    }

    /* Make the form have more room, making it easier to use for the user */
    .form {
        max-width: 95%;
    }


    /* Make Slicknav us the mobile drop menu */

    #menu {
            display:none;
        }
        
        .slicknav_menu {
            display:block;
        }
}