/***** RESET *****/

h1, h2, h3, p, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style-type: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/***** SCROLL *****/

html {
    scroll-behavior: smooth;
}

/***** TYPOGRAPHY *****/

body {
    font-family: "Fredoka";
}

h1 {
    font-weight: 600; 
    line-height: 88.7px;
    font-size: 91.63px;
    text-transform: uppercase;
}

h2 {
    font-weight: 500;
    font-size: 24px;
    color: white;
}

main p {
    font-weight: 600; 
    font-size: 91.63px;
    color: #EFEFEF;
}

form label {
    font-weight: 400;
    font-size: 18px;
}

form {
    font-weight: 400;
    font-size: 15px;
}

input[type=text] {
    font-size: 1.1em;
}

button {
    color: white;
    font-size: 18px;
    font-weight: 500;
}

input:focus {
    outline-color: #D3212A;
}

#madlibs-output p {
    font-weight: 400;
    font-size: 19.22px;
    color: black;
}

footer {
    font-size: 1.1em;
}

/***** IMAGE POSITIONING *****/

.parent {
    position: relative;
    top: 115px;
    left: 95px;
}

.image1 {
    position: relative;
    top: 45px;
    left: 0;
}

.image2 {
    position: absolute;
    top: -95px;
    left: 0;
}

.parent3 {
    position: relative;
    top: 0;
    left: 0;
}

.image3 {
    position: relative;
    top: 0;
    left: 0;
}

.image4 {
    position: absolute;
    top: 135px;
    left: 20px;
}

/***** ? POSITIONING *****/

.parent2 {
    position: relative;
    top: -280px;
    left: 0px;
  }

#float1 {
    animation: floatAnimation1 10s infinite ease-in-out;
    transform: rotate(1.892deg);
}

#float2 {
    animation: floatAnimation2 10s infinite ease-in-out;
    transform: rotate(-3.03deg);
}

#float3 {
    animation: floatAnimation3 10s infinite ease-in-out;
    transform: rotate(17.479deg);
}

#float4 {
    animation: floatAnimation4 10s infinite ease-in-out;
    transform: rotate(-21.451deg);
}

@keyframes floatAnimation1 {
	0% { transform: translate(0%, 90%); }
	50% { transform: translate(0%,110%); }
	100% { transform: translate(0, 90%); }
}

@keyframes floatAnimation2 {
	0% { transform: translate(52%, 0); }
	50% { transform: translate(52%, 20%); }
	100% { transform: translate(52%, 0); }
}

@keyframes floatAnimation3 {
	0% { transform: translate(96%, -320%); }
	50% { transform: translate(96%, -300%); }
	100% { transform: translate(96%, -320%); }
}

@keyframes floatAnimation4 {
	0% { transform: translate(53%, 0); }
	50% { transform: translate(53%, 20%); }
	100% { transform: translate(53%, 0); }
}

/***** ELEMENTS *****/

body {
    width: 1200px;
    height: 750px;
    margin: auto;
    overflow-x: hidden;
}

h1 {
    padding-top: 75px;
    padding-left: 70px;
}

h2 {
    border-radius: 14.606px 14.606px 0px 0px;
    background-color: #D3212A;
    padding: 20px 41px;
    text-align: center;
}

#madlibs-input {
    width: 395px;
    position: relative;
    top: -648.5px;
    left: 745px;
}

#madlibs-input form {
    display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
    border-radius: 0px 0px 14.606px 14.606px;
    border: 4.869px solid #D3212A;
    padding: 27px 35px;
    background-color: white;
}

form label {
    display: block;
    padding-bottom: 7px;
}

input[type=text] {
    background-color: #D9D9D9;
    border-radius: 3px;
    border: 2px solid #777777;
    padding: 4px;
    width: 136px;
}

button {
    border-radius: 10.723px 10.723px 10.726px 10.726px;
    background: #777777;
    border: none;
    padding: 12px 15px;
    width: 180px;
    margin-top: 10px;
    float: right;
}

button:hover {
    background-color: #3b3b3b;
}

#madlibs-output {
    width: 280px;
    background-color: white;
    border-radius: 17.295px;
    border: 4.804px solid #D3212A;
    padding: 29.79px 30.41px;
    position: relative;
    top: -540px;
    left: 800px;
}

em {
    color: #D3212A;
    font-style: normal;
}

footer {
    text-align: center;
    padding-bottom: 25px;
}

/***** IMAGE4 WIGGLE ANIMATION *****/

@keyframes wiggle {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(-0.5deg); }
    20% { transform: rotate(0.5deg); }
    30% { transform: rotate(-0.25deg); }
    40% { transform: rotate(0.25deg); }
    50% { transform: rotate(0deg); }
    60% { transform: rotate(-0.25deg); }
    70% { transform: rotate(0.25deg); }
    80% { transform: rotate(-0.5deg); }
    90% { transform: rotate(0.5deg); }
    100% { transform: rotate(0deg); }
  }
  
.image4 {
    animation: wiggle 1s infinite ease-in-out;
    transition: transform 0.1s;
}

/****** RESPONSIVE *****/

/* Phone */
/* @media screen and (max-width: 480px) {

} */

/* Tablet */
/* @media screen and (min-width: 480px) and (max-width: 768px) {

} */

/* Smaller Desktop */
/* @media screen and (min-width: 768px) and (max-width: 1040px) {

} */