portfolio/static/scss/_container.scss

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

  backdrop-filter: blur(5px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(17, 25, 40, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.125);  
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 10px;
  height: 100%;
  filter: drop-shadow(0 30px 10px rgba(0,0,0,0.125));
//   justify-content:center;
//   text-align: center;

  .maincontent {
    z-index: 1;
    padding-left: 5%;
    padding-right: 5%;
    min-width: 350px;
  }

  @media (max-width: 768px) {
    .maincontent {
      padding: 1%;
    }
  }
}

.row {
  &.main {
    .logo {
      margin-top: 1.8rem;
      border-radius: 2.5%;
    }

    .name {
      margin-top: 1rem;
      letter-spacing: 4px;
    }

    .title {
      margin-left: 3%;
      padding: 0;
      color: #ccc;
      font-style: italic;
      font-size: 1.5rem !important;
    }
  }
}


@media (max-width: 768px) {
  .container {
    width: 95%;
    padding: 2px;
    min-width: 350px;
  }

  body {
    background-size: cover;
    background-position: top center;
  }
  :root {
    font-size: 12px !important;
  }

  h2.section {
    font-size: 2.5rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .container {
    width: 80%;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 60rem;
  }
}