@media screen and (max-width: 600px) {
    .topnav {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .topnav a {
      display: block;
      margin: 0;
    }
    .topnav .icon {
      display: none;
    }
  }


/* Add a black background color to the top navigation */
.topnav {
    background-color: #00102E;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin: 0 auto;
    width: 20%;
    left: 40%;
    position: fixed; */
    max-width: 100%;
  
    
   
   
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
   


    float: left; 

    display: block;
   


    color: #f2f2f2;
    text-align: center;
    padding: 14px 46px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    /* background-color: #1bc587; */
    /* color: white; */
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }

/*until here nav bar*/









* {
    box-sizing: border-box;
}
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background: rgb(60, 126, 201);
}

.vbox {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /* align-items: sch; */
    color: white;
    padding-block: 15%;
    text-align: center;
    
}

p {
    padding: 0 6%;
}

button {
    background:rgb(248, 233, 26);
    border: 4px solid white;
    border-radius:1em;
    font-size:24px;
    padding:1em 3em;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}

button:hover {
    background: rgb(223, 187, 30);
    color: white;
    font-size: 34px;
} */

/* 

body{
    background:rgb(68, 142, 226);
    
    
}

#para {
    margin-top: 30%;
    

}

p { 
    text-align: center;
    color:white;
    
}

button{
    background:white;
    border: 4px solid white;
    border-radius:1em;
    font-size:24px;
    padding:1em 3em;
    /*CSS center element trick*/
        /* position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: 
        translate(-50%, -50%);
    transform: 
        translate(-50%, -50%);
    -webkit-transition-property: 
        all;
    -webkit-transition-duration:
        1s;
    -webkit-transition-timing-function:
        ease-out;
    transition-property: 
        all;
    transition-duration:
        1s;
    transition-timing-function:
        ease-out;
}

button:hover{
    background:green;
    color:white;
    font-size:34px;
    /*the previous padding:1em 3em; is what enlarges the element on hover ***note that the unit em translates to the size of your font. example: font=24px then 1em = 24px*/
/* } */ */ */