.content {
  text-align: center;
}


/* --------------          Landing Section     ------------------ */

#home {
  height: 100vh;
}

#home .content {
  max-width: 1200px;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#home #logo img {
  max-width:100%;
  height:auto;
}

/* --------------          Down Arrows     ------------------ */

.arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 20px;
}

.arrows path {
	stroke: var(--blue);
	fill: transparent;
	stroke-width: 1px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari and Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safariand Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari and Chrome */
}


/* --------------          About Me Section     ------------------ */

#about #description-group {
  margin: 0 15px;
  text-indent: 20px;
}

#about #self-object {
  background-color: var(--mid);
  padding: 5px;
  margin-bottom: 25px;
  font-size: 75%;
  overflow-x: auto;
}

#about #self-object pre {
  margin: 3px 0;
  font-family: monospace;
}

#about #self-object pre span {
  color: var(--green);
  font-style: italic;
}

#about .subheading {
  margin-top: 50px;
}

#about #img-group {
  text-align: center;
}

#about #img-group #and-more:hover,
#about #img-group #and-more:focus,
#about #img-group #and-more:active {
  color: var(--green);
}

#about #img-group img {
  height: 115px;
  width: 115px;
  padding: 10px;
  margin: 10px;
  filter: grayscale(0);
}

#about #img-group img:hover {
  filter: grayscale(1);
  border-radius:50%;
  box-shadow: 0 0 15px var(--dark) inset;
}

/* --------------          Project Section     ------------------ */

#projects {
  height: 100vh;
}

#projects .content {
  min-height: 100%;
}

#projects .bg {
  position: absolute;
  filter: brightness(0.5);
  top: 0;
  background: no-repeat center center fixed;
  transition: background-image 3s ease-in-out;
  background-image: url('../images/small-memory-lp.jpg');
  height: 100%;
  width: 100%;
  margin-left: -20px;
  background-size: cover;
}

#projects .heading {
  margin: 0;
  display: block;
}

#projects a {
  border: 2px solid var(--light);
  box-shadow: 0 0 15px var(--dark) inset;
  padding: 2px 10px;
  font-size: 35%;
  font-weight: var(--bold);
}

#projects a:hover,
#projects a:focus,
#projects a:active {
  background-color: var(--green);
}

#media {
  backgimg-group-color: var(--green);
}

#media .card {
  position: relative;
  text-align: center;
  border: 3px solid transparent;
  margin: 10px;
  padding: 15px;
  box-shadow: 0 0 10px var(--dark) inset;
  min-width: 300px;
}

#media .card p {
  text-align: left;
}

#media .card a {
  box-shadow: inherit;
  padding: 5px 10px;
  text-shadow: none;
}

#media .card a:hover {
  color: var(--light);
  background-color: var(--green);
}

#media .card:hover {
  border-color: var(--dark);
}

#media .subheading {
  font-size: 30%;
  text-decoration: none;
}

#media .subheading:before {
  font-weight: var(--thin);
}

#media #curr-proj .subheading:before {
  content: "Current Project: ";
}

#media #curr-blog .subheading:before {
  content: "Latest Blog: ";
}

#media #curr-note .subheading:before {
  content: "Latest Note: ";
}


/* --------------          Contact Section     ------------------ */


#contact {
  background-color: var(--blue);
}

#contact .heading {
  margin: 0;
}

#contact #logo img {
  max-width:90%;
  height:auto;
}

#contact #visitor-info div {
  text-align: center;
}

#contact #visitor-info a {
  font-size: 250%;
  display: inline-block;
  text-decoration: none;
  color: var(--green);
  margin: 30px;
}

#contact #visitor-info a:hover,
#contact #visitor-info a:focus,
#contact #visitor-info a:active {
  color: var(--dark);
}

#contact #visitor-info h3,
#contact #visitor-info h4 {
  text-align: center;
}

#contact #visitor-info p {
  text-align: left;
}

#contact #visitor-form {
  border: 3px solid var(--dark);
  margin: 15px;
  text-align: left;
  background-color: var(--mid);
  box-shadow: 0 0 5px var(--dark) inset;
  min-width: 300px;
  padding: 30px;
}

#contact #visitor-form:hover,
#contact #visitor-form:active,
#contact #visitor-form:focus {
  border-color: var(--green);
}

#contact #visitor-form label {
  display: block;
  padding: 10px;
  font-weight: var(--bold);
}

#contact #visitor-form input,
#contact #visitor-form textarea {
  display: block;
  padding: 10px;
  width: 100%;
  font-family: inherit;
  font-size: 20%;
  border-radius: inherit;
  box-shadow: 0 0 5px var(--dark) inset;
  border: 0;
  outline: 0;
  transition: height 0.0s, width 0.0s;
}

#contact #visitor-form input:active,
#contact #visitor-form input:focus {
  box-shadow: 0 0 15px var(--green) inset;
}

#contact #visitor-form textarea:active,
#contact #visitor-form textarea:focus {
  box-shadow: 0 0 15px var(--green) inset;
}

#contact #visitor-form button {
  background-color: var(--light);
  border-radius: 0.3rem;
  margin: 15px 10px;
  padding: 5px;
  font-size: 30%;
  border: 0;
  box-shadow: 0 0 5px var(--dark);
  font-family: inherit;
  font-weight: var(--bold);
}

#contact #visitor-form button:hover {
  cursor: pointer;
}

#contact #visitor-form button:active,
#contact #visitor-form button:focus {
  box-shadow: 0 0 10px var(--dark) inset;
}

#contact #visitor-form button:hover,
#contact #visitor-form button:active,
#contact #visitor-form button:focus {
  background-color: var(--green);
  color: var(--light);
}

#contact #visitor-info {
  min-width: 300px;
  padding: 30px;
}