/* Global themes */
@import url(corporate_colors.css);

body {
    /* base dark text */
    color: var(--dark-color);
    background-color: white;
    font-size: large;
    font-family:Arial, Helvetica, sans-serif;  
    border: solid var(--dark-blue) 2px;
}

.header-box {
    padding-left: 3em;
    min-height: 5em;
    
    color: var(--light-text);
    background-color:var(--dark-blue) ;
    
    align-content: center;
}

.page-header {
    font-size: 4em;
    font-weight: bold;
    color: white; 
    max-width: 100%;
}

#FZJ-page-logo{
    padding-top: 1.5em;
    padding-bottom: 1em;
    margin-left: 5em;
    max-width: 12%;
}

.streched-text-input {
    border-radius: 15px;
    padding: 10px;
    flex: 1 1 auto;
    margin: 0px 10px 0px 0px;
    font-size: large;
}

.divider {
   /*The grey divider between the logo and the "Supercomputing Search Engine" in the header*/
   width: 1px;
   height: 45px;
   background-color: #ccc;
   /*margin-left: 1em;*/
   margin-right: 2em;
}

.header {
   align-items: center;
   background-color: white;
   display: flex;
   justify-content: center;
   /*margin-right: 15em;*/
}

.footer {
   align-items: center;
   background-color: white;
   display: flex;
   justify-content: center;
   padding-top: 30px;
}

#Engine-text {
    /*To set the colour for the "Supercomputing Search Engine" in the header*/
    color: var(--dark-blue);
    font-size: larger;
}

#engine-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Main containers */


.container {
    border: solid 1px lightgray;
    padding: 10px;
    margin: 3px 3px 3px 3px;
}

.borderless {
    border: none;
}

.vert {
    display: flex ;
    flex-direction: column;  
}

.hor {
    display: flex;
    flex-direction: row;
    justify-content: baseline;
    align-items: center;
}

.image-container {
  position: relative;
  width: 100%; 
  height: 400px;
  overflow: hidden; /*Cut off if picture is too big*/
}

.image-container img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /*If necessary, picture is cutted*/
}

.overlay-box {
  /*The white box on start page, which lies on the Supercomputer picture and contains the model selection and search bar*/ 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; 
  height: 40%; 
  background-color: rgba(255, 255, 255, 0.8); /* semi-transparent white */
  display: auto;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.grid-2x2 {
  display: grid;
  grid-template-columns: 280px 1fr; /* linke Spalte fix, rechte flexibel */
  grid-template-rows: auto auto;   /* 2 Zeilen, Höhe durch Inhalt bestimmt */
  gap: 10px;
  width: 100%;
  margin-top: 30px;
  margin-left: 20px;
  align-items: center;
}

.grid-2x2 #search-bar {
    /* Search bar specifically for the first page */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 0;
    margin: 0 30px 0 0;
    grid-area: search;
}

/*.overlay-box-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "left right"
    "search search";
  gap: 20px;
  padding: 10px;
  width: 100%;
  height: auto;
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#text-left {
  grid-area: left;
  font-weight: bold;
}

#text-right {
  grid-area: right;
  text-align: left;
  font-weight: bold;
}

#text-start {
    margin-left: 30px;
    margin-top: 20px;
} 
*/

/* Interactive Elements */

.base-button {
    display: inline-block;
    
    padding: 10px 28px;
    margin: 4px 2px; 
    
    background-color: var(--light-blue);
    color: rgb(0, 0, 0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
     
    border-radius: 10px;

    text-align: center;
    text-decoration: none;
    
    cursor: pointer; 
}

.copyright {
  color: grey;
  font-size: 16px;
  padding-top: 10px;
}