html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

svg
{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* the notes */
svg path
{
    fill-opacity: 0;
    stroke: #000;
    stroke-width: 3;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
}

/* the lines */
svg line
{
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

/* music svg word */
.svg_music
{
    font-family: cursive;
    font-size: 100px;
}

/* the title (bethoven semphony 5) */
h1
{
  font-size: 45px;
  background: linear-gradient(to bottom, rgba(255, 153, 0,1) 0%,rgba(0,0,0,0) 100%);
    /*vmake the background transparent and just the text have the color*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*message rectangle */
.msg_rec
{
    opacity: 0;
    width: 937px;
    height: 78px;
    stroke: black;
    stroke-dasharray: 2800;
    stroke-dashoffset: 2800;
    stroke-width: 10;
    transition: stroke-dashoffset 5s linear;
    transition: 2s linear;
}

svg:hover .msg_rec
{
    opacity: 1;
    stroke-width: 2;
    stroke-dashoffset: 0;
    transition: 2s linear;
}

text
{
    font-size: 24px;
}

/*button */
input[type=button]
{
    background-image: url(../images/btn.png);
    background-color: rgba(0,0,0,0);
    border: none;
    position:fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: black;
    padding: 42px 85px;
    font-size: 15px;
    font-weight:  bold;
    outline: none;
    cursor: pointer;
}

@keyframes move
{
  to
    {
        stroke-dashoffset: 0;
    }
}