/* Setting global parameters for various sections of document */
body {
  background-color: #C6C3CF; 
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px;
}


/* Style the header */
.header {
  background-color: #472E7A; /*#2D1970; */
  color: #040404; /*#0D0B13; */
  padding: 40px;
  text-align: center;
  font-size: 18px;
}


/* Create three unequal columns that floats next to each other */
.container {
  display: table;
  width: 100%;
  float: left;
}

/* Left and right column */
.col-X {
  display: table-cell;
  width: 30%;
  background-color:#E4E0F1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18;
  padding-left: 20px;
  padding-right: 20px;
  padding-top:50px; 
}

/* Left and right column */
.col-Y {
  display: table-cell;
  width: 70%;
  background-color: #A89CCF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18;
  color: black;
  position: top;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  vertical-align: top;
}

.col-L {
  float: left;
  width: 30%;
  margin-top: 6px;
  text-align: center;
  font-weight: bold;
}

.col-R {
  float: left;
  width: 70%;
  margin-top: 6px;
}  


img {
  width: 100%;   /* 80%  if self image */
  height: 120%; /*  50%  if self image */
  position: center;
  padding-top: 10px;
  /* padding-left: 10%; if self image */
} 

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


@media screen and (max-width: 600px) {
  .column.left, .column.right {
    width: 100%;
  }
}

 
/* Input box information  */

input[type=text],input[type=email], textarea {
  width: 50%; /* changed from 100% */
  padding: 12px;
  border: 1px solid red;
  border-radius: 4px;
  resize: vertical;
}

input[type=default] {
  width: 10%; /* changed from 100% */
  padding: 5px;
  border: 1px solid red;
  border-radius: 4px;
}


label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  color: black;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;  /* change from right */
}

input[type=submit]:hover {
  background-color: #45a049;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-L, .col-R, .col-X, .col-Y,  input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

 
/* img {
  width: 80%;
  height: 80%;
  position: center;
  padding-top: 10px;
} */