body
{
    background-color: #f7eabb;
    margin: 0;
    padding: 0;

    font-family:  'Futura Round W01 Book';

    /* overflow-x: hidden; */
}

#flexContainer
{
    display: flex;
    flex-direction: row;

    width: 100%;
    height: 100%;
}

#contentLeft
{
    flex-grow: 1;
    flex-shrink: 1;
    
    height: 100%;

    background-color: #f7eabb;
}

.newsContent
{
    margin-top: 25px;
    margin-bottom: 75px;

    font-family: 'Futura Round W01 Book';

    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-direction: column;
}

.newsHeadline
{
    font-size: 75;
}

.newsContainer
{
    margin-top:45px;
    padding-left: 175px;
    width: 75%;
}

.newsTitle
{
    font-size: 35;
    text-decoration: underline;
}

.newsDate
{
    margin-top: 6px;
    font-size: 25;
}

.newsDescription
{
    font-size: 18;
    margin-top:25px;
}


#earlSteamButton.smaller, #earlSteamButton.smaller:hover
{
    width: 180px;
    height: 75px;
}

#earlSteamButton {
    pointer-events: all;
    cursor:pointer;
    user-select: none;

    align-self: center;

    width: 540px;
    height: 225px;
    content: url(images/steam_wishlist_button.png);
}

#earlSteamButton:hover {
    width: 540px;
    height: 225px;
    content: url(images/steam_wishlist_button_over.png);
}

#contentCenter
{
    position: relative;

    flex-grow: 1;

    max-width: 1200px;
    min-width: 800px;
    width: 100%;
    height: 100%;

    background-color: #fff;
}

#contentCenterTop
{
    position: relative;

    aspect-ratio: 24/9;

    width: 100%;

    max-height: 439px;
    min-height: 208px;

    min-width: 1200px;

    background-color: #fff;
    background-image: url("images/newsHeader.png");
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;

}

#contentCenterBottom
{
    position: relative;

    width: 100%;
    height: 100%;

    background-color: #fff;
}

#contentCenterDEBUG
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
}

#contentRight
{
    flex-grow: 1;
    flex-shrink: 1;
    background-color: #f7eabb;
    height: 100%;
}

#topHeaderContainer
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    max-height: 100px;
}

#topHeaderContainer > div
{

}

#topSpacer
{
    flex-shrink: 0;
    flex-grow: 1;
}

#topPressKit
{
    position: relative;
    top: 14px;
    margin-right: 24px;

    font-size: 24;
    pointer-events: all;
    cursor:pointer;
    user-select: none;
}

#topPressKit, #topPressKit a:link, #topPressKit a:visited, #topPressKit a:active {
    color:#000;
    text-decoration: none;
}

#topPressKit:hover, #topPressKit a:hover {
    color:#fff;
    text-decoration: underline;
}


#topFSLogo
{
    flex-grow: 0;
    flex-shrink: 1;

    padding: 10px;
}

#topButtonSteam
{
    flex-grow: 0;
    flex-shrink: 1;

    padding-top: 10px;
}

#topButtonTwitter
{
    flex-grow: 0;
    flex-shrink: 1;

    padding-top: 10px;
}

#topButtonYoutube
{
    flex-grow: 0;
    flex-shrink: 1;

    padding-top: 10px;
    padding-right: 10px;
}

#fsLogoImg
{
    content: url("images/header_fs_logo.png");
    width: 100px;
    height: 100px;
}
#fsLogoImg:hover
{
    content: url("images/header_fs_logo_over.png");
}

#steamImg
{
    content: url("images/header_steam_logo.png");
    width: 90px;
    height: 90px;
}
#steamImg:hover
{
    content: url("images/header_steam_logo_over.png");
}

#twitterImg
{
    content: url("images/header_twitter_logo.png");
    width: 90px;
    height: 90px;
}
#twitterImg:hover
{
    content: url("images/header_twitter_logo_over.png");
}

#youtubeImg
{
    content: url("images/header_youtube_logo.png");
    width: 90px;
    height: 90px;
}
#youtubeImg:hover
{
    content: url("images/header_youtube_logo_over.png");
}

#actionVideoRow
{
    position: absolute;
    bottom: 35px;
    right: 35px;
}

#announcementTrailer
{
    width:280px;
    height:156px;
}

#actionVideoRow.videoIsPlaying
{
    position: fixed;
    z-index: 420;

    flex-direction: column;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;     

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background-color: rgba(0,0,0,0.85);
}

#announcementTrailer.videoIsPlaying
{
    width: 100%;
    height: 100%;
    max-width:1120px;
    max-height:630px;
}

#closeVideoPlayer
{
    display: none;
}

#closeVideoPlayer a:hover, #closeVideoPlayer a:link:hover, #closeVideoPlayer a:visited:hover, #closeVideoPlayer:hover
{
    text-decoration: underline!important;
}

.videoIsPlaying #closeVideoPlayer, .videoIsPlaying #closeVideoPlayer a:link, .videoIsPlaying #closeVideoPlayer a:active, .videoIsPlaying #closeVideoPlayer a:visited
{
    display: block;
    color: #fff;
    font-size: 64;
    font-weight: bold;

    text-decoration: none;

    padding-bottom: 5px;
}

#actionButtonRow
{
    display: flex;
    flex: 10;
    flex-direction: row;
    justify-content: space-around;
}

#actionHeadline, #actionHeadline a:link, #actionHeadline a:visited, #actionHeadline a:active {
    display: flex;
    flex: 10;
    flex-direction: row;
    justify-content: space-around;
    font-size: 64px;
    color:#222;
    text-decoration: none;
}

#actionHeadline.bottomAction a:link
{
    color: #fff;
}

#actionHeadline:hover, #actionHeadline a:hover {
    color:#000;
    text-decoration: underline;
}

#steamButtonContainer
{
    flex-grow: 0;
    flex-shrink: 1;

    width: 100%;
    height: 100%;
    max-width: 614px;
    max-height: 302px;
}

#steamButtonContainerTop
{
    max-width: 350px;
    max-height: 172px;
    position: absolute;
    bottom: 0px;
}

#steamButtonContainerTop, #steamButton
{
    width: 350px;
    height: 172px;
}

#steamButton
{
    width: 100%;
    height: 100%;

    content: url("images/steam_wishlist_button.png");
}
#steamButton:hover
{
    content: url("images/steam_wishlist_button_over.png");
}

#footerContainer
{
    display: flex;
    flex: 10;
    flex-direction:column;
    justify-content: center;
    text-align: center;
}

#footerSocials
{
    width: 50%;
    display: flex;
    flex: 10;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
    align-self: center;
}

#copyright
{
    display: flex;
    justify-content: center;
}

#actionButtonRowSpacer
{
    flex-grow: 1;
    flex-shrink: 0;
}

#characterName
{

}

#earlTextContainer, #ednaTextContainer
{
    display: flex;
    flex-direction: row;
    justify-content: center;

    width: 100%;

    align-items: center;
}

#earlTextContainer > p, #ednaTextContainer > p
{
    width: 45%;

    font-size: 45px;
    color:#ecc01a;
    text-align: center;
}

.characterName
{
    font-size: 75px;
    font-weight: bold;
}

#earlPoseImg
{
    padding-left: 45px;
    width: 315px;
    height: 540px;
    src: url("images/earl_pose_normal.png");
}

#ednaPoseImg
{
    width: 315px;
    height: 540px;
    src: url("images/edna_pose_normal.png");
}

#screenshotsContainer
{
}

#fallingStateLogoContainer
{
    margin-top: 45px;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#fallingStateLogo
{
    width: 100%;
    height: 100%;
    
    max-height: 357px;
    max-width: 847px;

    content: url("images/falling_state_logo.png");
}

#videoGameplayContainer
{
    display: flex;
    flex-direction: row;
    justify-content: center;

    align-items: center;

    overflow: hidden;
}

.videoGameplayClip
{
    width: 720px;
    height: 405px;
    /* opacity: 0.25; */
}

.videoGameplayClipSmaller
{
    width: 576px;
    height: 405px;
}