:root{
    --title-color: #0f27ae;
    --lightblue:#0bcfde;
    --text-color: #444444;
}
html{
    margin:0;
    min-height:100vh;
    overflow-x: hidden;
}
body{
    font-family: 'Open Sans', sans-serif;
    line-height: 2;
    min-height:100vh;
    margin:0;
    overflow-x: hidden;
}
.site{
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
header,footer{
    flex:0 1 auto;
}
main{
    flex:1 1 auto;
}
.header-gradient{
    position:relative;
    padding:20px 0;
}
footer{
    padding:10px 0;
}
footer p{
    margin:0;
    font-size:0.875rem;
}
.header-gradient::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    top: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#ffce00), color-stop(#35c848), to(#7ed1f3));
    background-image: linear-gradient(to right, #ffce00, #35c848, #7ed1f3);
}

.logo img{
    margin:0;
}
h1{
    color: var(--title-color);
    font-size: clamp(1.875rem, calc(2rem + 1vw) , 3rem);
}
p{
    color: var(--text-color);
    font-size: clamp(0.875rem, calc(0.875rem + 1vw) , 1.25rem);
}
img{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.error-image{
    max-width:480px;
}
a{
    color: var(--title-color);
    text-decoration: underline;
}
a:hover,
a:active,
a:visited{
    color: var(--title-color);
    text-decoration: none;
}
.ki-heading{
    position:relative;
    font-weight:700;
    z-index:1;
    padding:0 5px;
    /*display:inline-block;*/

    display:inline;
    background-image: linear-gradient(var(--lightblue), var(--lightblue));
    background-position: 0% 98%;
    background-repeat: no-repeat;
    background-size: 100% clamp(10px,2vw,15px);
    transition: background-size .3s;
}
.container{
    max-width: 480px;
    padding: 0 30px;
    margin: 0 auto;
}
.text-center{
    text-align: center;
}
.errormessage{

}