/* Style Settings */

@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
:root {
    --bgColor: rgb(0, 0, 0);
    --accentColor: #E6E6E6;
    --font: 'Karla', sans-serif;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 350px;
  margin: auto;
  text-align: center;
  font-family: arial;
  background-color: #f2bd0e;
}

.title {
  color: #f7f7f7;
  font-size: 18px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #021e5d;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover, a:hover {
  opacity: 0.7;
}

userPhoto {
    width: 290px;
    height: 290px;
    display: block;
    margin: 35px auto 20px;
    border-radius: 50%;
}

body {
    background-color: var(bgColor);
    background-image: url("./background.png");
    background-size: 120%;
}

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

#userPhoto {
    width: 110px;
    height: 110px;
    display: block;
    margin: 35px auto 20px;
    border-radius: 50%;
}

#userName {
    color: rgb(255, 255, 255);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    display: block;
    font-family: var(--font);
    width: 100%;
    text-align: center;
    text-decoration: none;
}

#links {
    max-width: 675px;
    width: auto;
    display: block;
    margin: 27px auto;
}

.link {
    display: block;
    background-color: #c38629;
    color: #c38629;
    font-family: var(--font);
    text-align: center;
    margin-bottom: 5px;
    padding: 5px;
    text-decoration: none;
    font-size: 1rem;
    transition: all .25s cubic-bezier(.08, .59, .29, .99);
    border: solid var(--accentColor) 2px;
}

.link:hover {
    background-color: var(--bgColor);
    color: var(--accentColor);
}