@-webkit-keyframes slide {
    0% {
        transform: translateY(100px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide {
    0% {
        transform: translateY(100px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes headshake {
    0% {
        transform: rotate(0);
    }

    2.0979% {
        transform: rotate(20deg);
    }

    4.1958% {
        transform: rotate(-20deg);
    }

    6.29371% {
        transform: rotate(20deg);
    }

    8.39161% {
        transform: rotate(-20deg);
    }

    10.48951% {
        transform: rotate(20deg);
    }

    12.58741% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes headshake {
    0% {
        transform: rotate(0);
    }

    2.0979% {
        transform: rotate(20deg);
    }

    4.1958% {
        transform: rotate(-20deg);
    }

    6.29371% {
        transform: rotate(20deg);
    }

    8.39161% {
        transform: rotate(-20deg);
    }

    10.48951% {
        transform: rotate(20deg);
    }

    12.58741% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0);
    }
}

@-webkit-keyframes pulse {
    25% {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }

    75% {
        box-shadow: 0 0 0 -45px rgba(232, 76, 61, 0);
    }

    85% {
        box-shadow: 0 0 0 -45px rgba(232, 76, 61, 0);
    }

    100% {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@keyframes pulse {
    25% {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }

    75% {
        box-shadow: 0 0 0 -45px rgba(232, 76, 61, 0);
    }

    85% {
        box-shadow: 0 0 0 -45px rgba(232, 76, 61, 0);
    }

    100% {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

body {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    background: #afbed1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    font-weight: 300;
    letter-spacing: .1rem;
}

a:link {
    text-decoration: none;
}

.banner_image {
    position: relative;
    width: 100%;
}

.banner_image img {
    top: 50px;
    width: 100%;
    height: auto;
    border-radius: 0 0 2.5rem 2.5rem;
    box-shadow: rgb(0, 0, 0) 0 1px 2px 3px;
}

.banner_image a img {
    border-radius: 0;
    box-shadow: none;
}

.banner_image .logo {
    position: absolute;
    width: 40%;
    left: 52%;
    top: 55%;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#headparaf p {
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 10px;
}

main {
    width: 100%;
    height: auto;
}

.title {
    padding-top: 50px;
    margin-top: 0;
}

h1 {
    color: #610000;
    text-align: center;
    font-size: 2vw;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    font-weight: 500;
}

h2 {
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 2.2vw;
    margin-top: 30px;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    font-weight: 500;
}

h3 {
    font-size: 1.8vw;
    margin-left: 15px;
}

h4 {
    font-size: 1.6vw;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    font-weight: 500;
}

p {
    font-size: 1.5vw;
}

.clickprocess {
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.columns {
    color: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 50px;
    -webkit-animation: slide 1.5s ease-out 1s both, opacity 2s ease-in-out 0.8s both;
    animation: slide 1.5s ease-out 1s both, opacity 2s ease-in-out 0.8s both;
}

article {
    padding: 20px;
    margin: 30px 0 30px 0;
    font-size: 1.5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 90%;
    border-radius: 10px;
}

hr {
    text-align: center;
    width: 60%;
    margin: 15px;
    color: #ffffff;
}

.light {
    background-color: #f3f0ea;
}

.skills img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
    -o-object-fit: cover;
    object-fit: cover;
}

.skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    transition: transform 330ms ease-in-out;
}

.skills:hover {
    transform: scale(1.1, 1.1);
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2);
}

.skills__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 40%;
    height: auto;
    padding: 20px;
    transition: transform 330ms ease-in-out;
}

.skills__details:hover {
    transform: scale(1.1, 1.1);
}

.describ {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px 0 10px 0;
}

.describ span {
    width: 8%;
    height: auto;
    padding: 2px;
}

.button {
    position: relative;
    transition: transform 330ms ease-in-out;
    font-weight: 300;
}

.button:hover {
    transform: scale(1.1, 1.1);
}

.button a {
    display: inline-block;
    background: #ed7617;
    text-decoration: none;
    color: #000000;
    position: relative;
    padding: .45em 1.2em;
    border-left: 1px solid #f38831;
    margin-left: 4em;
    box-shadow: inset 0 1px 0 #d46c17, 0 4px 0 0 #c0671f, 0px 4px 4px rgb(102, 102, 102);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.button a:active {
    top: 3px
}

.button a span {
    background: rgb(34, 34, 34);
    font-size: 1.2em;
    width: 2.1em;
    left: -2.1em;
    position: absolute;
    display: block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    top: 0;
    color: rgb(238, 238, 238);
    border-right: 1px solid #88420a;
    /* text-align: center; */
    box-shadow: inset 0 1px 0 rgb(51, 51, 51), 0 4px 0 0 rgb(51, 51, 51), 0 4px 4px rgb(102, 102, 102);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.button a span svg {
    width: 1.4em;
}

.button a:active span {
    top: -3px;
    box-shadow: inset 0 1px 0 rgb(51, 51, 51), 0 4px 0 0 rgb(51, 51, 51), 1px 1px 0 0 #7e3c06, 2px 2px 0 0 #7e3c06, 2px 4px 0 0 #7e3c06, 4px 3px 2px #88420a, 0 5px 3px rgb(102, 102, 102)
}

.button a:hover span {
    background: rgb(68, 68, 68)
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(17, 16, 16);
    width: 100%;
    height: auto;
    color: white;
    padding: 25px 0px;
}

.contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

#contact__phone,
#contact__email {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#email,
#phone_number {
    margin: 10px;
    display: none;
    color: white;
    font-weight: 400;
    font-size: large;
}

#email_icon {
    width: 25px;
    height: 19px;
    color: white;
}

#phone_icon {
    width: 25px;
    height: 25px;
    color: white;
}

#phone_icon img {
    -webkit-animation: headshake 4s ease infinite;
    animation: headshake 4s ease infinite;
}

#email_icon img {
    -webkit-animation: headshake 4s ease 2s infinite;
    animation: headshake 4s ease 2s infinite;
}

#phone_rounded,
#email_rounded {
    border-radius: 50%;
    cursor: pointer;
    height: 60px;
    width: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: .3s ease-in-out both;
}

#phone_rounded {
    background: radial-gradient(ellipse at center, #6fce2f 0%, rgb(44, 44, 44) 95%);
    box-shadow: 0px 0px 10px 10px rgb(84 175 80 / 70%);
    -webkit-animation: pulse 3s infinite cubic-bezier(.61, .27, .34, .6);
    animation: pulse 3s infinite cubic-bezier(.61, .27, .34, .6);
}

#email_rounded {
    background: radial-gradient(ellipse at center, #2fa9ce 0%, rgb(44, 44, 44) 95%);
    box-shadow: 0px 0px 10px 10px rgb(84 175 220 / 70%);
    -webkit-animation: pulse 3.2s infinite 1s cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 3.2s infinite 1s cubic-bezier(0.66, 0, 0, 1);
}

#copyright {
    font-size: 1vw;
    padding: 10px;
    margin-top: 50px;
    text-align: center;
}

#copyright a {
    text-decoration: none;
}

#click {
    color: #ed7617;
    font-weight: 400;
    font-size: 1.3em;
}

#process {
    color: #A99CC9;
    font-weight: 400;
    font-size: 1.3em;
}

@media only screen and (max-width: 1200px) {

    /*Tablets [601px -> 1200px]*/
    h1 {
        font-size: 2.8vw;
    }
}

@media only screen and (max-width: 600px) {

    /*Big smartphones [426px -> 600px]*/
    h1 {
        font-size: 5vw;
    }

    h2 {
        font-size: 4vw;
    }

    h3 {
        font-size: 2.8vw;
    }

    h4 {
        font-size: 3.5vw;
    }

    p {
        font-size: 3vw;
    }

    footer P {
        font-size: 4.5vw;
    }

    article {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
    }

    .columns {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .skills,
    .skills__details {
        width: 90%;
    }

    .contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    #contact__phone,
    #contact__email {
        padding: 20px;
    }

    #copyright {
        font-size: 3vw;
    }
}

@media only screen and (min-width: 300px) and (max-width: 425px) {

    /*Small smartphones [300px -> 425px]*/
    h1 {
        font-size: 5vw;
    }

    h2 {
        font-size: 4vw;
    }

    h3 {
        font-size: 3.5vw;
    }

    h4 {
        font-size: 3.5vw;
    }

    p {
        font-size: 3.5vw;
    }

    .button {
        font-size: medium;
    }

    footer P {
        font-size: 4.5vw;
    }

    article {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .skills,
    .skills__details {
        width: 90%;
    }

    .contact {
        display: flex;
        flex-direction: column;
    }

    #contact__phone,
    #contact__email {
        padding: 20px;
    }

    #copyright {
        font-size: 3.2vw;
    }
}