html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

body {
  margin: 0;
  padding: 0 50px;
  background: #262626;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  color: #d4d4d4;
}

a {
  color: #86efac;
}

a:hover {
  color: #bbf7d0;
}

.sevaztian {
  color: #38bdf8;
}

.sevaztian:hover {
  color: #7dd3fc;
}

.xevaz {
  color: #f87171;
}

.xevaz:hover {
  color: #fca5a5;
}

.w-a-v {
  color: #facc15;
}

.w-a-v:hover {
  color: #fde047;
}

p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #4ade8047;
}

h2 {
  font-size: 1.5rem;
  margin-top: 50px;
}

h3 {
  font-weight: bold;
}

.wordpress h2 {
  margin-bottom: 40px;
}

hr {
  border-style: dashed;
  color: #86efac;
  margin: 3rem 0;
}

ul {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

li {
  margin-bottom: 1rem;
  line-height: 1.6rem;
}

header,
section {
  margin: 0 auto;
  max-width: 800px;
  background: #171717;
  padding: 80px 100px;
  margin-bottom: 80px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px #0003;
}

header {
  display: flex;
  justify-content: center;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#logo {
  font-family: tahoma, helvetica, sans-serif;
  font-weight: bold;
}

#logo .s {
  color: #22c55e;
  font-size: 2rem;
  font-style: italic;
}

#logo .lacle {
  color: #e5e5e5;
  font-size: 2rem;
}

#logo .com {
  color: #a3a3a3;
  font-size: 11px;
}

#logo a {
  text-decoration: none;
}

.contact a {
  color: #a3a3a3;
  word-break: break-all;
}

.contact a:hover {
  color: #737373;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.work-link {
  color: #d4d4d4;
  font-size: 1.3rem;
}

.institution,
.location {
  font-style: italic;
  color: #a3a3a3;
  margin-bottom: 8px;
}

#experience .title,
#experience .date {
  margin-bottom: 1.5rem;
}

#experience > .title,
#experience > .date {
  color: red;
  margin-bottom: 1.5rem;
}

.location,
.date {
  font-style: italic;
  text-align: right;
}

.institution,
.title {
  font-weight: bold;
}

.gpa {
  font-size: 0.9rem;
  color: #aaa;
}

.mb-0 {
  margin-bottom: 0.5rem !important;
}

@media (max-width: 800px) {
  body {
    padding: 0 5vw;
  }

  section {
    padding: 10vw 5vw;
  }

  ul {
    padding-left: 5vw;
  }

  .flex {
    flex-direction: column;
    text-align-last: left;
  }

  #experience .title {
    margin-bottom: 0;
  }

  .mb-0 {
    margin-bottom: 0 !important;
  }
}