:root {
    --accent: #a65b45;
    --accent_rgb: 166, 91, 69;
    --sub-accent: #741012;
    --sub-accent_rgb: 116, 16, 18;
    --color-1: #48a4a4;
    --color-2: #f4a300;
    --color-3: #659573;
}

body,
html {
    margin: 0;
    padding: 0
}

.heroicons--map-pin-16-solid {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m7.539 14.841l.003.003l.002.002a.755.755 0 0 0 .912 0l.002-.002l.003-.003l.012-.009a6 6 0 0 0 .19-.153a15.6 15.6 0 0 0 2.046-2.082C11.81 11.235 13 9.255 13 7A5 5 0 0 0 3 7c0 2.255 1.19 4.235 2.292 5.597a15.6 15.6 0 0 0 2.046 2.082l.189.153zM8 8.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.ic--round-mail {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m-.4 4.25l-6.54 4.09c-.65.41-1.47.41-2.12 0L4.4 8.25a.85.85 0 1 1 .9-1.44L12 11l6.7-4.19a.85.85 0 1 1 .9 1.44'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.skill-icons--instagram {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='url(%23skillIconsInstagram0)' rx='60'/%3E%3Crect width='256' height='256' fill='url(%23skillIconsInstagram1)' rx='60'/%3E%3Cpath fill='%23fff' d='M128.009 28c-27.158 0-30.567.119-41.233.604c-10.646.488-17.913 2.173-24.271 4.646c-6.578 2.554-12.157 5.971-17.715 11.531c-5.563 5.559-8.98 11.138-11.542 17.713c-2.48 6.36-4.167 13.63-4.646 24.271c-.477 10.667-.602 14.077-.602 41.236s.12 30.557.604 41.223c.49 10.646 2.175 17.913 4.646 24.271c2.556 6.578 5.973 12.157 11.533 17.715c5.557 5.563 11.136 8.988 17.709 11.542c6.363 2.473 13.631 4.158 24.275 4.646c10.667.485 14.073.604 41.23.604c27.161 0 30.559-.119 41.225-.604c10.646-.488 17.921-2.173 24.284-4.646c6.575-2.554 12.146-5.979 17.702-11.542c5.563-5.558 8.979-11.137 11.542-17.712c2.458-6.361 4.146-13.63 4.646-24.272c.479-10.666.604-14.066.604-41.225s-.125-30.567-.604-41.234c-.5-10.646-2.188-17.912-4.646-24.27c-2.563-6.578-5.979-12.157-11.542-17.716c-5.562-5.562-11.125-8.979-17.708-11.53c-6.375-2.474-13.646-4.16-24.292-4.647c-10.667-.485-14.063-.604-41.23-.604zm-8.971 18.021c2.663-.004 5.634 0 8.971 0c26.701 0 29.865.096 40.409.575c9.75.446 15.042 2.075 18.567 3.444c4.667 1.812 7.994 3.979 11.492 7.48c3.5 3.5 5.666 6.833 7.483 11.5c1.369 3.52 3 8.812 3.444 18.562c.479 10.542.583 13.708.583 40.396s-.104 29.855-.583 40.396c-.446 9.75-2.075 15.042-3.444 18.563c-1.812 4.667-3.983 7.99-7.483 11.488c-3.5 3.5-6.823 5.666-11.492 7.479c-3.521 1.375-8.817 3-18.567 3.446c-10.542.479-13.708.583-40.409.583c-26.702 0-29.867-.104-40.408-.583c-9.75-.45-15.042-2.079-18.57-3.448c-4.666-1.813-8-3.979-11.5-7.479s-5.666-6.825-7.483-11.494c-1.369-3.521-3-8.813-3.444-18.563c-.479-10.542-.575-13.708-.575-40.413s.096-29.854.575-40.396c.446-9.75 2.075-15.042 3.444-18.567c1.813-4.667 3.983-8 7.484-11.5s6.833-5.667 11.5-7.483c3.525-1.375 8.819-3 18.569-3.448c9.225-.417 12.8-.542 31.437-.563zm62.351 16.604c-6.625 0-12 5.37-12 11.996c0 6.625 5.375 12 12 12s12-5.375 12-12s-5.375-12-12-12zm-53.38 14.021c-28.36 0-51.354 22.994-51.354 51.355s22.994 51.344 51.354 51.344c28.361 0 51.347-22.983 51.347-51.344c0-28.36-22.988-51.355-51.349-51.355zm0 18.021c18.409 0 33.334 14.923 33.334 33.334c0 18.409-14.925 33.334-33.334 33.334s-33.333-14.925-33.333-33.334c0-18.411 14.923-33.334 33.333-33.334'/%3E%3Cdefs%3E%3CradialGradient id='skillIconsInstagram0' cx='0' cy='0' r='1' gradientTransform='matrix(0 -253.715 235.975 0 68 275.717)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fd5'/%3E%3Cstop offset='.1' stop-color='%23fd5'/%3E%3Cstop offset='.5' stop-color='%23ff543e'/%3E%3Cstop offset='1' stop-color='%23c837ab'/%3E%3C/radialGradient%3E%3CradialGradient id='skillIconsInstagram1' cx='0' cy='0' r='1' gradientTransform='matrix(22.25952 111.2061 -458.39518 91.75449 -42.881 18.441)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233771c8'/%3E%3Cstop offset='.128' stop-color='%233771c8'/%3E%3Cstop offset='1' stop-color='%2360f' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/g%3E%3C/svg%3E")
}

.devicon--facebook {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Crect width='118.35' height='118.35' x='4.83' y='4.83' fill='%233d5a98' rx='6.53' ry='6.53'/%3E%3Cpath fill='%23fff' d='M86.48 123.17V77.34h15.38l2.3-17.86H86.48v-11.4c0-5.17 1.44-8.7 8.85-8.7h9.46v-16A127 127 0 0 0 91 22.7c-13.62 0-23 8.3-23 23.61v13.17H52.62v17.86H68v45.83z'/%3E%3C/svg%3E")
}

.heroicons--globe-alt-20-solid {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M16.555 5.412a8.03 8.03 0 0 0-3.503-2.81a14.9 14.9 0 0 1 1.663 4.472a8.6 8.6 0 0 0 1.84-1.662m-3.229 2.413a13.4 13.4 0 0 0-2.413-5.773a8 8 0 0 0-1.826 0a13.4 13.4 0 0 0-2.413 5.773A8.5 8.5 0 0 0 10 8.5c1.18 0 2.304-.24 3.326-.675M6.514 9.376A10 10 0 0 0 10 10c1.226 0 2.4-.22 3.486-.624q.014.31.014.624a13.5 13.5 0 0 1-.366 3.134A13.5 13.5 0 0 1 10 13.5c-1.079 0-2.128-.127-3.134-.366a13.5 13.5 0 0 1-.352-3.758M5.285 7.074a14.9 14.9 0 0 1 1.663-4.471a8.03 8.03 0 0 0-3.503 2.81a8.6 8.6 0 0 0 1.84 1.66m12.049-.275a8 8 0 0 1 .614 4.115a13.5 13.5 0 0 1-3.178 1.72a15 15 0 0 0 .174-3.939a10 10 0 0 0 2.39-1.896m-14.668 0a10 10 0 0 0 2.39 1.896a15.2 15.2 0 0 0 .174 3.94a13.5 13.5 0 0 1-3.178-1.72a8 8 0 0 1 .615-4.115M10 15q1.349-.002 2.633-.23a13.5 13.5 0 0 1-1.72 3.178a8 8 0 0 1-1.826 0a13.5 13.5 0 0 1-1.72-3.178Q8.65 14.998 10 15m4.357-.643a15 15 0 0 1-1.305 3.04a8.03 8.03 0 0 0 4.345-4.345c-.953.542-1.971.981-3.04 1.305m-7.409 3.04a8.03 8.03 0 0 1-4.345-4.345c.953.542 1.971.981 3.04 1.305a15 15 0 0 0 1.305 3.04'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.flex {
    display: flex
}

.flex-col {
    flex-direction: column
}

.firstlevel-container {
    height: 100vh;
    width: 100vw;
    background-image: url("../img/bg-img.png");
    background-size: cover;
    background-repeat: no-repeat
}

.secondlevel-container {
    height: 100vh;
    width: 100vw;
    background-color: rgba(255, 255, 255, .7);

    .top-container {
        margin-top: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: slideDown 1s
    }

    .logo-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 20px
    }

    .logo-container h1 {
        font-size: 25px;
        margin: 0;
        margin-top: 20px;
        color: var(--sub-accent);
        text-align: center
    }

    .logo-container img {
        border-radius: 15px;
        width: 41%
    }

    .content-container {
        animation: slideUp 1s
    }

    .links-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 5vh 25px;
        box-sizing: border-box
    }

    .links-container span {
        flex-shrink: 0;
        color: #0094d9;
        font-size: 22px
    }

    .links-container a {
        text-decoration: none;
        color: #000;
        font-size: 17px
    }

    .social-links-container {
        margin-top: 10vh;
        display: flex;
        justify-content: center;
        gap: 30px
    }

    .social-links-container a {
        font-size: 30px
    }

    .social-links-container a:nth-child(1) {
        font-size: 33px;
        color: #0094d9
    }

    .link-container {
        background: rgba(255, 255, 255, .7);
        box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
        border-radius: 14px;
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 10px 12px;
        font-weight: 600
    }

    .link-container span {
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--color-1);
        color: #fff;
        border-radius: 12px
    }

    @keyframes slideUp {
        from {
            transform: translateY(300px)
        }

        to {
            transform: translateY(0)
        }
    }

    @keyframes slideDown {
        from {
            transform: translateY(-300px)
        }

        to {
            transform: translateY(0)
        }
    }

    @keyframes slideLeft {
        from {
            transform: translateX(300px)
        }

        to {
            transform: translateX(0)
        }
    }