html body {
  margin: 0px;
  padding: 0px;
  /*
  RESPONSIVE FONT CALCULATION
  MAX FONT + (MIN FONT - MAX FONT) * (100vw - MIN SCREEN) / (MAX SCREEN - MIN SCREEN)
  */
  font-size: calc(20px + (18 - 20) * (100vw - 400px) / (1900 - 400));
  font-family: 'Heebo', sans-serif;
  background-color: #000; }

* {
  box-sizing: border-box; }

img {
  display: block; }

#Main {
  width: 94.75%;
  max-width: 1000px;
  min-width: 300px;
  margin: 0px auto; }

#MainHeader {
  width: 100%;
  max-width: 1000px; }

#Content {
  background-image: url("/images/BG.png");
  background-size: 100%;
  background-repeat: repeat-y;
  text-align: center; }

.Separator {
  width: 100%;
  max-width: 1000px;
  margin: 40px auto 0px auto; }

.FooterImage {
  width: 100%;
  margin: 50px auto 0px auto; }

.PortfolioItemImg img {
  width: 100%;
  max-width: 500px;
  margin: 0px auto;
  box-shadow: 0px 0px 5px 1px #fff,  0px 0px 35px 5px #3c00ff;
  border-style: solid;
  border-width: 1px;
  border-color: #fff;
  border-radius: 15px 100px; }

h1 {
  color: #fff; }

a {
  color: #fff;
  text-shadow: 0px 0px 0px black,  0px 0px 0px black;
  transition: all 0.25s;
  font-weight: bold; }
  a:hover {
    color: #008cff;
    text-shadow: 0px 0px 25px #008cff; }

.PortfolioItemHeader {
  margin: 0px;
  padding: 0px 0px 20px 0px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase; }

.ItemDescription {
  display: block;
  color: #fff;
  font-weight: 300;
  font-size: 0.9em;
  width: 500px;
  margin: auto;
  padding: 30px; }

/* STYLES FOR IF BROWSER HAS GRID */
@supports (display: grid) {
  #Main {
    display: grid;
    grid-template-columns: minmax(300px, 1000px);
    margin: auto; }

  #Content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap; }

  .PortfolioItem {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 100px;
    grid-gap: 0px; }

  #MainHeader {
    width: 100%;
    grid-column: 1/span 10;
    grid-row: 1 / span 11; }

  .Separator {
    grid-column: 1/span 10;
    grid-row: 1 / span 2; }

  .FooterImage {
    grid-column: 1/span 10;
    grid-row: 47 / span 4; }

  .PortfolioItemImg {
    flex-grow: 0;
    flex-shrink: 1; }

  .PortfolioItemHeader {
    border-radius: 10px;
    background-color: black;
    margin: 0px;
    padding: 5px 0px 0px 0px;
    z-index: 2; }

  .PortfolioItemHeaderSpan {
    font-weight: 200; }

  .ItemDescription {
    width: auto;
    text-align: initial;
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    border-color: white;
    padding: 0px 0px 0px 10px; }

  /* $itemName, $itemColNum, $headerCol, $headerRow, $descCol, $descMargin */
  /* RESUME STYLES */
  #ResumeItem {
    grid-column: 2 / span 5;
    grid-row: 3 / span 5; }

  #ResumeHeader {
    grid-column: 3/span 5;
    grid-row: 6/span 1; }

  #ResumeDescription {
    grid-column: 8/span 2;
    grid-row: 3 / span 5;
    margin: 0px 0px 0px 5px; }

  /* WEATHER APP STYLES */
  #WeatherAppItem {
    grid-column: 4 / span 5;
    grid-row: 3 / span 5; }

  #WeatherAppHeader {
    grid-column: 3/span 4;
    grid-row: 6/span 1; }

  #WeatherAppDescription {
    grid-column: 1/span 2;
    grid-row: 3 / span 5;
    margin: 0px 0px 0px 5px; }

  /* TODO LIST STYLES */
  #TodoItem {
    grid-column: 5 / span 5;
    grid-row: 3 / span 5; }

  #TodoHeader {
    grid-column: 7/span 4;
    grid-row: 4/span 1; }

  #TodoDescription {
    grid-column: 2/span 3;
    grid-row: 3 / span 5;
    margin: 0px 15px 0px 5px; }

  /* BOILING STYLES */
  #BoilingItem {
    grid-column: 3 / span 5;
    grid-row: 3 / span 5; }

  #BoilingHeader {
    grid-column: 1/span 6;
    grid-row: 6/span 1; }

  #BoilingDescription {
    grid-column: 9/span 2;
    grid-row: 3 / span 5;
    margin: 0px 15px 0px 5px; }

  /* COHEN STYLES */
  #CohenItem {
    grid-column: 2 / span 5;
    grid-row: 3 / span 5; }

  #CohenHeader {
    grid-column: 3/span 5;
    grid-row: 6/span 1; }

  #CohenDescription {
    grid-column: 8/span 3;
    grid-row: 3 / span 5;
    margin: 0px 15px 0px 5px; } }
@media screen and (max-width: 768px) {
  .PortfolioItemImg img {
    border-radius: 5px 50px; }

  @supports (display: grid) {
    #Main {
      width: 100%;
      margin: 0px; }

    #Content {
      padding: 0px; }

    .PortfolioItem {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      grid-template-columns: initial;
      grid-template-rows: initial;
      grid-gap: 0px; }

    #MainHeader {
      grid-column: auto / auto;
      grid-row: auto / auto; }

    .PortfolioItemImg {
      padding: 40px 20px; }

    .PortfolioItemHeader {
      border-radius: 0px;
      background-color: rgba(0, 0, 0, 0.75);
      margin: 0px 5px;
      padding: 0px; }

    .ItemDescription {
      background-color: rgba(0, 0, 0, 0.75);
      margin: 0px 10px !important;
      padding: 10px 5px 10px 10px !important; } } }

/*# sourceMappingURL=main.css.map */