:root {
  --accent: #5cb85c;
  --myblack: black;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: rgb(31, 31, 31);
  color: white;
}

h1 {
  color: var(--accent);
}

#box {
  background: var(--myblack);
  padding: 20px;
  margin: 20px auto 20px auto;
  border: solid var(--accent);
  max-width: 500px;
}

img.pfp {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.border-rounded {
    border-radius: 50px;

}
.text-center{
  text-align: center;
}

.container {
  padding: 20px;
  background: var(--myblack);
  border: solid white 1px;
  margin: 40px;
}

.skill {
  background: rgb(44, 44, 44);
  border: solid white 1px;
  margin: 10px;
  padding: 30px;
}

.flex {
  display: flex;
  justify-content: start;
}

.row {
  flex-direction: row;
}

hr {
  border: 1px solid var(--accent);
}

a {
  color: rgb(173, 222, 236);
  text-decoration: none;
}

a:hover{
  color: rgb(145, 238, 255);
}