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

html {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(230, 230, 230);
  margin: 0;
  text-align: -webkit-center;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 3rem;
}

.profile-pic {
  width: 200px;
  border-radius: 50%;
  position: relative;
  top: 4px;
}

.ruby-pic {
  width: 40px;
  position: relative;
  bottom: -123px;
  right: 15px;
}

.pic-shadow {
  background-color: rgb(240, 240, 240);
  display: inline-block;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  position: relative;
  top: 109px;
  left: 1.5%;
}

header {
  background-image: url("images/background.jpg");
  margin: 0;
  color: white;
}

h1 {
  background-color: #5f5f5f;
  margin: 50px 0;
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  font-family: 'Inconsolata', monospace;
  color: orange;
}

span {
  color: #ECF23D;
}

.my_button {
  background-color: #1E1E1E;
  color: white;
  font-size: 2rem;
  padding: 10px;
  border-radius: 15px;
  text-decoration: none;
  border: 2px solid white;
  margin-top: 100px;
}

.my_button:hover {
  background-color: #333333;
  color: white;
}

.para_header {
  margin-top: 50px;
  background-color: #5f5f5f;
  display: inline-block;
  width: 320px;
  padding: 5px;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 3rem;
}

li {
  display: inline-block;
  list-style: none;
  margin: 0px 10px;
}

.body_divs {
  max-width: 800px;
  margin: 10px auto;
  font-size: 1.5rem;
  padding: 10px 0;
}

.fa-brands {
  font-size: 3rem;
  color: white;
}

ul {
  padding: 0;
  margin: 81px 0;
}

.fa-brands:hover {
  color: rgb(216, 216, 216);
}

hr {
  border: 10px dotted #5f5f5f;
  border-top-style: none;
  width: 5%;
  background: center;
}

.about {
  margin-top: 110px;
}

footer{
  background-color: #5f5f5f;
  color: white;
  margin-bottom: 0;
  padding: 40px;
  height: 250px;
}

.carousel-text {
  font-size: 1rem;
}

h3{
  font-weight: bold;
}




@media (max-width: 540px) {
  .para_header {
    width: 200px;
  }
}