@import "se2025mobile.css"  screen and (orientation:portrait);
@import "se2025desktop.css" screen and (orientation:landscape);

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
	color: black;
}

p {
	font-weight: normal;
	color: black;
}

.button {
	display: inline-block;
	color: white;
	background-color: #125b1c;
	text-align: center;
	margin:0;
	cursor:pointer;
}
/*****************************************************************************/
/* Navigation bar                                                            */
/*****************************************************************************/
.nav-flash {
  animation: nav-colorflash 1s infinite;
}

@keyframes nav-colorflash {
  0%, 100% { background-color: inherit; }
  50% { background-color: yellow; }
}

.nav-bar {
	z-index:4;     /* Needs to be higher than the z-index of .hero-banner */
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	width:100%;
	background:var(--theme-background);
	color:var(--theme-text);
	font-size: 1.0rem;
}
@media screen and (orientation:landscape) {
	/* The nav bar is in a fixed position on desktop devices, even when the user scrolls */
	.nav-bar {
		position:sticky;
		top:0;
	}
}
@media screen and (orientation:portrait) {
	.nav-bar {
		/* The nav bar scrolls with the page on mobile devices                               */
		/* There's much less real estate available, so a fixed position takes too much space */
		position:relative;
		top:0;
	}
}
/*****************************************************************************/
/* Containers in the nav-bar.                                                */
/*****************************************************************************/
.nav-bar-institution-container, .nav-bar-logo-container, .nav-bar-tab-container, .nav-bar-icon-container, .nav-bar-flag-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	background-color: rgba(0,0,0,0);
}
/*****************************************************************************/
.nav-bar-logo-container {       /* Container for SE logo */
	flex-basis: 5%;
	flex-grow: 1;
}
.nav-bar-logo {          /* The institution logo */
	cursor: pointer;
	margin  : 0;
	padding : 0 1vw 0 1vw;
	width: 8vw;
	height: 8vw;
	min-height: 2rem;
	min-width: 2rem;
	max-height: 4rem;
	max-width: 4rem;
}
/*****************************************************************************/
.nav-bar-institution-container { /* Institution name (Spoken English) */
	flex-basis: 5%;
	flex-grow: 1;
	word-break: word;
	font-size: 1.5rem;
}

/*****************************************************************************/
/* Contains textual tabs, and potentially drop down menus items              */
/*****************************************************************************/
.nav-bar-tab-container {             /* container for text tabs */
	flex-wrap: wrap;
	flex-grow:10;
	justify-content: right;
	color: var(--theme-text);
}
@media screen and (orientation:portrait) {
	.nav-bar-tab-container {
		flex-grow:5;
	}
}
.nav-bar-item {      /* Container (within nav-bar-list) for each menu item, login button, flags etc. */
	display: inline-block;
	/* padding:0.5vw; */
	cursor: pointer;
	color: var(--theme-text);
}
.nav-bar-item:hover {
    text-decoration-line: underline;
}
.nav-bar-dropdown {
	display:block;
	cursor: pointer;
	margin:0;
	padding:0;
	flex-grow:0;
	cursor: pointer;
	background-color: var(--theme-background);
	color: var(--theme-text);
}
.nav-bar-dropdown-item-container { /* Button in the nav-bar */
	display: none;
	position: absolute;
	color: var(--theme-text);
	background-color: var(--theme-background);
}
.nav-bar-dropdown-item {
	color: var(--theme-text);
	background-color: var(--theme-background);
	margin:0;   /* Otherwise you get gaps in the dropdown */
	padding: 0.5vw;
}
.nav-bar-dropdown:hover { /*  */
	background: var(--theme-inverse);
}
.nav-bar-dropdown:hover > .nav-bar-dropdown-item-container { /* Text item in the dropdown */
	display:block;
}
.nav-bar-dropdown-item:hover {
	text-decoration-line: underline;
	background: var(--theme-inverse);
}
.nav-bar-tab { /* Button in the nav-bar */
	white-space: nowrap;
	padding: 0 0.5vw 0 0.5vw;
	border: none;
	justify-content: center;
	align-self: stretch;
	align-items: center;
	line-height: normal;
	color: var(--theme-text);
	border-radius: 0.5vw;
}
@media screen and (orientation:landscape) {
	.nav-bar-tab, .nav-bar-dropdown-item {
		font-size: 1.0rem;
	}
}
@media screen and (orientation:portrait) {
	.nav-bar-tab, .nav-bar-dropdown-item {
		font-size: 0.75rem;
	}
}

/*****************************************************************************/
/* Contains house.svg etc.                                                   */
/*****************************************************************************/
.nav-bar-icon-container {             /* container for icons e.g. house.svg */
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	margin:0;
	row-gap: 0;
	flex-basis:10%;
	flex-grow:1;
	max-width:9%;
}
.nav-bar-login, .nav-bar-logout, .nav-bar-home {
	min-height: 2rem;
	max-height: 4rem;
	height: 2vw;
}
/* For svgs, instead of "color" you have to specify a filter */
/* See https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element#53336754 */
/* And see https://codepen.io/sosuke/pen/Pjoqqp */
.nav-bar-login {  /* green */
	filter: invert(89%) sepia(22%) saturate(773%) hue-rotate(69deg) brightness(100%) contrast(89%);
}
.nav-bar-home {   /* yellow */
	filter: invert(95%) sepia(21%) saturate(6921%) hue-rotate(314deg) brightness(124%) contrast(95%);
}
.nav-bar-logout {  /* red */
	filter: invert(13%) sepia(93%) saturate(5535%) hue-rotate(352deg) brightness(94%) contrast(87%);
}
/*****************************************************************************/
/* Contains flags etc.                                                       */
/*****************************************************************************/
.nav-bar-flag-container {             /* container for flags e.g. argentina-flag.jpg */
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin:0;
	row-gap: 0;
	/* flex-basis:15%; */
	flex-grow:1;
	max-width:9%;
}
.nav-bar-flag {
	min-height: 1rem;
	height: 1.75vw;
	cursor: pointer;
}
/*****************************************************************************/

/* Items in the nav-bar containers */



.xxnav-bar-tab, .nav-bar-login, .nav-bar-logout, .nav-bar-home { /* Button in the nav-bar */
	display: flex;
	white-space: nowrap;
	border: none;
	flex-grow: 0;
	flex-shrink: 0;
	justify-content: center;
	align-self: stretch;
	align-items: center;
	line-height: normal;
}







/* Blog DIV on the index page */

.blog-div {
	/* Contains all the blog articles */
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	background-color:grey;
}

.blog-article {
	position:relative;
	display:flex;
	width:25rem;
	height:25rem;
	overflow-y:auto;
}

@media screen and (orientation:portrait) {
	.blog-div {
		top:60rem;
	}
}

@media screen and (orientation:landscape) {
	.blog-div {
		top:30rem;
	}
}