@font-face {
   font-family: "Quicksand";
   src: url(./Quicksand/static/Quicksand-Regular.ttf);
}
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding:0;
    overflow: hidden;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    flex-direction: column;
    background:#F3DAD8;
    color: #fff;
}
a {
    text-decoration: none;
    color: #66999b;
}
a:hover{
    color: #c9c9d1;
}
a:visited{
    color: #7C616C;
}
.head {
    display: flex;
    padding: 2mm;
    gap: 1mm;
    flex: 1;
    justify-content: center;
    align-items: center;
    z-index: 7;
}
.brand {
    display: flex;
    align-items:center;
    width:90px;    
    height: 9mm;
    flex: 1;
    gap: 1mm;   
    }
.logo {
    height: 9mm;
    margin-right:0;
    animation-name: poke;
    animation-duration: 3s;
    animation-delay: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@keyframes poke {
    0%{
        transform: translateX(0px);
    }
    25%{
        transform: translateX(5px);
    }
    50%{
        transform: translateX(0px);
    }
    75%{
        transform: translateX(0px);
    }
    100%{
        transform: translateX(0px);
    }
}
.logo .heARTicon {
    fill:#ffaaaa;

}
.title {
    line-height:9mm;
    height:9mm;
    margin: 0;
    animation-name: poked;
    animation-duration: 3s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
    transform: translateY(-1px);   
}
@keyframes poked {
    0%{     
        transform: translateX(3px);
        letter-spacing: -1px;
        transform: translateY(-1px);
    }
    25%{
        transform: translateX(7px);
        letter-spacing: 6px;
        transform: translateY(-1px);
    }
    50%{ 
        transform: translateX(7px);
        letter-spacing: -1px;
        transform: translateY(-1px);
    }
    75%{
        transform: translateX(1px);
        letter-spacing: 3px;
        transform: translateY(-1px);
    }
    100%{
        transform: translateX(0);
        letter-spacing: normal;
        transform: translateY(-1px);
     }
}
.rt {
    flex: 1 ;
    display: flex;
    margin: auto;
    max-width:120px;
    min-width: 60px;
    height: 9mm;
    justify-content: flex-end;   
}
.navbar {
    display: flex;   
    list-style: none;
    flex:1;
    margin:auto;
    height: 9mm;
    gap:1mm;
    align-items: center;
}
.navlink {
    flex: 1;
    width:9mm;
    height: 9mm;
    border-radius: 50%;
}
.icon {
    height: 9mm;    
}
.iconsymbol {
    fill: #66999b;
    transition: all .05s ease-in-out ;
}
svg:hover > g path {
    fill: #c9c9d1;
}
svg:active > g path {
    fill: #ffaaaa;
}
.content {
    position: relative;
    flex: 16;
    display: flex;
    flex-direction: column;
    z-index: 3;
}
section {
    flex: 1;
    height: 100vh;
    padding: 0 50px;
    display: flex;
    align-content: center;
}
.tab {
    flex: 1;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    color:#66999b ;
    width: 60vw;
    margin: auto;
}
.tab svg {
    width: 40vw;
}
.logoletter
    {
    transition: all .1s ease-in-out ;
}
.logoheart {
    transition: all .1s ease-in-out ;
}
.logoletter:hover
    {
    fill:#ffaaaa;
    }
.logoheart:hover {
    fill: #fff;
}
.headline {
    font-size: 3rem;
    margin-bottom: 0;
}
.paragraph {
    text-justify:auto;
    font-size: 1.5rem;
}
.foot {
    position: relative;
    margin-bottom: 0;
    text-align: center;
    align-content: center;
    display: flex;
    padding: 0.1rem;   
}
.foot p {
    margin: auto ;
    z-index: 5;
}
.wave {
    fill: #0af3;
    bottom:-2.8rem;
    position: fixed;
    animation: wave 27s linear infinite;
}
.wave2 {
    fill: #faa6;
    bottom: -2.4rem;
    position: fixed;
    animation: wave 18s linear infinite;   
}
.wave3 {
    fill: #0fa3;
    bottom: -2.6rem;
    position: fixed;
    animation: wave 9s linear infinite;
}
@keyframes wave {   
    0% {
        transform: translateX(0%) scaleX(6);
        }
    100%{
        transform: translateX(100%) scaleX(6);
        }
}