/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/
/*CODED BY José Miguel "JMIDEV" Pérez*/

body{

    background: linear-gradient(324deg, #000000 0%, #242424 100%);

}

.topbarmarginedcontent{

    background: url("../imgs/contact/contactbg.jpg");
    background-position: center;
    background-size: cover;

}

@keyframes opacity_appear{

    from{opacity: 0;}
    to{opacity: 1;}

}

@keyframes contact_title_appear{

    from{transform: translateY(-100px); opacity: 0;}
    to{transform: translateY(0px); opacity: 1;}

}

.contact_title{

    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 70px;
    font-weight: 700;
    color: white;
    width: 100%;
    text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
    margin-top: 40px;
    margin-bottom: 0px;
    animation-name: contact_title_appear;
    animation-duration: 1s;

}

.contact_button_container{

    height: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    --paddingsides_contactbuttoncontainer: 20%;
    padding-left: var(--paddingsides_contactbuttoncontainer);
    padding-right: var(--paddingsides_contactbuttoncontainer);
    padding-top: 40px;
    padding-bottom: 80px;
    

}

.contact_button{

    height: 120px;
    overflow: hidden;
    border: 3px solid white;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 1080px;
    transition: 0.2s;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    animation-name: opacity_appear;
    animation-duration: 1s;

}

.contactbutton_img{

    --contactbutton-margin: 12px;
    margin: var(--contactbutton-margin);
    height: calc(100% - var(--contactbutton-margin)*2);
    width: auto;
    aspect-ratio: 1/1;
    pointer-events: none;
    user-select: none;
    border-radius: 1080px;
    transition: 0.2s;

}

.contactbutton_link{

    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    overflow-wrap: anywhere;

}

.social_name{

    background: white;
    color: black;
    padding: 10px;
    border-radius: 1080px;
    text-decoration: none;

}

.social_id{

    color: rgb(44, 175, 255);
    transition: 0.2s;

}

.contactbutton_element{

    transition: 0.2s;

}

.contactbutton_element:hover{

    opacity: 0.5;

}

.contact_button:hover{

    background: white;
    transform: scale(1.05);
    filter: drop-shadow(0px 8px 20px rgba(0,0,0,0.5));

}

.contact_button:hover .social_name{

    background: black;
    color: white;

}

.contact_button:hover .social_id{

    color: rgb(0, 140, 255);

}

/*
.contact_button:hover .contactbutton_img{

    filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.25));

}
*/
/*.contactbutton_img{

    --contactbutton-margin: 10px;
    height: calc(100% - var(--contactbutton-margin)*2);
    margin-left: var(--contactbutton-margin);
    margin-right: var(--contactbutton-margin);
    width: auto;
    aspect-ratio: 1/1;
    pointer-events: none;
    user-select: none;
    border-radius: 1080px;

}*/

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

    .contact_button_container{

        --paddingsides_contactbuttoncontainer: 2%;
    }

}

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

    .social_name{

        display: none;
        
    }

}