:root {
    --c1: #ffffff;
    --c2: #404040;
    --c3: #303030;
    --c4: #202020;
    --c5: #101010;
    --c6: #000000;
  }
  
  body {
    background-color: var(--c6);
    color: var(--c1);
    font-family: 'Courier New', Courier, monospace;
  }

  .logo{
    width: 120px;
  }

  .header-panel {
    float: right;
    width: calc(100% - 120px);
    height: 110px;
  }

  .header-panel a {
    width: 100%;
    height: 100%;

    display: block;

    text-decoration: none;
    text-align: center;
    align-content: center;
    color: inherit;
  }

  .external-nav {
    height: 30%;
    padding-left: 5px;

    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: stretch;

    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--c4);
  }

  .external-nav div
  {
    box-sizing: border-box;
    height: 100%;
    padding: 5px;
    padding-left: 10px;
  }

  .external-nav img {
    height: 100%;
  }

  .external-nav form {
    width: 25%;
    padding: 5px;
    margin-left: auto;
    margin-right: 10px;

    box-sizing: border-box;
  }

  .external-nav form input {
    width: 90%;
    height: 80%;

    padding-left: 20px;
    
    border-radius: 6px;
    background-color: var(--c6);
    color: var(--c1);
  }

  .external-nav form input:focus {
    outline:none;
  }

  .external-nav form img {
    position: absolute;
    margin: 6px;
    height: 12px;
  }

  div.account-icon {
    margin-left: 0px;
    padding-left: 0px;
  }

  .internal-nav {
    height: 70%;
    padding: 5px;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;

    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--c5);
  }

  .internal-nav div {
    flex-grow: 1;
    margin: 5px;

    display: flex;
    justify-content: center;
    content: center;

    border-radius: 8px;
    background-color: var(--c3);
  }

  div.selected-nav
  {
      background-color: var(--c2);
      outline-style: solid;
      outline-offset: -4px;
      outline-color: var(--c3);
      outline-width: 5px;
  }

  .internal-nav div:hover {
        background-color: var(--c2);
  }

  .app {
    background-color: var(--c3);
    padding: 5%;
  }

  .app iframe {
    width: 100%;
    height: 100%;
  }

  .projects-list {
    display: grid;
    
    align-items: center;
    justify-items: center;

    grid-template-columns: repeat(auto-fit, 300px);  
    grid-template-rows: repeat(auto-fit, 400px);

    margin-left: 5%;
    margin-right: 5%;
  }
  
  .project-item {
    height: 90%;
    width: 90%;

    display: flex;
    flex-direction: column;
    margin-top: 25px;
    margin-bottom: 25px;

    background-color: var(--c4);
  }

  .project-item-title {
    height: 15%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: xx-large;

    background-color: var(--c3);
  }

  .project-item-image {
    height: 60%;

    margin-left: 10%;
  }

  .project-item-image img {
    height: 100%;
  }

  .project-item-description {
    height: 25%;
    padding-left: 10px;
    font-size: small;
    background-color: var(--c3);
  }