styles.css

/* Nyx Strong */
body, html {
    min-height: 100%;
    margin: 0%;
    padding: 0%;
    background-color: #222222;
  }
 
body {
    width: 100%;
    background: linear-gradient(-45deg, rgba(0,53,64,1) 0%, rgba(0,106,128,1) 30%, rgba(0,212,255,1) 100%);
    background-repeat: no-repeat;
    color: white;
    font-size: 20px;
}
.container {
  display: flex;
  flex-direction: column;
  width: 60%;
  height: 150vh;
  margin: auto;
}
.section {
  border-radius: 35px;
  background-color: #222222;
  width: 100%;
  height: 30%;
  margin-top: 5%;
}
a {
  color: white;
}


/* Main box styles */
.main {
  margin-top: 20vh;
}
.grid-container {
  display: grid;
  grid-template-areas: 'logo about about' 'name about about';
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  align-items: center;
  justify-items: center;
}
.logo {
  border-radius: 50%;
  max-width:50%;
  grid-area: logo;
  max-height: 80%;
}
.main h1 {
  grid-area: name;
  font-size: 30px;
}
.main p {
  grid-area: about;
  margin: 10% 5%;
  min-width: 90%;
  min-height: 80%;
  text-align: justify;
  overflow-wrap: break-word;
}

/* Projects box styles */

.projects h2 {
  margin: 20px;
  text-align: center;
}
.projects-container {
  text-align: center;
  display: flex;
  margin: 20px;
}
.projects-container div, .projects-container .filler {
  min-width: calc(100% / 3);
}