* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

#bg {
    color: #005896;
    background-color: #d8f2ff;
}

#inxh {
    min-height: 100px;
}

#cardbg {
    min-height: 409px;
    border-radius: 30px 30px 30px 30px;
    box-shadow: 4px 2px 21px 0px grey;
    min-width: 90%;
    margin: 35px 8px 8px 8px;
    padding: 16px 24px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-repeat: repeat;
    background-position: middle;
    background-attachment: scroll;
    background-size: auto;
    background-image: linear-gradient(#ffffff 0%, #ffffff 100%);
}
#textdiv {
    flex: 1;
    width: 70vw;
}
#button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#name {
    padding: 0px 10px 10px 10px;
    margin: -20px 596px 1px 32px;
    font-weight: 700;
    font-size: 30px;
    font-family: "Albert Sans", sans-serif;
    color: #005896;
}

#jobtitle {
    padding: 10px;
    font-family: "Albert Sans", sans-serif;
    margin: -15px 493px 0px 32px;
    color: #005896;
    font-size: 1.7em
}
#logo {
    z-index: 1;
    object-fit: contain;
    width: 20vw;
    min-width: 200px;
    position: absolute;
    top: 16px;
    right: 24px;
}

#atrclink {
    padding: 10px;
    font-family: "Albert Sans", sans-serif;
    margin: 0px 493px 0px 32px;
    color: #005896;
    text-decoration: none;
}

#phone {
    padding: 10px;
    font-family: "Albert Sans", sans-serif;
    margin: 0px 200px 0px 32px;
    color: #005896;
}

#email {
    padding: 10px;
    font-family: "Albert Sans", sans-serif;
    margin: 0px 493px 0px 32px;
    color: #005896;
}

#gotoatrc{
    z-index: 2;
    border-radius: 30px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 10vw;
    font-size: max(2vw, 16px);
    text-decoration: none;
    text-decoration-line: none;
    padding: 8px 15px 8px 15px;
    margin: 20vh 32px 4px 1px;
    border: 1px solid #008fd5;
    background-color: #d8f2ff;
}
#contactbutton {
    z-index: 2;
    border-radius: 30px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 10vw;
    font-size: max(2vw, 16px);
    text-decoration: none;
    text-decoration-line: none;
    padding: 8px 15px 8px 15px;
    margin: 4px 32px 4px 1px;
    border: 1px solid #008fd5;
    background-color: #d8f2ff;
}
#gotoatrc:hover,
#contactbutton:hover {
    border: 1px solid #005783;
    background-color: #bee9ff;
}
a{
    text-decoration: none!important;
    text-decoration-line: none;
    font-family: "Albert Sans", sans-serif;
    color:#005896!important;
}
#a:hover {
    color: #00aaff!important;
}

/* Mobile layout: vertical card with logo top, info middle, button bottom */
@media (max-width: 768px) {
    #cardbg {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
    }

    #button-container {
        width: 100%;
        align-items: stretch;
    }

    #logo {
        position: static;
        width: 60vw;
        min-width: 0;
        margin: 16px 0;
    }

    #textdiv {
        width: 100%;
        margin: 8px 0;
    }

    #name,
    #jobtitle,
    #atrclink,
    #email,
    #phone {
        margin: 4px 0;
        padding: 4px 0;
    }

    #gotoatrc,
    #contactbutton {
        width: auto;
        align-self: stretch;
        margin: 8px 24px;
        font-size: 18px;
    }
}