body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 100vh;
    font-family: "Roboto", sans-serif;
    background-image: url('../../images/nickyb.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: -29px;
  }
  .credit {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #000;
  }
  /* too much sketchbook stuff, fun though, learning something */
  .options {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    min-width: 600px;
    max-width: 900px;
    width: calc(100% - 100px);
    height: 400px;
  }
  .options .option {
    position: relative;
    overflow: hidden;
    min-width: 60px;
    margin: 10px;
    background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
    background-size: auto 120%;
    background-position: center;
    cursor: pointer;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  }
  .options .option:nth-child(1) {
    --defaultBackground:#46b501;
  }
  .options .option:nth-child(2) {
    --defaultBackground:#FC6E51;
  }
  .options .option:nth-child(3) {
    --defaultBackground:#FFCE54;
  }
  .options .option:nth-child(4) {
    --defaultBackground:#2ECC71;
  }
  .options .option:nth-child(5) {
    --defaultBackground:#5D9CEC;
  }
  .options .option:nth-child(6) {
    --defaultBackground:#AC92EC;
  }
  body .options .option.active {
    flex-grow: 10000;
    transform: scale(1);
    max-width: 600px;
    margin: 0px;
    border-radius: 40px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .options .option.active .shadow {
    box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
  }
  .options .option:not(.active) {
    flex-grow: 1;
    border-radius: 30px;
  }
  .options .option .shadow {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 120px;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  }
  /* ++MAIN NAV TITLES */
  .nav:hover {
    cursor: pointer;
    
  }
  /* ++START++ ABOUT ME SECTION */
  #whoamiContainer {
    width: min-content;
    overflow-y: scroll;
    border: double 9px;
    display: inline-block;
    font-family: 'Balthazar', serif;
    text-align: justify;
  }
  #whoamiContainer:hover {
    cursor: s-resize;
  }
  #myImgDiv {
    /* text-align: center; */
    display: flex;
  }
  #aboutPic {
    padding: 20px 35px 0px 26px;
    height: 20em;
    width: 18.5em;
    margin-bottom: .6em;
  }
  .infoCol{
    overflow: scroll;
    text-align: justify;
    margin-right: 25px;
    margin-left: 25px;
    /* border-left: solid 1px; */
  }
  .infoCol::first-letter {
    font-size: 260%;
  }
  .infoCol > span {
    position: relative;
    top: 76px;
  }
  #infoCard {
    display: inline-block;
    text-align: center;
    position: relative;
    bottom: 2.6em;
    left: 3.4em;
  }
  .infoHeader {
    border-top: solid 2px;
    border-bottom: dotted 2px;
    position: relative;
    bottom: 1em;
    text-align: center;
  }
  .blah {
   animation: blah 2s infinite;
   animation-direction: alternate;

  }
  @keyframes blah {
    0% {font-size: 2em;}
    50% {font-size: 4em;}
    100% {font-size: 5em;}
  }
  .blah2{
animation: blahblah 2s infinite;
animation-direction: alternate;
  }
  @keyframes blahblah {
    0% {font-size: 6em;}
    50% {font-size: 4em;}
    100% {font-size: 2em;}
  }
  
  #poserCard {
    left: 12%;
    bottom: 6em;
    position: relative;
    font-family: 'Balthazar', serif;
    color: white;
  }
  #aboutForm {
  left: 4em;
    width: 80%;
    position: relative;
  }
  #infoSubmit {
    border-radius: 70%;
    top: 11em;
    right: 13em;
    background-color: white;
    color: black;
  }
  #infoSubmit:hover{
    background-color: pink;
  }
  .character-counter {
    display: none;
  }
  #WMTS {
    background: linear-gradient(ghostwhite, darkcyan, #ffffff);
  }
  #earlyWork{
    background-color: #ffffff;
  }
  /* xxENDxx ABOUT ME SECTION */

  /* ++START++ WHAT I KNOW SECTION */
  #whatiknowContainer {
    width: min-content;
    background-image: url(../../images/gameGrass.jpg);
    cursor: url(../../images/smash.png), auto;
    border: inset 6px pink;
  }
  #logos {
    z-index: 1;
  }
  .floatOne {
    position: relative;
    animation-name: floatOne;
    animation-duration: 20s; 
}
    @keyframes floatOne {
        0%   {left:20%; top:20%;}
        25%  {left:1%;  top:30%;}
        50%  {left:16%; top:7%;}
        75%  {left:1%; top:10%;}
        100%  {left:11%; top:90%;}
  }
  .floatTwo {
    position: relative;
    animation-name: floatTwo;
    animation-duration: 20s; 
}
    @keyframes floatTwo {
        0%   {left:30%; top:30%;}
        25%  {left:1%;  top:30%;}
        50%  {left:26%; top:15%;}
        75%  {left:2%; top:10%;}
        100%  {left:12%; top:4%;}
    }
    .floatThree {
      position: relative;
      animation-name: floatThree;
      animation-duration: 20s; 
  }
 
      @keyframes floatThree {
          0%   {left:1%; top:88%;}
          25%  {left:19%;  top:30%;}
          50%  {left:1%; top:15%;}
          75%  {left:12%; top:10%;}
          100%  {left:4%; top:71%;}
      }
#table {
  position: sticky;
  width: 100%;
  table-layout: fixed;
  background: white;
  border: double 2px;
  font-family: 'Press Start 2P', cursive;
  font-size: .7em;
}
      /* xxENDxx WHAT I KNOW SECTION */

  /* /* ++START++ WHAT I DO  */
#whatidoContainer {
width: min-content;
    overflow-x: scroll;
    text-align: center;
    padding: 51px 32px;
  }
  #whatidoContainer:hover {
    cursor: ew-resize;
  }
  .poster {
width: 12em;
box-shadow: -12px 10px 30px;
/* position: relative; */
  }
  #takenotePoster {
    float: left;
  }
  #dinofiiPoster {
    position: relative;
    left: 13em;
    bottom: 22.3em;
  }
  #trainPoster {
    position: relative;
    position: relative;
    left: 26em;
    bottom: 44.6em;
  }
  #hangbirdPoster {
    position: relative;
    left: 39em;
    bottom: 66.9em;
  }
  #anotherPoster {
    position: relative;
    left: 52em;
    bottom: 89.1em;
  }
  .carousel {
    width: auto;
  }
  .carousel-item {
    text-align: center;
  }
  .carImg {
    height: 200px;
    border-radius: 50%;
  }
  .modButtOne {
    border-radius: 50%;
    background-color: pink;
    top:-1;
  }
  .modal-close {
    background-color: pink;
    border: solid 1px;
    box-shadow: 2px 2px 6px;
  }
  #dinoModal {
  padding-top: 20%;
  position: relative;
  bottom: 7em;
  text-align: center;
  }
  .modalNote {
    height: 30em;
  }
  .modalBird {
    box-shadow: 2px 2px 4px pink;
  }
  #birdModal {
    background-image: url('../../images/feathers.png');
  }
  #modal3 {
    background-image: url('../../images/pTrainBg.png');
  }
  /* POTTY TRAIN STORY */
  .trainStory {
  display: inline-block;
  }
  #pottyTrain {
    width: 60%;
  font-family: 'Dawning of a New Day', cursive;
  font-size: 2.3em;
  background-color: ghostwhite;
  box-shadow: 7px 12px 11px darkgrey;
  }
  #pin {
    width: 6em;
    position: absolute;
    top: -1em;
  }
  #pin2 {
  width: 6em;
  position: absolute;
  top: 71em;
  right: 25em;
  }
  .pinPhoto {
    transform-style: preserve-3d;
  transform: rotate(12deg);
  box-shadow: 2px 2px 10px;
  }
  /* xxENDxx WHAT I DO SECTION AND CODE */

      /* ++START++ SOCIAL ICON SECTION */
#icons {
  position: relative;
  left: 72%;
  bottom: 8em;
}
.clickIcon{
  height:50px;
  width:50px;
}
.brutIcon{
  height:50px; 
  width:50px;
}
.clickIcon:hover {
  border-radius: 50%;
  box-shadow: 2px 2px 6px inset pink;
  cursor: pointer;
}
#custom {
  height: 57px;
    position: absolute;
    display: inline-block;
    font-family: 'Dawning of a New Day', cursive;
    color: #000;
}
#musakButtonOn {
  display: block;
  position: fixed;
  left: 41%;
  box-shadow: 2px 2px 2px;
}
#musakButtonOff {
  display: block;
  position: fixed;
  left: 41%;
  box-shadow: -2px 2px 2px;
}
#modal4 {
  background: linear-gradient(to left, #775fd9, #fa19b8 50%, #eee 75%, #fff 75%);
}
/* xxENDxx SOCIAL ICON SECTION */

/* ++ MEDIA ++ */
@media screen and (max-width: 1120px) {
  #icons {
    left: 67%;
}
}
@media screen and (max-width: 900px) {
  .nav {
    font-size: 2.17em;
  }
}
@media screen and (max-width: 780px) {
  body .options {
  min-width: 550px;
}
body {
  padding-top: 6%;
  overflow-y: scroll;
}
}
@media screen and (max-width: 700px) {

  body .options {
  min-width: 500px;
}
#whoamiContainer{
  width: 80vw;
}
}
@media screen and (max-width: 638px) {
    body .options {
      min-width: 410px;
    }
    body .options .option:nth-child(4) {
      display: none;
    }
    body {
      padding-top: 0em;
      overflow-y: scroll;
    }
    #whoamiContainer{
      width: 80vw;
    }
    #icons {
      position: absolute;
    left: 26%;
    top: 52em;
    }
    #aboutForm {
      width: 100%;
    }
    
  }
  @media screen and (max-width: 558px) {
    body .options {
      min-width: 90vw;
    }
    body .options .option:nth-child(3) {
      display: none;
    }
    #icons {
      position: absolute;
      left: 7%;
      top: 51em;
    }
    body {
      padding-top: 5em;
      background-position-x: 14em;
    background-position-y: -1em;
    overflow-y: scroll;
    }
    #infoSubmit {
      top: 23em;
    right: 5em;
    }
    #aboutForm {
      width: 125%;
    }
  }

  @media screen and (max-width: 478px) {
    #whoamiContainer{
      width: 80vw;
    }
  }
  #whoamiDiv {
    font-family: 'Federo', sans-serif;
  }
  #whatiknowDiv {
    font-family: 'Federo', sans-serif;
  }
  #whatidoDiv {
    font-family: 'Federo', sans-serif;
  }
#sketchbookDiv {
  font-family: 'Federo', sans-serif;
}