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

    * {
        padding : 0;
        margin : 0;
        font-family: helvetica;
        box-sizing: border-box;
    }
    
    body {
        background : white;
        color : black;
        width: 100%;
        height: 100vh;
        font-size: 0.9em;
    }


    .loader{
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-content: center;
    }

    
    .loader h1{
        position: fixed;
        top: 20%;
        left: 10%;
        width: 80%;
        margin: auto;
        background:  linear-gradient(to right, #56ccf2,#2f80ed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 16px;
        text-align: center;
    }


    .loader img{
        width: 50%;
        height: 50%;
        position: fixed;
        top: 30%;
        left: 25%;
    }
    
    .loader.hidden{
        animation: fadeOut 2s;
        animation-fill-mode: forwards;
    }

    @keyframes fadeOut {
		100%{
			opacity: 0;
			visibility: hidden;
		}
	}
	
    


    
    body .p1{
        text-align: center;
        font-size: 15px;
    }

    
    body .h1{
        text-align: center;
        font-size: 16px;
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: white;
        padding: 1%;
        margin-bottom: 2%;
    }



    #MainBody{
        display: block;
        width: 100%;
        background:  white;
    }


    #MainContainer{
        display: block;
        width: 100%;
        padding: 0%;
        background:  black;
        color: white;
    }


    #MainContainer .instructionsBar{
        cursor: pointer;
        width: 100%;
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: white;
        display: block;
        padding: 1%;
    }

    .fa-bars{
        color: black;
        position: relative;
        left: 58%;
        width: 10%;
        font-size: 15px;
        text-align: right;
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: white;
        padding: 1%;
        text-align: center;
        }
        


    #MainContainer .instructions{
        width: 100%;
        height: 100px;
        display: block;
        transition: height 1.5s;
        overflow: hidden;
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: white;
    }

    #MainContainer .instructions li{
        width: 93%;
        margin-left: 7%;
        padding: 2%;
    }








    #container{
        display: block;
        width: 100%;
        background-color: black;
        color: white;
    }

    .substrate{
        display: block;
        width: 100%;
        background: black;
        color: white;
        border: 1px solid white;
        padding: 1%;
    }

    .substrate h1{
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: white;
        width: 100%;
        margin: auto;
        font-size: 1em;
    }
    





    .velocity{
        display: block;
        width: 100%;
        background: black;
        color: white;
        border: 1px solid white;
        padding: 1%;
    }

    .velocity h1{
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: white;
        width: 100%;
        margin: auto;
        font-size: 1em;
    }



    #result{
        display: flex;
        width: 100%;
        background-color: black;
        color: white;
    }


    .REcV{
        width: 50%;
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: white;
        border: 5px solid black;
        
    }

    .REcV h1{
         border: 1px solid yellow;
         font-size: 14px;
         border: 1px solid white;
         color: black;
    }

    .REcS{
        width: 50%;
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: white;
        border: 5px solid black;
    }

    .REcS h1{
        border: 1px solid yellow;
        font-size: 14px;
        border: 1px solid white;
        color: black;
   }

        .slopee{
            padding: 2%;
            width: 50%;
            display: block;
            margin: auto;
            margin-top: 4%;
            margin-bottom: 4%;
            background:  linear-gradient(to right, #2f80ed, #56ccf2);
            color: white;
        }

        .showSlope{
            background:  linear-gradient(to right, #2f80ed, #56ccf2);
            color: white;
            margin-bottom: 5%;
            text-align: center;
        }









   
   #GraphContainer{
    width: 100%;
    display: block;
    background:  linear-gradient(to right, #2f80ed, #56ccf2);
    padding: 2%;
}

#GraphContainer #Gtext{
    background: white;
    color: #2f80ed;
    text-align: center;
    border: 1px solid black;
    font-size: 16px;
    width: 100.4%;
    display: block;
}


#GraphContainer #graph{
    width: 100%;
    background:  white;
    border: 1px solid black; 
    display: none;
}


}