/*
This controls the body of the page
You can use this to set the background color, margins, etc. as shown below
*/
body {
  background-color: #444444;
  margin-top: 100px;
  margin-left: 10%;
  margin-right: 10%;
}

/* This is used to make profile picture cropped as a circle */
img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

/* Formatting for different header levels, if you need them! */
h1 {
  margin-top: 20px;
  margin-bottom: 30px;
  font-family: Averta, sans-serif;
  color: #fff;
  font-size: 56px;
  line-height: 44px;
  font-weight: 700;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Averta, sans-serif;
  font-size: 22px;
  line-height: 36px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

/* Formatting for paragraph text */
p {
  margin-bottom: 20px;
  font-family: Averta, sans-serif;
  color: #fff;
  font-size: 22px;
  line-height: 30px;
}

/* "a" refers to links, everything below controls the color and behavior of link objects */
a {
  -webkit-transition: border-color 200ms ease, color 200ms ease;
  transition: border-color 200ms ease, color 200ms ease;
  color: #fff;
  text-decoration: none;
}

a:hover {
  border-bottom-color: #1d2330;
  color: #1d2330;
}

a:focus {
  border-bottom-color: #1d2330;
  color: #1d2330;
}

/* Anything marked as class="content" will have options below attached */
.content {
  margin-top: 60px;
}

/* below is special formatting for a custom object, here a social-icon class */
.social-icon {
  margin-top: 60px;
  padding-right: 25px;
  float: right;
  border-bottom: 0px none #000;
  width: 30;
  height: 30;
}

.menu-link {
  font-family: Averta, sans-serif;
  font-size: 14px;
  margin-top: 60px;
  padding-right: 25px;
  padding-left: 10px;
  float: left;
  border-bottom: 2px solid white;
}

form {
  font-family: Averta, sans-serif;
  font-size: 22px; 
  color: #fff;
}

button {
  font-family: Averta, sans-serif;
  font-size: 22px; 
  color: rgb(5, 5, 5);
}