* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Roboto', sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    color: #000000;
}

header {
    padding: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-direction: column;
}

.content {
    max-width: 700px;
    display: flex;
    width: 100%;
    gap: 20px;
    margin:60px 0px;
}

.content:first-child {
    margin-top:20px;
}

.reverse {
    flex-direction:row-reverse;
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo {
    width: 50px;
    height: 50px;
    background-color: #ffcd33;
    border-radius: 50%;
    margin-bottom: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.37 122.37'%3E%3Crect fill='%23FFCD33' width='122.37' height='122.37'/%3E%3Cpath fill='%23FFFFFF' d='M93.2,66a11.14,11.14,0,0,0-8.71-10.87,18.26,18.26,0,0,0-35.95-4,9.47,9.47,0,0,0-4-.9,9.56,9.56,0,0,0-9.37,11.51H32.89a7.74,7.74,0,0,0-7.71,7.72h0a7.73,7.73,0,0,0,7.71,7.71H82.27a8.69,8.69,0,0,0,.89,0A11.15,11.15,0,0,0,93.2,66Z' /%3E%3C/svg%3E");
    background-size:48px;
    background-position:center center;
    background-repeat:no-repeat;
}

.slogan {
    font-size: 3rem;
    margin-bottom: 20px;
    font-family: 'Patua One', cursive;
    font-weight: 400;
}

.intro {
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight:300;
    /*word-wrap: break-word;
    hyphens: auto;*/
}
.cta-button-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

.cta-button {
    background-color: #ffcd33;
    width: auto;
    margin: 0px;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
}
.cta-button:hover {
    background-color: #ffd862;
}

.illustration {
    height: 400px;
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 28.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 313.8 431.3' style='enable-background:new 0 0 313.8 431.3;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23D4A181;%7D .st1%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%232C1B18;%7D .st2%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23BA8B72;%7D .st3%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23E4E4E4;%7D .st4%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23518899;%7D .st5%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%2389C0D2;%7D .st6%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23BF9500;%7D .st7%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23191847;%7D .st8%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23FFCD33;%7D .st9%7Bfill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.1;%7D .st10%7Bfill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.4;%7D%0A%3C/style%3E%3Cg id='Master_x2F_Pose_x2F_Standing'%3E%3Cg id='Head_x2F_Front' transform='translate(82 0) scale(1 1)'%3E%3Cg id='Head_x2F_Front_x2F_Chongo'%3E%3Cg id='Head'%3E%3Cpath id='SKIN' class='st0' d='M68.2,104h24L84,65.5c4.6-5.4,7.7-12,7.2-19.5c-1.5-21.4-31.3-16.7-37.1-5.9 c-5.8,10.8-5.1,38.2,2.4,40.1c3,0.8,9.3-1.1,15.8-5L68.2,104z'/%3E%3C/g%3E%3Cpath id='hair' class='st1' d='M52.3,37.2c-0.3,0.5-0.7,1-0.6,1.6c0.1,0.5,0.5,0.9,0.8,1.3c0.7,0.9,1.8,1.3,2.8,1.8 c3.9,1.6,8.2,1.9,12,3.8c3.4,1.7,5.6,5.1,6.7,8.8c2.5-1.4,5.6-2.8,8.4-1.5c2.3,1,2.9,4,2.6,6.4c-0.3,2.3-1.3,4.3-3,5.7 c-0.3,0.3-0.7,0.5-0.9,0.8c-0.2,0.3-0.1,0.5,0.1,0.7c0.4,0.8,1.1,1.6,1.7,2.2c1.7,1.8,4.3,1.8,6.5,1.4c1.2-0.2,2.3-0.7,3.4-1.1 c1.1-0.4,2.3-0.9,3.3-1.6c2.3-1.4,3.6-3.6,4.3-6.2c0.7-2.9,0.7-5.9,0.5-8.9c-0.2-3.1-0.8-6.1-1.8-9c-0.9-2.7-2.1-5.3-4-7.4 c2.8-0.6,5.6-2.1,7.6-4.3c2.2-2.5,4.5-9.2,4.6-11.8c0.1-2.6-0.2-4.9-0.8-6.2c-1.1-2.2-3-4-5.3-4.8c-0.2-0.1-0.5-0.1-0.7-0.2 c-0.2-0.1-0.3-0.2-0.4-0.5c-0.2-0.6-0.6-1.1-1.1-1.6c-1-1.1-2.2-1.8-3.5-2.3c-1.4-0.5-2.8-0.7-4.2-0.5c-1.3,0.2-2.7,0.6-3.7,1.4 c-0.4,0.4-0.7,0.7-1.3,0.6c-0.6-0.1-1.1-0.4-1.6-0.5c-1.3-0.3-2.6-0.3-3.9,0c-1.3,0.3-2.4,0.9-3.4,1.8c-0.9,0.9-1.5,2.1-2.1,3.3 c-1.2,2.6-2.5,5-2.8,7.9c-0.4,3,0.1,6,1.2,8.7c-2-0.2-6.8,0.1-10,1.1C60.3,29.4,54,34.6,52.3,37.2z'/%3E%3C/g%3E%3C/g%3E%3Cg id='Lower_Body_x2F_Standing' transform='translate(0 187) scale(1 1)'%3E%3Cg id='Lower_Body_x2F_Standing_x2F_Jogging'%3E%3Cpath id='SKIN_00000049920657247595615220000012396377824726051486_' class='st2' d='M131.6,0L38.2,229.3h12l55.7-105L180.2,0 L131.6,0z'/%3E%3Cg id='Right__x5B_shoe_x5D_'%3E%3Cpath id='shoe' class='st3' d='M48.7,225.1c-2.7,0-7.1-2-7.1-2l-1.7-4.1c-0.2-0.5-0.8-0.8-1.3-0.5l-26.2,11.7c0,0-3.1,0.5-7.9,1 c-4.7,0.6-2.5,7.8-2.5,7.8s53.3,0,56.4,0c0,0,0.9-5.2,0.9-7.9c0-1.7-1-4.7-1.7-6.7c-0.4-1.1-1.7-1.6-2.7-1.1 C53,224.1,50.4,225.1,48.7,225.1z'/%3E%3C/g%3E%3Cpath id='Pant' class='st4' d='M132.9,116.7C164.4,64.2,192.6,0,192.6,0l-65.4,0c0,0-25.3,50.8-47.4,105.4 C57.8,160,42.6,205.4,42.6,205.4l23.1,7C65.7,212.4,101.3,169.2,132.9,116.7z'/%3E%3Cpath id='SKIN_00000055668732971425731930000013184754501300959674_' class='st0' d='M136.2,0c11.3,41.8,40.3,109.7,46.1,118.3 c3.9,5.7,41.8,13.8,113.9,24.2l2.6-10.6c-60.4-19.4-91.1-29.7-91.9-30.8c-1.3-1.7-14.8-57.5-21.8-101.1L136.2,0z'/%3E%3Cpath id='Pant_00000038396822599621387180000018140067109296948360_' class='st5' d='M211.3,95.8c-1.2-2.6-6.7-34.5-16.5-95.8 l-62.3,0C148,74.8,161.8,118,174,129.6c12.1,11.6,45.2,15,99.1,10.2l4.6-17C234.6,107.4,212.4,98.4,211.3,95.8z'/%3E%3Cg id='Left__x5B_shoe_x5D_'%3E%3Cpath id='shoe_2' class='st3' d='M295,136.4c-0.5,2.7-3.3,6.7-3.3,6.7l-4.3,0.9c-0.6,0.1-0.9,0.7-0.8,1.2l7,27.8 c0,0-0.1,3.2-0.3,7.9c-0.3,4.8,7.3,3.9,7.3,3.9s9.2-52.5,9.8-55.5c0,0-5-1.8-7.6-2.3c-1.7-0.3-4.8,0.1-6.9,0.5 c-1.2,0.2-1.8,1.4-1.6,2.5C294.8,132,295.3,134.7,295,136.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Upper_Body' transform='translate(22 82) scale(1 1)'%3E%3Cg id='Upper_Body_x2F_Trench_Coat'%3E%3Cpath id='SKIN_00000160892916039180457960000006568595142489823364_' class='st0' d='M264.2,151.4c3.3,1.5,2.5,4.2,1.5,5.1 c-6.2,5.5-11.8,3.4-17.9,1.2c-1.8-0.7-3.6-1.3-5.5-1.8c-4.9-1.3-6.4,1.2-7.8,3.5c-1.3,2.1-2.5,4.1-5.9,3.2 c0.2-0.7,0.4-1.4,0.6-2.2c1.4-5.2,3.5-12.9,0.7-17.5c-2.2-3.5-32.8-64.3-32.8-64.3l17.6-3.2c0,0,23.6,57.5,27.5,62.8 C244.1,140.8,256.1,147.7,264.2,151.4z M16.8,117.3c-1.4,1.2-3,3.8,2.7,3.3c5.7-0.4,11.7-0.6,12.5,1.3c0.3,0.8-0.1,1.8-0.6,2.8 c-0.6,1.3-1.3,2.6-0.4,4.1c1.1,1.7,6.1-2.6,15-13.1l31.6-13.1l-7.1-17.4l-31.9,23.4C29.8,110.9,22.6,113.8,16.8,117.3z'/%3E%3Cpath id='Back_Arm' class='st6' d='M62.9,87.7c-4.1-0.3-8.6,0.4-13.4,2c-2.4,0.8-3.6,3.3-2.8,5.7c0.5,1.4,1.5,2.4,2.8,2.8 c-0.9,0.7-1.8,1.3-2.8,2l8,16.4c4-2,8-3.9,11.9-5.8c29.2-14.3,55.5-27.1,68.3-51.6c3.7-7.1,3.6-27.1,3.6-41.4 c0-4.6,0-8.5,0.1-11.3L128,2C113.1,32.9,92.9,62.4,62.9,87.7z'/%3E%3Cpath id='Shirt' class='st7' d='M143.2,2.4c0,0-11.1,1.6-15.6-0.7c0,28.5-10.6,58.5-26.8,99.5c-1,2.6-1.1,12.3,1.1,12.7 c27.1,5.2,74.2,0,74.2,0C172.3,65.4,163.2,31.7,143.2,2.4z'/%3E%3Cpath id='Coat_Front' class='st8' d='M242.2,116.5c1.8,1-0.7,6.7-2.9,7.9c0.8,2.6,1.5,5.2,2.3,7.9l-18.9,5.6 C209,101.8,192.8,81,179.4,69.1c-0.1,4-0.5,8-0.9,12.1l0,0c-0.8,7.4-1.6,14.9-0.3,22.4c0.2,1.5,0.5,3,0.9,4.5 c1.9,0.2,3.5,1.7,3.9,3.7l0.5,3c0.3,1.6-0.3,3.1-1.4,4.1c4.7,13.6,12.1,27.7,19.6,41.9c11.8,22.4,23.7,45,24.6,65.3 c-24.4-9.7-49.1-6.5-71.4-3.6c-15.5,2-29.7,3.9-41.9,1.1c-9.9-50.8,3.8-106.9,15.1-152.9c7-28.8,13.1-53.5,11.8-70.6l6,0l3.8,0 l1.6,0c0,0,57,35,84.8,114.4C238.2,114.8,240.3,115.5,242.2,116.5z'/%3E%3Cpath id='Shade_Lapel' class='st9' d='M156.4,18.2l-9.2,10.5l9.2,9.4L128.6,77l22.7-38.9l-9.4-9.3l10.4-11.9L147.1,1L156.4,18.2z '/%3E%3Cpath id='Buttons' class='st10' d='M135.2,84c2.2,0,4,1.8,4,4s-1.8,4-4,4s-4-1.8-4-4S133,84,135.2,84z M130.2,107 c2.2,0,4,1.8,4,4s-1.8,4-4,4s-4-1.8-4-4S128,107,130.2,107z M133.2,134c0-2.2-1.8-4-4-4c-2.2,0-4,1.8-4,4s1.8,4,4,4 C131.5,138,133.2,136.2,133.2,134z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-position:center center;
    background-repeat:no-repeat;
    background-size: contain;
}

footer {
    background-color: #f1f1f1;
    color: #666;
    text-align: center;
    padding: 20px;
    bottom: 0;
    width: 100%;
    font-size: 0.8rem;
    font-weight:300;
}

footer p {
    margin-bottom: 10px;
}

footer p:last-child {
    margin-bottom: 0px;
}

@media (max-width: 768px) {
    .content {
        flex-direction: column;
        align-items: center;
    }
}