@import "se2023mobile.css"  screen and (orientation:portrait);
@import "se2023desktop.css" screen and (orientation:landscape);

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

p {
	font-weight: normal;
	font-family: sans-serif;
	color: black;
}

.button {
	font-family: verdana;
	display: inline-block;
	color: white;
	background-color: #125b1c;
	align: center;
	margin:0;
	cursor:pointer;
}

/* Navigation bar */

:root {
	--theme-text: black;
	--theme-supertext: blue;
	--theme-color: purple;
	--theme-background: white;
	--theme-inverse: purple;
	--theme-outlinecolor: rgb(23, 23, 23);
}

.nav-bar {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:stretch;
	width:100%;
	background:var(--theme-background);
	color:var(--theme-text);
}

.nav-bar-nav-list {
	align-items: center;
	flex-wrap: wrap;
	display: flex;
    list-style-type: none;
	margin:0;
	row-gap: 0;

}

.nav-bar-item {
	background: var(--theme-background);
	display:flex;
	flex-direction: row;
	vertical-align: middle;
	align-items: center;
	margin:0;
}

.nav-bar-item:hover {
    text-decoration-line: underline;
}

.nav-bar-button, .nav-bar-login, .nav-bar-logout, .nav-bar-home {
	min-width: 54px;
	color: var(--theme-text);
	white-space: nowrap;
	cursor: pointer;
	background-color: var(--theme-background);
	border: none;
	flex-grow: 0;
	flex-shrink: 0;
	justify-content: center;
	align-self: stretch;
	align-items: center;
	padding: 0 .5rem;
	font-size: .875rem;
	line-height: normal;
	display: flex;
	outline-offset: -.125rem !important;
	text-decoration: none !important;
}

.nav-bar-login {
	border: 1px solid black;
	color: white;
	background-color: green;
	max-height: 2rem;
}

.nav-bar-home {
	border: 1px solid black;
	color: black;
	background-color: cyan;
	max-height: 2rem;
}

.nav-bar-logout {
	border: 1px solid black;
	color: white;
	background-color: red;
}

@media screen and (orientation:landscape) {
	.nav-bar-item {
	/*
		min-height:2rem;
		max-height:3rem;
	*/
	}
}

@media screen and (orientation:portrait) {
	.nav-bar-item {
	/*
		min-height:0.5rem;
		max-height:1.5rem;
	*/
	}
}

/* Hero Content (PagePictureBar) */

.hero-content {
	width:100%;
	background-image: 
		url("/images/Foto0601_v2.png")
	;
	background-repeat: no-repeat;
	background-position-y: center;
	background-size: cover;
	display:flex;
}

.hero-container {
	background:var(--theme-background);
	box-sizing: border-box;
}

.hero-assoc-box {
	background:white;
    display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:left;
}

.hero-assoc-thumbnail {
	width:8rem;
	height:5rem;
}

@media screen and (orientation:landscape) {
	.hero-content {
		justify-content:space-between;
	}
	.hero-container {
		position:relative;
		max-width:35%;
		padding:2rem;
		margin-top:5rem;
		margin-bottom:5rem;
		left:3rem;
		align-self:start;
	}
	.hero-assoc-box {
		position:relative;
		margin-top:5rem;
		margin-bottom:5rem;
		right:4rem;
		width:10rem;
		padding:0.5rem;
		background:white;
	    display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-evenly;
		align-self:start;
	}
	.hero-assoc-thumbnail {
		width:4rem;
		height:3rem;
	}

}

@media screen and (orientation:portrait) {
	.hero-content {
		position:relative;
		xxmin-height:40rem;
		flex-direction: column;
		box-sizing: border-box;
	}
	.hero-container {
		position:relative;
		padding:2rem;
		width:100%;
		margin: auto;
		top:2rem;
	}
	.hero-assoc-box {
		position: relative;
		width:100%;
		margin-top:3rem;
		justify-content:space-evenly;
	}
}

.hero-supertitle {
	box-sizing: border-box;
	color: var(--theme-supertext);
	color-scheme: light;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 3.6px;
	line-height: 15.6px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline-color: var(--theme-outlinecolor);
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	text-rendering: optimizelegibility;
	text-transform: uppercase;
}

.hero-title {
	box-sizing: border-box;
	color: var(--theme-text);
	color-scheme: light;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 38.25px;
	margin-bottom: 24px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline-color: var(--theme-outlinecolor);
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	text-rendering: optimizelegibility;
	word-break: break-word;
	text-transform: uppercase;
}
.hero-image {
	align-items: stretch;
	background-color: var(--theme-background);
	box-sizing: border-box;
	color: var(--theme-text);
	color-scheme: light;
	display: flex;
	flex-direction: column;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	justify-content: space-between;
	line-height: 25.6px;
	outline-color: var(--theme-outlinecolor);
	padding-inline-end: 16px;
	padding-inline-start: 16px;
	position: relative;
	text-rendering: optimizelegibility
}

.hero-button {
	align-items: center;
	border:1px solid black;
	box-sizing: border-box;
	background-color:var(--theme-background);	
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	justify-content: center;
	color: var(--theme-text);
	color-scheme: light;
	cursor: pointer;
	overflow-wrap: break-word;
	padding-block-end: 5px;
	padding-block-start: 5px;
	padding-inline-end: 12px;
	padding-inline-start: 12px;
	margin-block-end: 8px;
	margin-inline-end: 8px;
	text-align: center;
	text-decoration-line: none;
	/*
	text-decoration-color: rgb(23, 23, 23);
	text-decoration-style: solid;
	text-decoration-thickness: auto;
	text-rendering: optimizelegibility;
	*/
	vertical-align: middle;
	line-height: 24px;
	text-transform: uppercase;
}

.hero-button:hover {
	color: white;
	background-color: var(--theme-inverse);
}

.hero-slogan {
	box-sizing: border-box;
	color: var(--theme-text);
	color-scheme: light;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	margin-block-start: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 8px;
	outline-color: var(--theme-outlinecolor);
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	text-rendering: optimizelegibility;
	text-transform: uppercase;
}

.hero-summary {
	box-sizing: border-box;
	color: var(--theme-text);
	color-scheme: light;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	margin-block-start: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 8px;
	outline-color: var(--theme-outlinecolor);
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	text-rendering: optimizelegibility;
}

/* 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;
	}
}