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

    * {
        padding : 0;
        margin : 0;
        font-family: helvetica;
        box-sizing: border-box;
        font-size: 1em;
    }
    
    body {
        background : white;
        color : black;
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
        font-size: 1em;
        display: block;
        padding: 5%;
        background:  linear-gradient(to right, #56ccf2,#2f80ed);
        background-size: cover;
    }

    .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: 15%;
        width: 70%;
        margin: auto;
        background:  linear-gradient(to right, #56ccf2,#2f80ed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 20px;
        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 .h1{
        text-align: center;
        font-size: 30px;
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: white;
        padding: 4%;
    }




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


    #MainContainer{
        display: block;
        width: 50%;
        padding: 0%;
        background:  rgb(40, 46, 48);
        color: white;
        padding: 2%;
    }





    #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: flex;
        width: 100%;
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
    }

    .substrate{
        display: block;
        width: 50%;
        background: white;
        color: black;
    }

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

    .substrate .inputSub{
        background-color: rgb(40, 46, 48);
        color: white;
        width: 100%;
        padding: 1%;
    }

    .inputSub::placeholder{
        text-align: center;
        color: white;
    }


    .velocity{
        display: block;
        width: 50%;
        background: white;
        color: black;
    }

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

    .velocity .inputVel{
        background-color: rgb(40, 46, 48);
        color: white;
        width: 100%;
        padding: 1%;
    }
    
    .inputVel::placeholder{
        text-align: center;
        color: white;
    }




    #result{
        display: flex;
        width: 100%;
        color: white;
        background:  linear-gradient(to right, #b2fefa, #0ed2f7);
    }

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

    .REcV h1{
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        color: black;
    }

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

    .REcS h1{
        background:  linear-gradient(to right, #2f80ed, #56ccf2);
        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;
        text-align: center;
   }




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

   #GraphContainer #Gtext{
        background: white;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        border: 1px solid black;
        font-size: 16px;
        width: 100.38%;
        display: block;
   }

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

}