*, *::before, *::after {
    box-sizing: border-box;
}


:root {
    --navbar-color: #C4C4C4;
    --introduction-panel-color: #A1D0FF;
    --info-panel-color: #7C95D6;
    --default-text-color: #2e4e4e;
    --button-hovercolor: #E5E5E5;
    --background-color: #fbeaed;
    
    --email-button-main: #FCE5DE;
    --email-button-hover: #F8D8D1;
    --email-button-logo: #FDF7F4;
}

/* Default Values +++ */
html, body {
    padding: 0;
    margin: 0;
    background-color: var(--background-color);
    height: 100vh;
}

body {
    margin: 0;
}

h1 {
    padding: 0;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-style: normal;
    color: var(--default-text-color);
}

h2 {
    padding: 0;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-style: normal;
    color: var(--default-text-color)
}

h3 {
    padding: 0;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-style: normal;
    color: var(--default-text-color)
}

a {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-style: normal;
    color: var(--default-text-color)
}

p {
    padding-left: 1rem;
    padding-bottom: 1rem;
    font-family: "Google Sans", sans-serif;
    font-style: normal;
    font-weight: 350;
    font-size: 20px;
    color: var(--default-text-color)
}
/* Default Values --- */

/* Webpage Styling +++ */

div.title h1, h2, p {
    text-align: center;
    margin: 2.1em;
}

div.title h1, h2, p {
    margin-bottom: 3em;
}


div.email_button {
    width:500px;
    max-width:90%;
    margin:40px auto;
    display:flex;
    align-items:center;
    border-radius:40px;
    padding:20px 30px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    background:linear-gradient(90deg,#FCE5DE,#FBECE7);

}
div.email_button a {
    text-decoration: none;
}
div.email_button #email_label {
    margin: 0;
    margin-left: 4%;
    padding: 0;
}

div.email_button #email {
    margin: 0;
    padding: 0;
}
div.icon_container {
    background-color: #ffffff;
    height: 70px;
    width: 70px;
    border-radius: 50px;
    min-width: min-content;
}
div.email_button #icon-email {
    transform: translate(27px, 27px) scale(1.6);
}

div.phone_button {
    width:500px;
    max-width:90%;
    margin:30px auto;
    display:flex;
    align-items:center;
    border-radius:40px;
    padding:20px 30px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    background:linear-gradient(90deg,#e8ecd8,#dde5c7);

}

div.phone_button a {
    text-decoration: none;
}
div.phone_button #phone_label {
    margin: 0;
    margin-left: 30px;
    padding: 0;
}

div.phone_button #phone {
    margin: 0;
    padding: 0;
}
div.icon_container {
    background-color: #f8f3ee;
    height: 70px;
    width: 70px;
    border-radius: 50px;
}
div.phone_button #icon-phone {
    transform: translate(27px, 27px) scale(1.6);
}

@media (max-width: 600px) {

    html, body {
        height: 100svh;
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    div.title h1, h2, p {
        text-align: center;
        margin: 0;

    }

    div.title h1, h2 {
        margin: 0.5em;
    }

    div.title p {
        margin: 0.5em;
    }


    div.phone_button {
        transform: scale(0.9);
    }

    div.email_button {
        transform: scale(0.9);
    }

    div.email_button #email_label p {
        font-size: 0.7em;
    }
}