/* Styling the Body element i.e. Color,
		Font, Alignment */
		body {
		    background-color: #86BBBD;
		    font-family: Verdana;
		    text-align: center;
		}

		.header {
		    background-color: #fff;
		    max-width: 500px;
		    margin: 50px auto;
		    padding: 30px 20px;
		    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
		}

		/* Styling the Form (Color, Padding, Shadow) */
		form,
		.information {
		    background-color: #fff;
		    max-width: 500px;
		    margin: 50px auto;
		    padding: 30px 20px;
		    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
		}


		/* Styling survey Class */
		.survey {
		    text-align: left;
		    margin-bottom: 25px;
		}

		/* Styling survey Label */
		.survey label {
		    display: block;
		    margin-bottom: 10px;
		}

		/* Styling survey input,
		select, textarea */
		.survey input,
		.survey textarea {
		    border: 1px solid #777;
		    border-radius: 2px;
		    font-family: inherit;
		    padding: 10px;
		    margin-bottom: 10px;
		    display: block;
		    width: 95%;
		}

		select {
		    border: 1px solid #777;
		    border-radius: 2px;
		    font-family: inherit;
		    padding: 10px;
		    margin-bottom: 10px;
		    display: block;
		    width: 100%;
		}

		/* Styling survey Radio
		button and Checkbox */
		.survey input[type="radio"],
		.survey input[type="checkbox"] {
		    display: inline-block;
		    width: auto;
		}

		/* Styling Button */
		button {
		    background-color: #86BBBD;
		    border: 1px solid #777;
		    border-radius: 2px;
		    font-family: inherit;
		    font-size: 21px;
		    display: block;
		    width: 100%;
		    padding-top: 10px;
		    padding-bottom: 10px;
		    margin-top: 50px;
		    margin-bottom: 20px;
		}


		/* Style the button that is used to open and close the collapsible content */
		.collapsible {
            box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
		    margin-top: 0px;
		    margin-bottom: 0px;
		    background-color: #eee;
		    color: #444;
		    cursor: pointer;
		    padding: 18px;
		    width: 100%;
		    border: none;
		    text-align: left;
		    outline: none;
		    font-size: 15px;
		}

		/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
		.active,
		.collapsible:hover {
		    background-color: #ccc;
		}

		/* Style the collapsible content. Note: hidden by default */
		.content {
		    padding: 0px 18px;
		    max-height: 0;
		    overflow: hidden;
		    transition: max-height 0.2s ease-out;
		    background-color: #f1f1f1;
		}

		.label-studyHours {
		    padding: 10px 18px;
		}

		.title {
		    text-align: center;
		    margin: 0 auto;
		    margin-bottom: 10px;
		    width: fit-content;
		}

		.topnav a {
		    margin-top: 10px;
		    padding: 2px;
		    color: black;
		}

		.arrow {
		    border: solid black;
		    border-width: 0 3px 3px 0;
		    padding: 3px;
            float: right;
		}

        .down {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
          }