@keyframes simplefade {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes titletotop {
    0% {margin-top:30vh;font-size:1cm;}
    100% {margin-top:5vh;font-size:0.5cm;}
}
@keyframes textotop {
    0% {margin-top:100vh;opacity:0;}
    100% {margin-top:0;opacity:1;}
}
@keyframes underline {
    0% {width: 0px; margin-left: 0px;}
    100% {width:240px;margin-left:-120px;}
}
@font-face {
    font-family: courgette;
    src: url(../fonts/courgette.ttf);
}
@font-face {
    font-family: robotoBold;
    src: url(../fonts/roboto-bold.ttf);
}
@font-face {
    font-family: roboto;
    src: url(../fonts/roboto-light.ttf);
}
body {
    /* overflow-x: hidden; */
    background-color:#FFF;
    width: 100%;
    margin: 0;
}
.title {
    text-align:center;
    font-family: robotoBold;
}
#holder {
    width:100%;
    position:relative;
    display:inline-block;
    margin-top:30vh;
    text-align: center;
    font-size:1cm;
    animation: titletotop 1s ease 1s forwards;
}
#holder:after {
    position:absolute;
    display:inline-block;
    bottom:3vh;
    width: 0px;
    height:4px;
    content: '';
    background-color: black;
    animation: underline 3s ease-out 2s forwards;
}
#data {
    padding:15px;
    box-sizing: border-box;
    width: 90vw;
    max-width:600px;
    margin:auto;
    opacity:0;
    animation: textotop 1s ease 1s forwards;
}
#data *{
    font-size:0.5cm;
    line-height:1.4;
    font-family:roboto;
}
#data h1 {
    font-family:robotoBold;
    font-size:1cm;
    line-height:1.4;
}
#data h2 {
    font-family:robotoBold;
    font-size:0.6cm;
    line-height:1.4;
}
#data p {
    color: #444;
}

#data ul {
    color: #444;
}
.logo {
    position:absolute;
    width: calc( 1cm + 2vw);
    top:20px;
    left:20px;
    opacity :0;
    animation: simplefade 1s ease 1s forwards;
    border: 2px red;
}
a.logo {
    z-index:100;
}
#footer {
    font-family: roboto;
    bottom:0px;
    width:100%;
    text-align: center;
    margin-top: 20px;
}
form {
    overflow-x: none;
    width: 100%;
}

input, textarea {
    border: none;
    border-bottom: 2px solid #777;
    background-color: inherit;
    margin-bottom: 0.5cm;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    transition: 0.8s border-bottom;
}
input:focus, textarea:focus {
    outline: none;
    border-bottom: 2px solid blue;
    transition: 0.8s border-bottom;
}
button {
    background: beige;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}