*
{
box-sizing: border-box;
transition: .2s;
}

html
{
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

body
{
background-color: #deded8;
margin: 0;
}

body, input, textarea
{
color: #3e3e45;
font: italic 25px/1.1 "Zilla Slab", serif;
letter-spacing: -0.15px;
}

*::selection
{
background-color: #212026;
color: #deded8;
}

a
{
color: #cc4526;
font-weight: 900;
font-style: normal;
text-decoration: underline 0px #cc4526;
}

a:hover
{
text-decoration: underline 3px #de842d;
}

#wrapper
{
display: flex;
justify-content: space-between;
gap: 3.5vw;
width: 87vw;
margin: 0 auto;
}

#slash
{
background: url(slash.png) no-repeat center;
background-size: 100%;
position: sticky;
top: 0;
height: 100vh;
width: 120%;
}

#content
{
max-width: 43.5vw;
}

header
{
background: url(title.png) no-repeat left;
background-size: contain;
width: 100%;
height: 5.6rem;
margin-top: 10vh;
margin-left: -3rem;
}

header b
{
visibility: hidden;
}

#intro
{
margin-top: .75rem;
width: 105%;
}

p#methods
{
font-size: 1.2rem;
}

b#address
{
text-wrap: nowrap;
font-style: normal;
font-weight: normal;
background-color: #c2cdc9;
line-height: 1;
display: inline-block;
padding: 0 .75rem;
}

/* FORM */

form
{
margin-top: 4rem;
}

label
{
display: block;
color: #6b7a73;
font-style: normal;
font-weight: 300;
padding-left: 1.25rem;
font-size: .9em;
 letter-spacing: 0;
}

input, textarea
{
width: 100%;
background-color: transparent;
border: 1px solid;
padding: .5rem 1rem;
font-size: 1.2rem;
}

input
{
margin-bottom: 1rem;
}

textarea
{
height: 14rem;
}

input:hover, textarea:hover
{
background-color: #cad5d1;
}

input:focus, textarea:focus
{
background-color: #c2cdc9;
outline: 0;
}


#submit-wrapper
{
display: flex;
justify-content: end;
}

input#submit
{
background-color: #cc4526;
color: #fff;
font-weight: bold;
font-size: 1.5rem;
font-style: normal;
border: 0;
width: 30%;
cursor: pointer;
}

input#submit:hover
{
background-color: #de842d;
}

input#submit:active
{
transform: translateX(2px) translateY(2px);
}

p.error, p.success
{
font-weight: bold;
padding: .5rem 1rem;
text-align: center;
font-style: normal;
font-size: 1.4rem;
}

p.error
{
background: #000;
color: #cc4526;
}

p.success
{
background-color: #cc4526;
color: #fff;
}

/* FOOTER */

footer
{
font-size: 1rem;
border-top: 1px solid;
margin-top: 6rem;
opacity: .7;
}

footer h3
{
display: inline;
font-size: 1rem;
background-color: #c2cdc9;
padding: 0 1rem;
}

footer i
{
font-style: normal;
}

/* ANIMATIONS */

.fade-in{animation:fade-in .3s cubic-bezier(.39,.575,.565,1.000) both}

/* ----------------------------------------------
 * Generated by Animista on 2026-7-1 10:21:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

.slide-in-left {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-7-2 15:56:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}



/* RESPONSIVITY */


@media all and (max-width: 950px)
{
#wrapper
{
display: revert;
}

#slash
{
position: revert;
height: 60vh;
width: auto;
margin-top: 2rem;
background-size: contain;
}

#content
{
margin: 0 auto;
max-width: revert;
}

header
{
margin-left: 0;
margin-top: 2rem;
background-size: contain;
background-position: center;
}

}

@media all and (max-width: 500px)
{
body
{
font-size: 20px;
}

#slash
{
height: 35vh;
}
}