<style type="text/css">
/* ------------------------------------------------------------------------- */
html, body {
  width: 100%;
  height:100%;
}
/* ------------------------------------------------------------------------- */
html::-webkit-scrollbar {
  width: 7px;
}
html::-webkit-scrollbar-thumb {
  background: blue; 
  border-radius: 20px;
}
html::-webkit-scrollbar-track-piece {
  background-color:transparent;
}
html::-webkit-scrollbar-thumb:hover {
  background: black; 
}
/* ------------------------------------------------------------------------- */
body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    background-attachment: fixed;
}
/* ------------------------------------------------------------------------- */
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.7);
  transition: 0.3s;
  text-align: center;
  border-radius: 5px;
  width: 300px;
  height: 220px;
  padding: 5px 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.7);
}
/* ------------------------------------------------------------------------- */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}
.row {margin: 0 -5px;}
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
/* ------------------------------------------------------------------------- */
.bottom{
    position: relative;
    bottom: 0px;
}
.topright {
  position: absolute;
  top: 0px;
  right: 5px;
}
.bottomleft {
  position: absolute;
  bottom: -12px;
  left: 0px;
}
.bottomright {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
/* ------------------------------------------------------------------------- */
.bouncy{
 animation:bouncy 5s infinite linear;
 position:relative;
}
@keyframes bouncy {
 0%{top:0em}
 40%{top:0em}
 43%{top:-0.9em}
 46%{top:0em}
 48%{top:-0.4em}
 50%{top:0em}
 100%{top:0em;}
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* ------------------------------------------------------------------------- */
#title{
  font-family: 'Waiting for the Sunrise', cursive; 
  font-size:30px; 
  margin: 10px 50px; 
  letter-spacing: 3px; 
  font-weight: bold;
}
/* ------------------------------------------------------------------------- */
	body,h1 {font-family: "Raleway", sans-serif}
/* ------------------------------------------------------------------------- */
</style>
