* {
  margin: 0;
}

body {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 500;
  overflow-x: hidden;
}

.main__gradient {
  position: absolute;
  top: calc(50% - 500px);
  left: calc(50% - 500px);
  width: 1000px;
  height: 1000px;
  z-index: -1;
  background-image: radial-gradient(50% 50% at 50% 50%, #C8FF29 0.25%, rgba(255, 255, 255, 0.42) 100%);
}

.main, .projects {
  display: flex;
  justify-content: center;
  height: 100vh;
}

.main__block {
  margin-top: 200px;
  width: 500px;
}

.main__name {
  font-size: 10em;
  font-weight: 800;
  
  /* background-color: #C5AFFF;
  background-image: linear-gradient(#FFF 50%, #C5AFFF 100%); */
  /* -webkit-background-clip: text; */
  /* background-clip: text; */
  /* text-fill-color: transparent; */
  /* -webkit-text-fill-color: transparent; */
  color: black
}

.main__description {
  font-size: 7em;
}

.main__mail, .main__link {
  font-size: 5em;
  color: black;
  margin-bottom: 20px;
  display: block;
  text-decoration: none;
}

.main__block > *,
.projects__block > * {
  margin-bottom: 30px;
}

.projects__block {
  margin-top: 200px;
  width: 700px;
}

.projects__title {
  font-size: 7em;
  margin: 0 0 40px;
}

.projects__name-wrapper {
  display: flex;
  align-items: center;
  transform: translateX(-70px);
}

.projects__name {
  font-size: 5em;
  margin-left: 20px;
}

.projects__link {
  font-size: 3em;
  margin: 0 20px 50px 0;
  color: black;
}

.projects__project {
  margin-bottom: 40px;
}

@media (max-width: 950px) { 
  body {
    font-size: 8px;
  }

  .projects__name-wrapper {
    display: block;
    align-items: center;
    transform: translateX(0px);
  }

  .projects__name {
    margin: 20px 0 0
  }

  .main__gradient {
    top: calc(50% - 150px);
    left: calc(50% - 150px);
    width: 300px;
    height: 300px;
    transform: scale(2);
  }
}

@media (max-width: 650px) { 
  .main__block, .projects__block {
    width: 400px;
  }
  
  body{
    font-size: 7px;
  }
}

@media (max-width: 450px) { 
  body {
    font-size: 6px;
  }
   
  .main__block, .projects__block {
    width: 100%;
    margin-left: 30px;
    margin-right: 30px;
  }
}

@media (max-height: 600px) { 
  .main__block {
    margin-top: 100px;
  }
}

@media (max-height: 400px) { 
  .main {
    align-items: center;
  }

  .main__block {
    margin-top: 0;
  }
}