main {
  font-family: comic sans MS; }
  main .birdup {
    position: fixed;
    z-index: 999;
    width: 320px;
    display: none; }
  main section, main header, main footer {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid black; }
  main .header {
    top: 0;
    background-image: url(/src/images/header.png);
    background-size: cover;
    background-attachment: fixed; }
    main .header h1 {
      font-size: 12vw;
      text-align: center;
      color: white;
      text-shadow: #64ff64 0px 0px 34px; }
    main .header-spiral {
      background-image: url(/src/images/spiral.gif);
      width: 180px;
      height: 180px;
      border-radius: 90px;
      box-shadow: #64ff64 0px 0px 34px;
      margin: 0 auto;
      margin-top: 30px; }
  main .shortbio {
    top: 100%;
    height: 200px;
    background: black;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    main .shortbio p {
      padding: 0 20px;
      color: grey;
      font-size: calc(3vw + 8px); }
      main .shortbio p span {
        color: red; }
      main .shortbio p span:nth-child(2) {
        color: white; }
      main .shortbio p span:nth-child(3) {
        color: blue; }
  main .work {
    background: url(/src/images/matrix.gif);
    top: calc(100% + 200px);
    height: calc(100% - 200px); }
    main .work-title {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      padding-top: 20px; }
      main .work-title h1 {
        font-size: 50px;
        padding: 0 20px;
        color: white;
        text-shadow: #64ff64 0px 0px 34px; }
      main .work-title img {
        max-width: 50px; }
    main .work table {
      margin: 0 auto;
      margin-top: 10px;
      border-style: ridge; }
      main .work table a {
        display: block; }
        main .work table a img {
          width: 100%;
          max-width: 130px; }
        main .work table a:hover {
          box-shadow: #64ff64 0px 0px 34px; }
  main .about {
    top: 200%;
    height: calc(100% - 200px);
    background: url(/src/images/sunset.png);
    background-size: 50%; }
    main .about marquee img {
      max-width: 90px; }
    main .about marquee span {
      font-size: 40px;
      color: white;
      text-shadow: #64ff64 0px 0px 34px; }
    main .about .panel {
      font-size: 4vw;
      width: 60%;
      margin: auto; }
      main .about .panel img {
        max-width: 190px; }
      main .about .panel .toggle1 {
        color: red; }
      main .about .panel .toggle2 {
        color: blue; }
  main .footer {
    top: calc(300% - 200px);
    height: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 70px;
    color: white;
    text-shadow: #64ff64 0px 0px 34px;
    background: url(/src/images/croc.jpg);
    background-size: 25% 100%; }