styles.css

/* To style the background and ensures that the font size is all the same */ 
html {    
  box-sizing: border-box;
  background: #6a0d83;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
  font-size: 20px;
  font-weight: 200;
}

/*To set the padding and margin of the body*/
body {          
  margin: 0;
  padding: 0;
}

/*Properties of Root container*/

.container {        
  display: flex;
  position: relative;
  background: url(Images/photo-1549309019-a1d77aeae74f.jpg) top center no-repeat;
  background-size: auto;
  width: 100%;
  flex-direction: column;
  align-items: top;
  z-index: 0;
}

/*Properties of sub container-01*/
.header 
{
  display: flex;
  background-color: black;
  flex-direction: row;
  align-items:center;
  width: 100%;
  justify-content: center;
  height: 20vh;
  z-index: 1;
}

h1 {
  margin: 12px 20px;
  padding: 12px 20px;
  color:white;
  font-size: 36px;
  font-weight: 200;
}

/*Properties of sub container-02*/
.button{  
  display: inline-block;
  z-index: 2;
  padding: 12px 20px;
}

#btn{

  padding: 12px 24px;
  background-color: black;
  height: 40%;
  border-radius: 24px;
  font-size: 20px;
 
}

/*Properties of Form */
form select
{
  padding: 12px;
  font-size: 20px;
  color: white;
  background-color: transparent;
  border-radius: 24px;
  height: 60%;
}

form button {
  padding: 12px;
  font-size: 20px;
  color: white;
  background-color: transparent;
  border-radius: 24px;
  height: 60%;
}

/* Colors */
.purple{
  background: #6a0d83;
}

.black {
  background: black;
}*/

/*Animation*/

#sandbox{
  height: 0;
  display: flex;
  width:100%;
}

/* Shape gallery */


@media screen and (min-width: 600px) {
  .flex-container {
    flex-direction: row;
  }
}
.shape {
  width: 5rem;
  transition: all 0.4s;
}

/*Kite shape

.kite {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid black;
  bottom: 150px; 
  left: 520px;
  position: relative;
}

.kite:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid black;
  z-index: -1
}*/

/*Second form properties */

#enter-state{
  margin: 20px;
  align-items: baseline;
  justify-content: center;
  padding-left: 360px;
}

#state {
  background-color: gray;
}

textarea{
  padding: 2px;
  height: 20px;
  background-color: gainsboro;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
  font-size: 20px;
  font-weight: 200;
  text-align: center;
}