/* HELPFUL THINGS TO REMEMBER

Common.css classes can be modified even more to fit individual pages, such as the class ".page-content-container" 
and then adding ".index-page" on the end. This way, it keeps all the common class attributes from before but can
be modified further for the individual page. Make sure to include this ONLY on the specified page and not this one.

vh & vw are relative to the browser window

display flex enables more precise centering

divs can not have both float left and display flex
*/


body {
    margin: 0;
    font-family: sans-serif;
}

a {
    text-decoration: none; 
    color:#C8C8C8;
}

a:visited { 
    text-decoration: none; 
    color:#C8C8C8; 
}

a:focus { 
    text-decoration: none; 
    color:#C8C8C8; 
}

a:active { 
    text-decoration: none; 
    color:#C8C8C8;
}

a:hover { 
    text-decoration: none; 
    color:#C8C8C8;
}

.sticky-top-bar {
    position: fixed;
    width: 100vw;
    height: 72px;
    display: flex;
    justify-content: center;
    background: #343442;
    /* border-bottom: lightgray 1px solid; */
}

.top-bar-button-container {
    width: 80vw;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: #343442;
}

.neumorph-button {
    width: 140px;
    height: 48px;
    text-align: center; /* Horizontal Alignment (text specific) */
    line-height: 48px; /* Vertical Alignment (text specific) (must match div height) */

    border-radius: 79px;
    background: linear-gradient(145deg, #383847, #2f2f3b);
    box-shadow:  5px 5px 10px #282832, 
                 -5px -5px 10px #404052;
    color: #C8C8C8;
    /* border-radius: 50px;
    background: #f2f1ed;
    box-shadow:  8px 8px 16px #cecdc9, 
                 -8px -8px 16px #ffffff; */
}

.page-content-container {
    padding-top: 72px;
    width: 100%;
    height: auto;
}

.page-content-item {
    width: 100%;
    height: auto;
}

.page-content-block {
    width: 50%;
    height: auto;
    float: left;
    background: #343442;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container2 {
    padding-top: 72px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.image-container2.2 {
    padding-top: 72px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.resize_fit_center {
    width: 50vw;
    height: 40vw;
    vertical-align: middle;
}

.resize_fit_center2 {
    width: 80vw;
    height: 60vw;
    vertical-align: middle;
    padding-bottom: 72px;
}

.resize_fit_center2.1 {
    width: 60vw;
    height: 40vw;
    vertical-align: middle;
    padding-bottom: 72px;
}

.resize_fit_center3 {
    width: 80vw;
    height: 56vw;
    display: flex;
    padding-bottom: 72px;
}