html {
height: 100%;
}
body {
  background-color: whitesmoke;
  max-width: 1200px; 
  margin: 0 auto;
  background: linear-gradient(rgb(214,220,229), rgb(32,56,100) 65%, rgb(191,191,191) 90%); 
  font-family: Nyala;
}
.wrapper {
  display: flex ;
  align-items: center;
  justify-content: center;
  /* border-bottom: 2.5px solid #FFCBA4; 
   border-style: ridge; */
  animation: TransitionIn 1.25s;
}
.a {
  color: whitesmoke;
  align-items: center;
  text-align: center;
  padding: 2.5vw 0vw 0vw 1vw;
  height: 25vw;
  }
.b {
  align-self: flex-end;
  align-items: center;
  padding: 5vw 0vw 0vw 0vw;
}
.c {
  padding: 1vw 1.75vw 0vw 1.75vw;
  align-items: center;
  text-align: center;
 }
.d {
  text-shadow: 0.05vw 0.05vw rgb(168, 100,0);
  text-align: center;
  height: 4vw;
  border-top: 0.05vw solid whitesmoke;
 }
.mail-form {
  flex: auto;
  font-size: 1.2vw;
  color: whitesmoke;
  display: inline-block;
  align-self: center;
  padding: 5px;
  min-width: 65%;
}
.icon-bar {
  position: fixed;
  top: 2.5%;
  -webkit-transform: translateY(-2.5%);
  -ms-transform: translateY(-2.5%);
  transform: translateY(-2.5%);
}
.icon-bar a {
  /* display: block; */
  text-align: center;
  padding: 20px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
} 
a:link, a:visited {
  font-size: 1vw; 
  color:  whitesmoke;
  padding: 0.1vw; 
  text-align: center;
  text-decoration: none;
  text-shadow: 0.05vw 0.05vw rgb(168, 100,0);
  transition: all .2s;
}
a:hover, a:active {
  color:whitesmoke;
  font-weight: bold;
  text-shadow: 0.05vw 0.05vw goldenrod;
}
.animate-in {
    -webkit-animation: fadeIn 2s ease-in;
    animation: fadeIn 2s ease-in;
}
.animate-out {
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}
h {
	color: whitesmoke;
	font-size: 2.75vw;
	font-style: bold;
	text-shadow: 0.1vw 0.1vw rgb(168, 100,0);
}
h1 {
	font-size: 1.45vw;
	font-style: italic; 
	text-shadow: 0.15vw 0.15vw rgb(168, 100,0);
}
h2 {
	font-size: 1.5vw;
    font-style: bold;
    color: whitesmoke;
	font-style: italic; 
    text-align: center;
}
p {
	font-size: 2.25vw;
	color: whitesmoke;
	text-shadow: 0.5px 0.5px MidnightBlue; 
	text-align: center;
}
p1 {
	font-size: 1vw;
	text-shadow: 0.15vw solid rgb(168, 100,0);
	text-align: center;
}
p2  {
	font-size: 0.75vw;
	font-style: bold;
	color: whitesmoke;
	text-shadow: 0.5px 0.5px MidnightBlue; 
	text-align: center;
}
ul.a {
  list-style-type: square;
  column-count: 3;
  text-align: left;
  font-size: 1.25vw;
  color: whitesmoke;
  text-shadow: 0.5px 0.5px black;
}
ul.b {
  list-style-type: square;
  text-align: left;
  font-size: 1.5vw;
  color: #99431f;
  text-shadow: 0.5px 0.5px black;
}
.img {
  padding: 0.05vw;
}
input[type = "text"] {
	color: whitesmoke;
	background-color: transparent;
	border: none;
	font-size: 0.75vw;
}
input[type = "submit"] {
	color: Sienna;
	font-size: 0.75vw;
}
input[type = "reset"] {
	color: Sienna;
	font-size: 0.75vw;
}
input[type = "button"] {
	color: Sienna;
	font-size: 0.75vw;
}
textarea  {  
	color: Sienna;
	font-size: 0.75vw;
}
.responsive {
	height: auto;
	pading: 0.5vw;
	flex-direction: column;
}
@keyframes TransitionIn {
  from {
	  opacity: 0;
      transform: rotateX(-10 deg);
  }
  to {
	opacity: 1;  
    transform: rotateX(0);
  }
}
@media (max-width: 1024px) {
	.a, .b, .c, .d {
		flex: 1;
	}
}