/* ====== Index Main ====== */

.index-main-container {
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
    align-items: center;
    background-color: #faf9f8;
    align-self: center;
}

.index-left-container {
    display: grid;
    grid-template-columns: repeat(17, 1fr);
    grid-auto-rows: 1fr;
    width: clamp(40%, 100%, 40%);
    min-width: 320px;
}

.index-left-grid-square {
}

.beige-box {
    grid-area: 4 / 1 / 18 / 15;
    background-color: #e8e3de;
}

.headshot-container {
    grid-area: 1 / 4 / 15 / 18;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.headshot {
    max-width: 100%;
    animation-name: headshotKf;
    animation-direction: alternate;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes headshotKf {
    0% {margin-left: -300%;}
    40% {margin-left: 0;}
    60% {margin-left: 0;}
    100% {margin-left: -300%;}
}

.main-logo-container {
    grid-area: 1 / 4 / 15 / 18;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.main-logo {
    max-width: 100%;
    background: transparent;
    animation-name: main-logoKf;
    animation-direction: alternate-reverse;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes main-logoKf {
    0% {margin-left: 0;}
    40% {margin-left: -250%;}
    60% {margin-left: -250%;}
    100% {margin-left: 0;}
}

.index-right-container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: clamp(60%, 100%, 60%);
    padding: 3vh 10%;
    background-color: #faf9f8;
    gap: 3vh;
}

    .index-right-container h1 {
        text-align: left;
        margin-right: 10%;
        font-family: 'Baskerville Old Face';
        font-weight: 500;
        font-size: calc(35px + 2vw);
        color: black;
        align-self: center;
    }

    .index-right-container p {
        color: black;
        font-family: 'Baskerville Old Face';
        font-size: calc(25px + 0.5vw);
        text-align: center;
    }

.index-button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aboutme-button {
    color: black;
    border: 2px solid black;
    border-radius: 22px;
    text-decoration: none;
    font-size: calc(10px + 1vw);
    padding: 0.25em 0.5em;
    white-space: nowrap;
    margin-left: 10%;
}

.social-buttons-wrapper {
    display: flex;
    margin-right: 15%;
    max-width: 20%;
}

.email-icon {
    flex: 0 1 auto;
    width: 100%;
    background: transparent;
}

.linkdin-icon {
    flex: 0 1 auto;
    width: 100%;
    background: transparent;
}