/* Contains CSS formatting for 'index.html' and main.html' */

@font-face {
    font-family: OpenSans;
    src: url(resources/fonts/OpenSans-Regular.ttf);
}

body{
    font-family: OpenSans;
    width:100%;
    height:100%;
    margin:0;
    padding:0;	
    background-color:white;
    /*background-image: linear-gradient(to bottom, steelblue, white), url('resources/images/bw_background_military_bottom.png'); */
    background-image: linear-gradient(to bottom, steelblue, white), url('resources/images/omm_silhouette_bg.png'); 
  
    background-size: 100% 100%, 100% auto, 100% auto;
    background-origin: border-box,border-box,border-box;
    background-clip: border-box,border-box,border-box;
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-attachment: fixed,fixed,fixed;
    background-position: top 0px left 0px, bottom 0px left 0px, top 0px left 0px;
    background-blend-mode: multiply, normal, normal;
}

.mainContainerDiv {
    display:block;
    font-family:OpenSans;
    height:100%;
    width:100%;
    overflow:hidden;
}

/* Grid, cell 1: logo, cell 3: user badge and notification.  Overlapping cells 1 - 3: the title (so it's centered) */
.topAreaSection {
    margin:0px;
    padding:0px;
    display:grid;
    grid-template-columns:min-content 1fr max-content;
}

.leftIconDiv {
    grid-area: 1 / 1 / 2 / 2;
}

.logo_left_img {
    float:left;
    margin:10px;
    width: clamp(75px, 22vmin, 200px);
    padding:0px;
}

.topTitlesDiv{
    margin-top:10px;
    grid-area: 1 / 1 / 2 / 4;
    text-align:center;
}

.indexTitleDiv{
    max-width:58%;
    margin:auto;
}

.indexTitle {
    display:block;
    color:white;
    font-size:clamp(1rem, 3.5vw, 3rem);
    font-family:OpenSans;
    font-weight:bold;
    padding:6px;
}

.indexTitle2 {
    display:block;
    color:white;
    font-size:clamp(0.75rem, 3.5vw, 2rem);
    font-family:OpenSans; padding:6px;
}

.rightIcons {
    display:flex;
    grid-area: 1 / 3 / 2 / 4; /* grid area, last cell */
}