@media only screen and (max-width: 500px) {
  :root {
    --know-cloud-grid-size: 10;

    --know-cloud-size-0: 40;
    --know-cloud-size-1: 20;
    --know-cloud-size-2: 12;
    --know-cloud-size-3: 10;
    --know-cloud-size-4: 7;
  }

  html {
    background-color: transparent;
  }

  body {
    font-size: 11pt;
  }

  #title_block {
    width: 90%;
    font-size: inherit;
  }

  .column_i_do {
    width: 85%;
    margin-top: 36px;
  }

  .column_content {
    min-height: 0px;
  }

  .column_i_know {
    width: 100%;
    height: 110px;
  }

  .did_project_column {
    width: 100%;
  }

  .did_timeframe_line_left {
    padding: 8px 24px;
    display: block;
    font-size: larger;
    text-shadow: 1px 1px 0px var(--text-primary), 0 0 3px var(--text-primary);
    color: whitesmoke;
  }

  .did_timeframe_line_right {
    display: block;
    padding: 8px 24px;
    float: right;
    text-align: right;
    font-size: larger;
    text-shadow: 1px 1px 0px var(--text-primary), 0 0 3px var(--text-primary);
    color: whitesmoke;
  }

  .column_contact {
    width: 24%;
    margin-top: 24px;
    margin-right: 1%;
  }

  .contact_icon {
    width: 24px;
    height: 24px;
    background-color: white;
    padding: 12px;
    border-radius: 50%;
    box-shadow: -1px 2px 3px rgb(172, 171, 171);
  }

  .did_timeframe_column {
    display: none;
  }

  #footer {
    background-color: transparent;
  }
}