@import url('https://fonts.cdnfonts.com/css/vanilla-extract');

:root {
    --col0: rgb(33, 33, 33);
    --col1: rgb(47, 54, 54);
    --col2: rgb(106, 112, 92);
    --col3: rgb(135, 150, 150);
    --col4: rgb(188, 209, 209);
    --col5: rgb(252, 197, 45);

    /* this just saves the percent value in case the width gets set to fixed px */
    --aboutMeWidthPercent: 38%;
           --aboutMeWidth: 38%; /* this is capped at minimum 550px */
           --aboutMeMinWidth: 550px; /* this is only used by the js */
    --aboutMeFontSize: 12pt;
    --searchFontSize: 10pt;
    --searchBorderRadius: 10px;
    --searchInputPadding: 5px;
    --searchResultPadding: 8px;
    --aboutMePicSize: 45%;
    --aboutMeMargin: 5%;
}

.headerTable {
    line-height: 1.0;
    padding: 10px;
    width: 100%;
    table-layout: fixed;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;
    border-color: var(--col1);
    white-space: nowrap; /* prevent title from wrapping in small window sizes */
}

.headerTable #bannerCell {
    font-family: "Vanilla Extract";
    font-size: 40px;
    letter-spacing: 3px;
    font-weight: 100;
    color: var(--col5);
    text-align: center;
    text-decoration: none;
}
.headerTable #bannerCell #bannerLink {
    /* prevent recoloring after clicking the link */
    text-decoration: none;
    color: var(--col5);
}

.headerTable #about {
    font-family: "Vanilla Extract";
    font-size: 32px;
    font-weight: 100;
    color: var(--col1);
    text-align: left;
    text-decoration: none;
}

.headerTable #about:hover {
    text-decoration: underline;
    cursor: pointer;
}

.headerTable #secret {
    text-align: right;
    font-size: 24px;
    color: var(--col2);
}

#canvasContainer {
    position: relative;
    top: 8px;
    display: flex; /* allows next two lines to center the canvas */
    justify-content: center;
    height: calc(var(--vh, 1vh) * 100 - 117px); /* magic */
}

body {
    overflow-x: hidden;
    background-color: var(--col2);
}

.aboutMeExpandAnim {
    animation: .33s ease-out 0s 1 normal both running aboutMeAnim;
}

.aboutMeRetractAnim {
    animation: .33s ease-out 0s 1 reverse both running aboutMeAnim;
}

#aboutMe {
    width: var(--aboutMeWidth);
    position: absolute;
    left: calc(var(--aboutMeWidth) * -1);
    top: 87px;
    text-align: center;
    opacity: 0;
}

#pic {
    display: inline;
    width: var(--aboutMePicSize);
    height: var(--aboutMePicSize);
    margin: calc(var(--aboutMeMargin) * 1.2);
    margin-bottom: 3%;
    margin-right: 0px;
    border: solid;
    border-width: 2px;
    border-radius: 50%;
    border-color: var(--col0);
    box-shadow: 0px 0px 15px var(--col0);
}

#bioTop {
    display: flex;
    align-items: center;
    justify-content: center;
}

#socials {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: "Vanilla Extract";
    margin-left: 3%;
    margin-right: var(--aboutMeMargin);
    margin-top: 35%;
    flex: 50%;
}

.socialItem {
    flex: 100%;
}

.socialIcon {
    vertical-align: middle;
    width: var(--aboutMeFontSize);
    height: var(--aboutMeFontSize);
    margin-bottom: 4px;
}

.socialLink {
    text-decoration: none;
    color: var(--col1);
}
.socialLink:hover {
    text-decoration: underline;
    color: var(--col0);
}

.infoPanel {
    text-align: left;
    padding: 10px;
    padding-left: var(--aboutMeFontSize);
    padding-right: var(--aboutMeFontSize);
    margin: var(--aboutMeMargin);
    margin-top: 0px;
    margin-bottom: 0px;
    border: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: var(--col0);
    box-shadow: 0px 0px 15px var(--col0);
    font-family: "Vanilla Extract";
    font-size: var(--aboutMeFontSize);
    line-height: 1.5;
    background-color: var(--col4);
    color: var(--col1);
}

.infoPanel h1 {
    text-align: center;
    line-height: 1.0;
}

#searchContainer {
    position: absolute;
    top: 125px;
    box-shadow: 0px 0px 15px var(--col0);
    border-radius: var(--searchBorderRadius);
}

#search {
    font-family: "Vanilla Extract";
    font-size: var(--searchFontSize);
    padding: var(--searchInputPadding);
    background-color: var(--col1);
    color: var(--col4);
    border-style: solid;
    border-width: 3px;
    border-radius: var(--searchBorderRadius);
    border-color: var(--col1);
    outline: none;
}

#search:focus {
    border-color: var(--col3);
}

#searchResultsContainer {
    font-family: "Vanilla Extract";
    font-size: var(--searchFontSize);
    background-color: var(--col1);
    color: var(--col4);
    border-style: none;
    border-width: 3px;
    border-radius: var(--searchBorderRadius);
    border-color: var(--col3);
    border-top: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.search-results {
    margin: -3px;
    padding: var(--searchResultPadding);
}

.search-results:hover {
    background-color: var(--col3);
    cursor: pointer;
}

footer {
    padding: 7px;
    margin-bottom: 10px;
    position: fixed;
    bottom: 0;
    width: calc(100% - 36px);
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;
    border-color: var(--col1);
}

@keyframes aboutMeAnim {
    from {
        transform: translate(0%);
        opacity: 0;
    }

    to {
        transform: translate(100%, 0%);
        opacity: 1;
    }
}