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

*,
button,
input {
  font-family: Bitter, sans-serif;
}

.container {
  display: flex;
  width  : 100%;
}

.container .sidebar {
  width       : 30%;
  margin-right: 20px;

  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  height         : 100vh;

  background: #6748ca;
}

.container .sidebar a.active {
  color: #b2a2e6;
}

@media (max-width: 1024px) {
  .container .sidebar {
    display: none;
  }
}

.container .sidebar .profile {
  height       : 180px;
  width        : 180px;
  border-radius: 50%;
  border       : 5px solid rgb(153 156 207);

  margin-bottom: 50px;
}

.container .sidebar a {
  text-decoration: none;
  color          : #fff;
  margin-bottom  : 20px;
  text-transform : uppercase;
  font-weight    : 500;
  transition     : color 0.6s;
  color          : #9f8be4;
  font-size      : 20px;
}

.container .sidebar a:hover {
  color: #fff;
}

.container .content {
  width        : 70%;
  max-height   : 100vh;
  overflow-y   : auto;
  padding-right: 30px;
  margin       : 0 auto;
  min-width    : 550px;
}

@media (max-width: 1024px) {
  .container .content {
    width      : 100%;
    margin-left: 50px;
  }

  .container .content .profile {
    display      : inline;
    height       : 210px;
    width        : 210px;
    margin-bottom: 30px;
    border       : 10px solid rgb(113 89 193);
    border-radius: 50%;
  }
}

@media (min-width: 1024px) {
  .container .content .profile {
    display: none;
  }
}

.about {
  height         : 100vh;
  display        : flex;
  justify-content: center;
  margin         : 0 auto;
  flex-direction : column;
}

.about .name {
  font-size     : 50px;
  text-transform: uppercase;
  font-weight   : 800;
}

.about .name span {
  color: #7159c1;
}

.about .address {
  margin-bottom : 50px;
  font-weight   : 500;
  text-transform: uppercase;
  margin-left   : 5px;
}

.about .address a {
  text-decoration: none;
  color          : #7159c1;
  text-transform : uppercase;
  transition     : color 0.6s, text-decoration 0.2s;
}

.about .address a:hover {
  color          : rgb(178 162 230);
  text-decoration: underline;
}

.about .description {
  font-weight: 200;
  font-size  : 20px;

  line-height  : 25px;
  margin-bottom: 50px;
}

.about .networking {
  display: flex;
}

.about .networking a {
  height       : 54px;
  width        : 60px;
  background   : rgb(84 84 84);
  border-radius: 50%;
  padding      : 10px;
  color        : rgb(255 255 255);
  transition   : background 0.5s;
  margin-right : 20px;

  display        : flex;
  align-items    : center;
  justify-content: center;
}

.about .networking a:hover {
  background: #7159c1;
}

.about .networking svg {
  height: 30px;
}

.about button {
  margin-top   : 50px;
  width        : 300px;
  padding      : 15px;
  border-radius: 10px;
  border       : none;
  background   : #7159c1;
  transition   : background 0.4s;
  outline      : 0;
  cursor       : pointer;
}

.about button:hover {
  background: #8a76ce;
}

.about button i {
  color       : #fff;
  margin-right: 10px;
}

.about button span {
  text-decoration: none;
  color          : #fff;
}

@media (min-width: 1024px) {
  .next {
    display: none;
  }
}

@media (max-width: 1024px) {
  .next {
    display        : inline;
    text-decoration: none;
  }

  .next i {
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-top     : 50px;
    margin-bottom  : 50px;
    font-size      : 50px;
    color          : rgb(218 218 232);
  }
}

.experiences {
  height         : 100vh;
  display        : flex;
  flex-direction : column;
  justify-content: center;
}

.experiences .title {
  text-transform: uppercase;
  font-size     : 40px;
  font-weight   : 700;
  margin-bottom : 60px;
  color         : #7159c1;
}

.experiences .data {
  display        : flex;
  justify-content: space-between;
  margin-bottom  : 35px;
}

.experiences .experience .location {
  text-transform: uppercase;
  font-size     : 20px;
  font-weight   : 500;
  margin-bottom : 5px;
}

.experiences .experience .occupation {
  text-transform: uppercase;
  font-size     : 17px;
  font-weight   : 400;
  margin-bottom : 25px;
}

.experiences .experience .description {
  font-weight  : 300;
  display      : flex;
  line-height  : 25px;
  text-align   : justify;
  padding-right: 50px;
}

.experiences .data .date {
  color      : #7159c1;
  font-weight: 500;
  white-space: nowrap;
}

.education {
  height         : 100vh;
  display        : flex;
  justify-content: center;
  flex-direction : column;
}

.education .title {
  text-transform: uppercase;
  font-size     : 40px;
  font-weight   : 700;
  margin-bottom : 60px;
  color         : #7159c1;
}

.education .data {
  display        : flex;
  justify-content: space-between;
  margin-bottom  : 35px;
}

.education .event .location {
  text-transform: uppercase;
  font-size     : 20px;
  font-weight   : 500;
  margin-bottom : 5px;
}

.education .event .graduation {
  text-transform: uppercase;
  font-size     : 17px;
  font-weight   : 300;
  margin-bottom : 25px;
}

.education .date {
  color      : #7159c1;
  font-weight: 500;
  white-space: nowrap;
}

.skills {
  height         : 100vh;
  display        : flex;
  justify-content: center;
  flex-direction : column;
}

.skills .title {
  text-transform: uppercase;
  font-size     : 40px;
  font-weight   : 700;
  margin-bottom : 60px;
  color         : #7159c1;
}

.skills .languages .title {
  text-transform: uppercase;
  font-size     : 20px;
  font-weight   : 500;
  margin-bottom : 5px;
  color         : #000;
}

.skills .languages .tools {
  margin-top   : 20px;
  text-align   : justify;
  margin-bottom: 35px;
}

.skills .languages .tools img {
  height       : 40px;
  margin-right : 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.skills .workflow p {
  text-transform: uppercase;
  font-size     : 20px;
  font-weight   : 500;
  margin-bottom : 10px;
}

@media (max-width: 1024px) {
  .skills .workflow p .first {
    width: 400px;
  }
}

.events {
  height         : 100vh;
  display        : flex;
  justify-content: center;
  flex-direction : column;
}

.events p {
  text-transform: uppercase;
  font-size     : 40px;
  font-weight   : 700;
  margin-bottom : 60px;
  color         : #7159c1;
}

.events .conquest {
  margin-bottom: 10px;
  font-weight  : 400;
}

.events .conquest i {
  margin-right: 10px;
  color       : #7159c1;
}