style.css

h1 {
  font-family: 'Fredoka One', cursive;
  color: #874a11;
  text-align: center;
  font-size: 80px;
  margin-top: 50px;
  margin-bottom: 5px;
  animation: pulse 3s infinite;
}

h2 {
  font-family: 'Concert One', cursive;
  color: #532800;
  text-align: center;
  font-size: 40px;
}

h3 {
  font-family: 'Quicksand', cursive;
  font-weight: bold;
  color: #5BA14D;
  text-align: center;
  font-size: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
}

h4 {
  font-family: 'Quicksand', cursive;
  font-weight: normal;
  color: #874a11;
  text-align: center;
  font-size: 20px;
}

.scroll h4 {
  margin-top: 5px;
  margin-bottom: 5px;
}

p {
  line-height: 25px;
}

li::marker {
  font-size: 45px;
  padding-bottom: 4px;
  animation: bounce 1s infinite;
}

li span {
  font-size: 16px;
  animation: none;
  }

ul {
  margin: 25px;
  list-style-image: url('banana.svg');
}

body {
  font-family: 'Quicksand', cursive;
  margin: 0;
  padding: 0;
  background: rgb(255, 252, 236);
}

input {
  margin-top: 7.5px;
  width: 50px;
}

.topnav img {
  width: 3rem;
  padding-right: 5px;
  padding-left: 5px;
  float: right;
}

.information img {
  padding-left: 20px;
  width: 15rem;
  float: right;
}

.instructions img {
  width: 20rem;
}

.stocks img {
  width: 20rem;
}

#stockHeaderText {
  font-family: 'Concert One', cursive;
  color: rgb(195, 145, 91);
  text-align: right;
  font-size: 30px;
  position: relative; bottom: 100px;
}

#stockShower {
  animation: bounce 1s infinite;
}

div.scroll {
  margin: auto;
  padding: 4px;
  background-color: transparent;
  width: 335px;
  height: 24.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 5px;
  position: relative; right: 80px;
}

div[name="stockButton"] {
  font-family: 'Quicksand', sans-serif;
  margin-bottom: 5px;
  padding: 5px;
  color: rgb(83, 40, 0);
  background-color: #FFFCEC;
  text-align: center;
  width: 300px;
  height: 150px;
  border-radius: 5px;
  font-size: 18px;
}

.clear {
  clear: both;
}

.stats {
  float: right;
}

/*
#stockButton {
  font-family: 'Quicksand', sans-serif;
  margin-bottom: 5px;
  padding: 5px;
  color: rgb(83, 40, 0);
  background-color: #FFFCEC;
  text-align: center;
  width: 300px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #C3915B;
  border-radius: 10px;
  font-size: 18px;
}*/

.chartContainer {
  float: left;
  padding: 0 2rem 2rem 2rem;
}

button:focus {
  outline: none;
}

#buy {
  margin-left: 0px;
  font-family: 'Quicksand', sans-serif;
  color: white;
  width: 75px;
  height: 25px;
  border: none;
  border-radius: 10px;
  background-color: rgb(23, 119, 6);
  box-shadow: 0 4px rgb(12, 71, 2);
}

#buy:hover {
  outline: none;
  background-color: rgb(29, 146, 8);
}

#buy:active {
  outline: none;
  box-shadow: 0 1px rgb(12, 71, 2);
  transform: translateY(2px);
}

#sell {
  margin-right: 0px;
  font-family: 'Quicksand', sans-serif;
  width: 75px;
  height: 25px;
  color: white;
  border: none;
  border-radius: 10px;
  background-color: rgb(243, 194, 32);
  box-shadow: 0 4px rgb(206, 164, 25);
}

#sell:hover {
  outline: none;
  background-color: rgb(247, 213, 103);
}

#sell:active {
  outline: none;
  background-color: rgb(247, 213, 103);
  box-shadow: 0 1px rgb(206, 164, 25);
  transform: translateY(2px)
}

.topnav {
  background-color: rgb(139, 184, 68);
  box-shadow: 2px;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #FAF2A1;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: rgb(100, 158, 52);
  color: #FFD64B;
}

.hero img {
  width: 100%;
}

.information p {
  margin: 40px;
}

.information h3 {
  padding-top: 20px;
}

.information section {
  padding: 20px;
}

.information section:nth-child(odd) {
  background:#FAF2A1;
}

.forparents {
  background-color: #FAF2A1;
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.forparents p {
  margin: 40px;
}

.stockContainer {
  float: right;
  padding-top: 20px;
  padding-left: 20px;
  margin-right: 40px;
}

.stockContainer h3, h4 {
  padding-right: 15px;
  padding-bottom: 5px;
  text-align: right;
}

.stockContainer #capuchin h3 {
  font-size: 26px;
}

.userInfo {
  padding-left: 30px;
  float: left;
  width: 30rem;
  background-color: #f8f6de;
  border-radius: 10px;
  margin-left: 70px;
  box-shadow: 0 5px rgb(226, 222, 208);
}

.userInfo:hover {
  box-shadow: 0 5px rgb(226, 222, 208);
  animation: tilt 1s 1 alternate ease-out forwards;
}

.userInfo h2 {
  text-align: left;
  font-size: 28px;
  color: #5BA14D;
}

.userInfo h2 span {
  font-family: 'Quicksand', cursive;
  color: #874a11;
  font-size: 20px;
}

form {
  outline: none;
}

input {
  border: none;
  background-color: white;
  box-shadow:  inset 1px 1px 2px rgb(173, 163, 84), inset -3px -3px 6px white;
  border-radius: 8px;
  margin: 8px;
  padding: 3px;
}

input:focus {
  outline: none;
}

#monkeySoft, #apeBook, #alibaboon, #gorillaStop, #capuchin, #apeBNB {
  background-color: rgb(248, 246, 222);
  padding-bottom: 10px;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(2.5px);
  }

  to {
    transform: translateY(0px);
  }
}

@keyframes tilt {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(2deg);
  }
}

@media only screen and (max-width: 1060px) {

  .instructions .center {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  .information .center {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  .stocks .center {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}