* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  border: 0.1rem solid #9298A0;
  border-radius: 2rem;
  background-color: #020408;
  line-height: 1.3;
  font-family: "Inter", sans-serif;
}

.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 2.6rem;
  margin: 3.2rem 6.4rem;
}

:root {
  --text-color: #fbfaff;

  --color-primary: #A37FF1;
  --color-secondary: #9298A0;
}

/* HEADERS */

.header-primary,
.header-secondary {
  color: var(--color-primary);
  font-size: 2.8rem;
  text-transform: uppercase;
}

.header-secondary {
  width: fit-content;
  padding: 0.8rem 1.8rem;
  margin: 0 auto;
}

.website-name {
  font-style: italic;
  font-weight: bold;
  font-size: 4rem;
}

.container {
  background-color: #0E1116;
  border-radius: 1.2rem;
  border: 0.15rem solid var(--color-secondary);
}

/* COLORS */

.website-name .name {
  color: #9298A0;
}

.website-name .last-name {
  color: #43D3FF;
}

.website-name .dev,
.text-information span {
  color: #A37FF1;
}

.website-name .arrow {
  color: #23D55E;
}

.status-icon {
  height: 2rem;
}

.green {
  color: #23D55E;
}

.green .status-icon{
  stroke: #23D55E;
}

.yellow {
  color: #FFF94D;
}

.yellow .status-icon{
  stroke: #FFF94D;
}

.red {
  color: #d52323;
}

.red .status-icon{
  stroke: #d52323;
}

/* About me, work part */
.info-dev, .info-aut, .info-base, .info-scripts {
  font-weight: 700;
}

.info-dev {
  color: #FF833B;
}

.info-aut {
  color: #D857FF;
}

.info-base {
  color: #43D3FF;
}

.info-scripts {
  color: #FFF94D;
}