@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&family=Montserrat:wght@300&display=swap');

/* header and navigation rules */
#header,
#navigation {
  margin: auto 0;
  width: 100%;
  color: #3a2d0a;
  border: 1px hidden;
  position: fixed;
}

/* header navigation rules */
#header {
  position: relative;
}

/* navigation rules */
#navigation {
  margin-top: 0;
  background-color: grey;
  position: absolute;
  position: fixed;
}

h1 {
  font-family: "Montserrat", sans-serif;
  display: inline;
  text-align: center;
  font-size: 275%;
  color: #FFE8D6;
}


.navigation {
  font-family: "Montserrat", sans-serif;
  display: inline;
  text-align: center;
  font-size: 35%;
  color: white;
  position: absolute;
}

/* a href (for Navigation Menu and Social Media) changes colors when certain actions are made */

a:link,
a:visited {
  color: white;
  padding: 1%;
  text-align: center;
  text-decoration: none;
  display: inline;
}

a:hover,
a:active {
  background-color: #CB997E;
}


/* insert background image; no repeat and covering the whole site */
body {
  background-image: url('https://i.imgur.com/mBIn4qc.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0px auto;
  padding: 5px;
  padding-bottom: 15px;
  text-align: center;
  width: 100%;
  font-family: Inconsolata, sans-serif;
  background-color: #e5d3b3;
}

/* multiple sections border box */
#home,
#biography,
#funfacts,
#famousquotes,
#contact,
#successfull-form-message {
  margin: 10%;
  margin-top: 25%;
  width: 85%;
  height: 40%;
  padding: 50px;
  box-sizing: border-box;
  background-color: #755038;
  border-radius: 50px;
  color: white;
  object-fit: contain;
}

/* (home, biography, fun facts and famous quotes) font size */
h2 {
  width: 100%;
  font-size: 180%;
  text-align: center;
}

/* ( home,biography,fun facts and famous quotes) paragraph font size */
p {
  width: 100%;
  font-size: 125%;
}

/* Contact header font size */
#contact h3 {
  width: 100%;
  font-size: 160%;
  text-align: center;
}

/* Contact form styling */
#contact input[type="text"] {
  width: 60%;
  height: 5%;
  border: none;
}

#contact input[type="email"] {
  width: 60%;
  height: 5%;
  border: none;
}

#contact textarea {
  width: 60%;
  height: 60%;
  margin-top: 5%;
  border: none;
}

/* footer details */
#footer {
  height: 150px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

#social-networks {
  text-align: center;
}

.social-networks > li {
  text-align: center;
  display: inline;
  min-height: 100%;
  margin-bottom: -120px;
  font-size: 150%;
}

/* copyright with my personal name at the bottom of the page */
.copyright {
  color: black;
  font-size: 120%;
  list-style-type: none;
  text-align: center;
}