@font-face {
  font-family: "interbold";
  src: url("../fonts/static/Inter-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "inter-semi-bold"; /* The name you will use in CSS */
  src: url("../fonts/static/Inter-SemiBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "variable-font"; /* The name you will use in CSS */
  src: url("../fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(0, 0%, 8%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.gird-container {
  background-color: hsl(0, 0%, 12%);
  display: grid;
  height: 65vh;
  width: 22vw;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 3fr;
  border-radius: 1em;
  padding: 1em 2em;
}

img {
  border-radius: 50%;
  width: 23%;
  height: auto;
  grid-row: 1/2;
  justify-self: center;

  padding: 1em 2em 0em 2em;
  align-self: self-end;
}
article {
  justify-self: center;
  padding: 1em 2em 0em 2em;
  grid-row: 2/3;
}
h1 {
  justify-self: center;
  color: white;
  font-family: interbold;
}

h5 {
  justify-self: center;
  color: hsl(75, 94%, 57%);
  font-family: inter-semi-bold;
}
.job-title {
  justify-self: center;
  color: white;
  font-family: variable-font;
  justify-self: center;
  font-size: smaller;
}

.last-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-row: 3/4;
  grid-column: 1/2;
  row-gap: 1em;
  flex-shrink: 4;
}

a {
  color: white;
  background-color: hsl(0, 0%, 20%);
  text-decoration: none;
  font-family: interbold;
  border-radius: 0.5em;
  padding: 0.65em 1.65em;
  width: 80%;
  text-align: center;
}

a:hover {
  color: hsl(0, 0%, 20%);
  background-color: hsl(75, 94%, 57%);
}

@media (max-width: 545px) {
  .gird-container {
    background-color: hsl(0, 0%, 12%);
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 3fr;
    border-radius: 1em;
    padding: 1em 2em;
  }
}