style.css

html,
body {
	height: 100%;
	margin: 0px;
	padding: 20px;
	box-sizing: border-box;
}

.paragraph-text {
	color: blue;
}

.my-button {
	border: 0px;
	background-color: #CDDEE9;
	padding: 10px;
	border: 1px solid black;
}

.grid-container {
	/*set the positioning of the grid*/
	/*so that it fills the screen*/
	position: absolute;
	top: 0px;
	left: 0px;
	min-height: 100%;
	width: 100%;

	/*set display to grid*/
	display: grid;
	grid-template-columns: 250px auto;
	grid-template-rows: 100% 100%;
}

.left-col {
	/*style left column*/
	padding: 15px;

	background-color: #780000;

}

.right-col {
	/*style right column*/
	padding: 15px;
	background-color: #FDF0D5;
}

#content-area {
	height: 100%;
}
/*format for each chirp message*/
.auto-div {
	/*15px on top and botton*/
	/*0 on left and right*/
	margin: 15px 0;

	padding: 10px;

	background-color: #FDF0D5;
	border: 3px solid #669BBC;
}
.right {
margin: -15px 0;

padding: 3px;
text-align:right;


}

/* dark mode button */
.change {
	cursor: pointer;
	border: 1px solid #555;
	border-radius: 40%;
	width: 20px;
	text-align: center;
	padding: 5px;
	margin-left: 8px;
}

#mode {
	border: 0px;
	background-color: lightslategray;
	padding: 15px;
	border: 1px solid black;
}

/* dark mode */
.darkRight-col {
	background-color: #878683;
}
.darkLeft-col {
	background-color: #444444;
}
.darkAuto-div {
	background-color: #bebebe;
	border: 3px solid #082c6c;
}

/* fonts for landing */
h1 {
  font-weight: 400;
  font-size: 15vh;
  font-family: 'Quicksand', sans-serif;
}

p {
  font-family: 'Raleway', sans-serif;
  font-size: 3vh;
}

/* for landing page */
#landing{
  background-color: #FDFCDC;
}

#landinglogo {
  min-width: 100px;
  margin: auto;
}

#top {
  margin-bottom: 20vh;
}

#button {
  /* font-family: 'Raleway', sans-serif; */
  padding-bottom: 20px;
}

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
}

a:hover {
  color: #00AFB9;
  text-decoration: underline;
}

.main {
	text-align: center;
}