
* {
  box-sizing: border-box;
}

/**************************************/
@media (min-width: 700px) {
  .wrapper {
    overflow: hidden;
  }
  .wrapper > * {
    float: left;
    padding: 0em 0em;
  }
}

@media (min-width: 700px) { 
  .contacts {
    width: 20%;
  }
}

@media (min-width: 700px) {
  .form {
    width: 80%;
  }
}


form {
  display: grid;
  float: left;
  width: 100%;
  font-size: 90%;
  font-family: 'Shadows Into Light', cursive;
  color: blue;
}
form p:not(:nth-child(6n)) {
  margin-right: 3%;
  text-align: center;
}

a {font-family: 'Shadows Into Light', cursive; font-size: 200%; color: black; }

form p:last-child    { clear: both; grid-column: 3 / 5; font-size: 170%; }
form p:nth-child(1)  { clear: both; grid-column: 5 / 6; margin-left: 10%; width: 80%; }
form p:nth-child(2)  { clear: both; grid-column: 6 / 7; }
form p:nth-child(6)  {                                  margin-left: 10%; width: 80%; }
form p:nth-child(7)  {                                  margin-left: 10%; width: 80%; }
form p:nth-child(9)  { clear: both; grid-column: 1 / 3; }
form p:nth-child(11) { clear: both; grid-column: 4 / 6; }
form p:nth-child(12) { text-align: center; }
form p:nth-child(13) { clear: both; grid-column: 1 / 3; width: 97%; }
form p:nth-child(18) { clear: both; grid-column: 1 / 3; width: 97%; text-align: center; }
form p:nth-child(24) {                                  width: 97%; }
form p:nth-child(26) { clear: both; grid-column: 4 / 6; }
form p:nth-child(28) { clear: both; grid-column: 1 / 5; grid-row: 1/2;}

body {
  padding: 1rem;
}

.wrapper {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.wrapper > * {
  padding: 1em;
}

ul {
  list-style: none;
  padding: 0;
}


form label {
  display: block;
}

button,
input,
textarea {
  padding: 0em;
  font-size: 100%;
  font-family: 'Shadows Into Light', cursive;
}

button {
  background: greenyellow;
  width: 100%;
  border: 0;
  box-shadow: 9px 9px 0 0; 
}
button:hover, button:focus {
  background: skyblue;
  outline: 0;
  box-shadow: 0 0 0 0; 
  margin-left: 9px;
  margin-top: 9px;
}

.contain {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;

}
@media (min-width: 600px) {
  .contain {
    padding: 0;
  }
}

h3,
ul {
  margin: 0;
}

h3 {
  margin-bottom: 1rem;
}

input:focus,
textarea:focus {
  outline: 3px solid gold;
}

input,
textarea,
button { height: 105%; 
  width: 100%;
  border: 1px solid #000;
  border-radius:.5rem .5rem .5rem .5rem;
}



.forma02   { border:3px solid #424242; border-radius: 1rem 1rem 1rem 1rem; width:700px; background: greenyellow;
             height:270px; text-align: center; font-size:20px;  box-shadow: 10px 10px 0px 0px;
             display:inline-block; position:absolute; overflow:auto; top:120px; left:300px; 
             font-family: 'Shadows Into Light', cursive; color: black;} 

.forma02 h1    { position:absolute; left:65px;  top:25px;                  }
.forma02 h2    { position:absolute; left:47px;  top:95px;  font-size:30px; }
.forma02 h3    { position:absolute; left:47px;  top:185px; font-size:30px; }
.forma02 a     { position:absolute; left:210px; top:180px; font-size:40px;  
                 box-shadow: 7px 7px 0px 0px; 
                 width:200px; background:white; border-radius: 1rem 1rem 1rem 1rem; }
.forma02 a:hover  { left:215px; top:185px; box-shadow: 2px 2px 0px 0px;}

