﻿
* {
    box-sizing: border-box;
}

html {
    /* width: 332px; */
    width: 332px;
    height: 70px;
    border: 1.2px solid #edeef0;
    border-radius: 10px;
}

body {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
}

.button-container {
    display: flex;
    justify-content: space-around; 
    width: 100%;
}

.send-container {
    margin-top: 6px;
    display: flex;
    justify-content: space-evenly; 
    width: 100%; 
}

.send-button, .whatsapp-button, .telegram-button, .yandex-button, .phone-div {
    display: inline-block;
    padding: 3px 6px; /* Adjust padding for size */
    background-color: white;
    color: black; /* Text color */
    text-decoration: none; /* Remove underline */
    line-height: 16px;
    border-radius: 16px; /* Make it oval */
    font-size: 18px; /* Font size */
    transition: background-color 0.3s; /* Smooth transition */
    border: 1.25px solid #000000;
}

.change-button {
    text-decoration: none;
    color: #2371c4;
    font-size: 18px;
}

.change-button:hover {text-decoration: underline;}

.phone-div:hover {
    background-color: #fff200;
}

.whatsapp-button:hover {
    background-color: #61fc00; /* Darker shade on hover */
}

.telegram-button:hover {
    background-color: #00ddff; /* Darker shade on hover */
}

.yandex-button:hover {
    background-color: #f30000; /* Darker shade on hover */
}

.send-button:hover {
    background-color: #a99cff;
}

/* .link-margin {
    margin: 0 1.5px;
} */

.separator {
    border: none; /* Remove default border */
    height: 1.25px; /* Set height */
    background-color: #edeef0; /* Set color */
    margin: 4px 0; /* Add margin for spacing */
    width: 100%; /* Full width */
}