@media only screen and (min-width: 1024px) {
    :root {
        --bg-color: #000000;
        --primary: #F81001;
        --volume:   #000000;
    }
    
    body {
        width: 100%;
        background-color: var(--bg-color);
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: 0px;
    }
    
    .ad_lateral {
        margin-top: 30%;
        background-color: white;
        width: 180px;
        height: 500px;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
    }

    .ad_lateral_mobile {
        border: none;
        background-color: white;
        height: 130px;
        display: none;
        max-width: 1024px;
        width: 80%;
        margin: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 3%;
        margin-bottom: 3%;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
    }
    
    .abajo {
        border: none;
        background-color: white;
        height: auto;
        max-width: 80%;
        width: auto;
        margin: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 1%;
        margin-bottom: 1%;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
    }
    
    #wrapper {
        max-width: 1024px;
        border: none;
        width: 80%;
        height: 50%;
        margin: 0px;
        display: flex;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
    }
    
    #main {
        border: none;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
        width: 68%;
        margin-top: 2%;
    }
    
    #logo {
        width: 80%;
        filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.24));
        cursor: pointer;
        
    }
    
    #player {
        width:50%;
        height: 75px;   
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        margin-top: 15%;
        display: flex;
        align-items:center;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #btn_play {
        min-width: 43px;
        min-height: 43px;
        border: none;
        border-radius: 100%;
        background-color: var(--primary);
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        color: white;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
        
    }
    
    #btn_play:hover {
        transform: scale(1.05);
    }
    
    #btn_play.play::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 19px;
        content: "\f04b";
    }
    
    #btn_play.pause::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 19px;
        content: "\f04c";
    }
    
    #volume_icon {
        margin-left: 2%;
        border: none;
        background-color: transparent;
        position: relative;
        cursor: pointer;
        color: var(--volume);
        transition: transform 0.1s ease-in-out;
    }
    
    #volume_icon:hover {
        transform: scale(1.05);
    }
    
    #volume_icon.unmuted::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 13px;
        content: "\f028";
    }
    
    #volume_icon.muted::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 13px;
        content: "\f6a9";
    }

    #wave {
        width: 120px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3%;
        display: none;
    }

    #pause_label {
        font-family: Roboto, sans-serif;
        font-weight: 500;
        font-size: 15px;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
    
    .slider {
        -webkit-appearance: none;
        background: transparent;
        width: 30%;
    }
    
    @-moz-document url-prefix() { 
        .slider {
            border: none;
            top: 5px;
            width: 30%;
        }
    }
    
    .slider::-webkit-slider-runnable-track {
        border: 1.2px solid var(--volume);
        border-radius: 10px;
        background: var(--volume);
        height: 0px;
    }
      
    .slider::-moz-range-track {
        border: 1.2px solid var(--volume);
        border-radius: 10px;
        height: 0px
    }
    
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        margin-top: -6px;
        background-color: var(--volume);
        height: 12px;
        width: 12px;    
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
    }
    
    .slider::-moz-range-thumb {
        border: none;
        appearance: none;
        border-radius: 50%;
        background-color: var(--volume);
        height: 10px;
        width: 10px;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
    }
    
    .slider::-webkit-slider-thumb:hover {
        transform: scale(1.1);
    }
    
    .slider::-moz-range-thumb:hover {
        transform: scale(1.1);
    }
    
    #social {
        max-width: 350px;
        width: 60%;
        margin-top: 10%;
        display: flex;
        justify-content: space-between;
    }
    
    .social_icon {
        background-color: #ffffff;
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 25px;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        cursor: pointer;
        border: 3px solid white;
        text-align: center;
        line-height: 50px;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        transition: transform 0.05s ease-in-out;
    }
    
    a:link { text-decoration: none; }
    
    a:visited { text-decoration: none; }
    
    a:hover { text-decoration: none; }
    
    a:active { text-decoration: none; }
    
    .social_icon:hover {
        transform: scale(1.02);
    }
    
    #Facebook {
        color: white;
        background: #4267B2;
    }
    
    #Instagram {
        color: white;
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);;
    }
    
    #Youtube {
        color: white;
        background:  #FF0000;
    }
    
    #Twitter {
        color: white;
        background: #00aced;
    }
    
    #Tiktok {
        color: white;
        background: black;
    }

    .visit {
        margin-top: 5%;
        font-family: Roboto, sans-serif;
        font-size: 20px;
        color: white;
    }

    .link {
        color: var(--primary);
        font-weight: 500;
        cursor: pointer;
    }

    .link:hover {
        text-decoration: underline;
    }

    
    #Whatsapp_container {
        height: 8%;
        max-width: 250px;
        width: 45%;
        margin-top: 2%;
        margin-bottom: 1%;
        padding-left: 1.5%;
        padding-right: 1.5%;
        background-color: #00e777;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        border-radius: 15px;
        align-items: center;
        justify-content: center;
        align-content: center;
        cursor: pointer;
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 10px;
        transition: transform 0.05s ease-in-out;
        
    }
    
    #Whatsapp_container:hover {
        transform: scale(1.02);
    }
    
    #wp_icon {
        margin: none;
        font-size: 1.8em;
        color: white;
    }
    
    .wp_text {
        margin: none;
        color: white;
        font-family: Roboto, sans-serif;
        font-size: 1.5em;
        font-size: 100%;
    }
}

/*========================================================== Breakpoint screen =========================================================================*/
/*========================================================== Breakpoint screen =========================================================================*/
/*========================================================== Breakpoint screen =========================================================================*/
/*========================================================== Breakpoint screen =========================================================================*/
/*========================================================== Breakpoint screen =========================================================================*/

@media only screen and (max-width: 1024px) {
    :root {
        --bg-color: #000000;
        --primary: #F81001;
        --volume:   #000000;
    }

    body {
        width: 100%;
        background-color: var(--bg-color);
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: 0px;
    }
    
    .ad_lateral {
        margin-top: 30%;
        background-color: white;
        width: 180px;
        height: 500px;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
    }

    .ad_lateral_mobile {
        border: none;
        background-color: white;
        height: 130px;
        max-width: 1024px;
        display: none;
        width: 80%;
        margin: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 3%;
        margin-bottom: 3%;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
    }
    
    .abajo {
        border: none;
        background-color: white;
        height: auto;
        max-width: 80%;
        width: auto;
        margin: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 1%;
        margin-bottom: 1%;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
    }
    
    #wrapper {
        max-width: 1024px;
        border: none;
        width: 80%;
        height: 50%;
        margin: 0px;
        display: flex;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
    }
    
    #main {
        border: none;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
        width: 68%;
        margin-top: 2%;
    }
    
    #logo {
        width: 100%;
        filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.24));
        cursor: pointer;
    }
    
    #timer {
        margin-top: 15%;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        width: 60%;
        height: 20%;   
        display: none;
        flex-direction: column;
        justify-content: center;;
        align-items: center;
    }
    
    #countdown {
        border: none;
        margin: -10px;
        width: 80%;
        display: flex;
        justify-content: space-between;
    }
    
    .text_timer {
        width: 100%;
        margin-top: -3px;
        text-align: center;
        font-family: Roboto, sans-serif;
        font-weight: 500;
        font-size: 17px;
    }
    
    .big_text {
        border: none;
        margin: 0px;
        font-weight: 600;
        font-family: Roboto, sans-serif;
        font-size: 25px;
    }
    
    .smalltext {
        margin: 0px;
        font-family: Roboto, sans-serif;
        font-size: 10px;
    }
    
    .countdown-el {
        border: none;
        text-align: center;
    }
    
    #player {
        max-width: 320px;
        width:70%;
        height: 75px;   
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        margin-top: 25%;
        display: flex;
        align-items:center;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    #btn_play {
        width: 43px;
        height: 43px;
        border: none;
        border-radius: 50%;
        background-color: var(--primary);
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        color: white;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
        display: block;
    }
    
    #btn_play:hover {
        transform: scale(1.05);
    }
    
    #btn_play.play::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 19px;
        content: "\f04b";
    }
    
    #btn_play.pause::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 19px;
        content: "\f04c";
    }
    
    #volume_icon {
        margin-left: 2%;
        border: none;
        background-color: transparent;
        position: relative;
        cursor: pointer;
        color: var(--volume);
        transition: transform 0.1s ease-in-out;
    }
    
    #volume_icon:hover {
        transform: scale(1.05);
    }
    
    #volume_icon.unmuted::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 13px;
        content: "\f028";
    }
    
    #volume_icon.muted::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 13px;
        content: "\f6a9";
    }
    
    #wave {
        width: 100px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: none;
    }

    #pause_label {
        font-family: Roboto, sans-serif;
        font-weight: 500;
        font-size: 15px;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }

    .slider {
        -webkit-appearance: none;
        background: transparent;
        width: 30%;
    }
    
    @-moz-document url-prefix() { 
        .slider {
            border: none;
            top: 5px;
            width: 30%;
        }
    }
    
    .slider::-webkit-slider-runnable-track {
        border: 1.2px solid var(--volume);
        border-radius: 10px;
        background: var(--volume);
        height: 0px;
    }
      
    .slider::-moz-range-track {
        border: 1.2px solid var(--volume);
        border-radius: 10px;
        height: 0px
    }
    
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        margin-top: -6px;
        background-color: var(--volume);
        height: 12px;
        width: 12px;    
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
    }
    
    .slider::-moz-range-thumb {
        border: none;
        appearance: none;
        border-radius: 50%;
        background-color: var(--volume);
        height: 10px;
        width: 10px;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
    }
    
    .slider::-webkit-slider-thumb:hover {
        transform: scale(1.1);
    }
    
    .slider::-moz-range-thumb:hover {
        transform: scale(1.1);
    }
    
    #social {
        max-width: 260px;
        width: 75%;
        margin-top: 10%;
        display: flex;
        justify-content: space-between;
    }
    
    .social_icon {
        background-color: #ffffff;
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 20px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        border: 3px solid white;
        text-align: center;
        line-height: 40px;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        transition: transform 0.05s ease-in-out;
    }
    
    a:link { text-decoration: none; }
    
    a:visited { text-decoration: none; }
    
    a:hover { text-decoration: none; }
    
    a:active { text-decoration: none; }
    
    .social_icon:hover {
        transform: scale(1.02);
    }
    
    #Facebook {
        color: white;
        background: #4267B2;
    }
    
    #Instagram {
        color: white;
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);;
    }
    
    #Youtube {
        color: white;
        background:  #FF0000;
    }
    
    #Twitter {
        color: white;
        background: #00aced;
    }
    
    #Tiktok {
        color: white;
        background: black;
    }

    .visit {
        margin-top: 10%;
        font-family: Roboto, sans-serif;
        font-size: 13px;
        color: white;
    }

    .link {
        color: var(--primary);
        font-weight: 500;
        cursor: pointer;
    }

    .link:hover {
        text-decoration: underline;
    }
    
    #Whatsapp_container {
        height: 8%;
        max-width: 350px;
        width: 65%;
        margin-top: 8%;
        margin-bottom: 1%;
        padding-left: 1.5%;
        padding-right: 1.5%;
        background-color: #00e777;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        border-radius: 15px;
        align-items: center;
        justify-content: center;
        align-content: center;
        cursor: pointer;
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 10px;
        transition: transform 0.05s ease-in-out;
        
    }
    
    #Whatsapp_container:hover {
        transform: scale(1.02);
    }
    
    #wp_icon {
        margin: none;
        font-size: 1.3em;
        color: white;
    }
    
    .wp_text {
        margin: none;
        color: white;
        font-family: Roboto, sans-serif;
        font-size: 15px;
    }
}

/*========================================================== Breakpoint screen =========================================================================*/
/*========================================================== Breakpoint screen =========================================================================*/
/*========================================================== Breakpoint screen =========================================================================*/
/*========================================================== Breakpoint screen =========================================================================*/
/*========================================================== Breakpoint screen =========================================================================*/

@media only screen and (max-width: 768px) {
    :root {
        --bg-color: #000000;
        --primary: #F81001;
        --volume:   #000000;
    }
    
    body {
        width: 100%;
        background-color: var(--bg-color);
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: 0px;
    }
    
    .ad_lateral {
        margin-top: 30%;
        background-color: white;
        display: none;
        width: 180px;
        height: 500px;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
    }

    .ad_lateral_mobile {
        border: none;
        background-color: white;
        height: 130px;
        display: flex;
        max-width: 1024px;
        width: 80%;
        margin: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 10%;
        margin-bottom: 3%;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
    }
    
    .abajo {
        border: none;
        background-color: white;
        height: auto;
        max-width: 80%;
        width: auto;
        margin: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 1%;
        margin-bottom: 1%;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
    }
    
    #wrapper {
        max-width: 1024px;
        border: none;
        width: 95%;
        height: 50%;
        margin: 0px;
        display: flex;
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
    }
    
    #main {
        border: none;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
        width: 90%;
        margin-top: 2%;
    }
    
    #logo {
        margin-top: 2%;
        width: 80%;
        filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.24));
        cursor: pointer;
    }
    
    #timer {
        margin-top: 10%;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        width: 60%;
        height: 125px;   
        display: none;
        flex-direction: column;
        justify-content: center;;
        align-items: center;
    }
    
    #countdown {
        border: none;
        margin: -10px;
        width: 75%;
        max-width: 180px;
        display: flex;
        justify-content: space-between;
    }
    
    .text_timer {
        width: 100%;
        margin-top: -3px;
        text-align: center;
        font-family: Roboto, sans-serif;
        font-weight: 500;
        font-size: 15px;
    }
    
    .big_text {
        border: none;
        margin: 0px;
        font-weight: 600;
        font-family: Roboto, sans-serif;
        font-size: 18px;
    }
    
    .smalltext {
        margin: 0px;
        font-family: Roboto, sans-serif;
        font-size: 8px;
    }
    
    .countdown-el {
        border: none;
        text-align: center;
    }
    
    #player {
        width:80%;
        height: 75px;   
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        margin-top: 15%;
        display: flex;
        align-items:center;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    #btn_play {
        width: 43px;
        height: 43px;
        border: none;
        border-radius: 50%;
        background-color: var(--primary);
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        color: white;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
        
    }
    
    #btn_play:hover {
        transform: scale(1.05);
    }
    
    #btn_play.play::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 19px;
        content: "\f04b";
    }
    
    #btn_play.pause::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 19px;
        content: "\f04c";
    }
    
    #volume_icon {
        margin-left: 2%;
        border: none;
        background-color: transparent;
        position: relative;
        cursor: pointer;
        color: var(--volume);
        transition: transform 0.1s ease-in-out;
    }
    
    #volume_icon:hover {
        transform: scale(1.05);
    }
    
    #volume_icon.unmuted::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 13px;
        content: "\f028";
    }
    
    #volume_icon.muted::after {
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 13px;
        content: "\f6a9";
    }
    
    #wave {
        width: 80px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: none;
    }

    #pause_label {
        font-family: Roboto, sans-serif;
        font-weight: 500;
        font-size: 15px;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }

    .slider {
        -webkit-appearance: none;
        background: transparent;
        width: 30%;
    }
    
    @-moz-document url-prefix() { 
        .slider {
            border: none;
            top: 5px;
            width: 30%;
        }
    }
    
    .slider::-webkit-slider-runnable-track {
        border: 1.2px solid var(--volume);
        border-radius: 10px;
        background: var(--volume);
        height: 0px;
    }
      
    .slider::-moz-range-track {
        border: 1.2px solid var(--volume);
        border-radius: 10px;
        height: 0px
    }
    
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        margin-top: -6px;
        background-color: var(--volume);
        height: 12px;
        width: 12px;    
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
    }
    
    .slider::-moz-range-thumb {
        border: none;
        appearance: none;
        border-radius: 50%;
        background-color: var(--volume);
        height: 10px;
        width: 10px;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
    }
    
    .slider::-webkit-slider-thumb:hover {
        transform: scale(1.1);
    }
    
    .slider::-moz-range-thumb:hover {
        transform: scale(1.1);
    }
    
    #social {
        max-width: 250px;
        width: 80%;
        margin-top: 10%;
        display: flex;
        justify-content: space-between;
    }
    
    .social_icon {
        background-color: #ffffff;
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        font-size: 20px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        border: 3px solid white;
        text-align: center;
        line-height: 40px;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        transition: transform 0.05s ease-in-out;
    }
    
    a:link { text-decoration: none; }
    
    a:visited { text-decoration: none; }
    
    a:hover { text-decoration: none; }
    
    a:active { text-decoration: none; }
    
    .social_icon:hover {
        transform: scale(1.02);
    }
    
    #Facebook {
        color: white;
        background: #4267B2;
    }
    
    #Instagram {
        color: white;
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);;
    }
    
    #Youtube {
        color: white;
        background:  #FF0000;
    }
    
    #Twitter {
        color: white;
        background: #00aced;
    }
    
    #Tiktok {
        color: white;
        background: black;
    }

    .visit {
        margin-top: 10%;
        font-family: Roboto, sans-serif;
        font-size: 15px;
        color: white;
        text-align: center;
    }

    .link {
        color: var(--primary);
        font-weight: 500;
        cursor: pointer;
    }

    .link:hover {
        text-decoration: underline;
    }
    
    #Whatsapp_container {
        height: 60px;
        max-width: 250px;
        width: 60%;
        margin-top: 8%;
        margin-bottom: 7%;
        padding-left: 5%;
        padding-right: 5%;
        background-color: #00e777;
        box-shadow: rgba(0, 0, 0, 0.54) 3px 3px 8px;
        border-radius: 15px;
        align-items: center;
        justify-content: center;
        align-content: center;
        cursor: pointer;
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 10px;
        transition: transform 0.05s ease-in-out;
        
    }
    
    #Whatsapp_container:hover {
        transform: scale(1.02);
    }
    
    #wp_icon {
        margin: none;
        font-size: 1.3em;
        color: white;
    }
    
    .wp_text {
        margin: none;
        color: white;
        font-family: Roboto, sans-serif;
        font-size: 15px;
    }
}