html {
    background: black;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

#canvas2 {
    filter: blur(1px);
}


.matrix_rain_refresh {
    position: fixed;
    margin-top: 0px;
    padding-top: 0px;
    height:58px;
   
}

.matrix_rain_toggle {
    position: fixed;
    margin-top: 0px;
    padding-top: 0px;
   height:58px;
}


/* Start of: Media Query Breakpoints */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
      .matrix_rain_refresh {
            text-align: left;
             height:60px;
            width: auto;
    }
    .matrix_rain_toggle{
        text-align: right;
        height:60px;
            width: auto;
     }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
      .matrix_rain_refresh {
            text-align: left;
    }
    .matrix_rain_toggle{
        text-align: right;
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
      .matrix_rain_refresh {
            text-align: left;
    }
    .matrix_rain_toggle{
        text-align: right;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .matrix_rain_refresh {
        text-align: left;
    }
    .matrix_rain_toggle{
        text-align: right;
     }
}

/* End of: Media Query Breakpoints */