@import "button.css";
@import "hero-banner.css";
@import "post-card.css";

:root {
	--mobile_breakpoint: 480px;
	--tablet_breakpoint: 768px;
	--big_screen_low_breakpoint: 1024px;

	--section_width: calc(4.8*var(--pc_width));
	--filter_bar_width: calc(4.6*var(--pc_width));
	
	--color_dark_blue: #043C40;
	--color_light_blue: #E7F2F0;

	--color_dark_stripes: #839B96;
	--color_light_stripes: #B7CECA;

	--color_dark_grey: #446164;
	--color_secondary: #ED5F40;
}

@media screen and (min-width: 1024px){
	/* :root{
		} */
	}
	
@media screen and (max-width: 768px){
	:root{
		--section_width: calc(3.6*var(--pc_width));
		--filter_bar_width: calc(3.4*var(--pc_width));
	}
}
	
@media screen and (max-width: 480px){
	:root{
		--section_width: 85vw;
		--filter_bar_width: calc(2.2*var(--pc_width));
	}
}

::-moz-selection { /* Code for Firefox */
	color: white;
	background: var(--color_secondary);
}
  
::selection {
	color: white;
	background: var(--color_secondary);
}

html {
	scroll-behavior: smooth;
}

body{
	width: 100%;
	margin: 0;
}


h2{
	font-family: Raleway;
	font-size: 4vw;
	color: var(--color_dark_blue);
}

h6{
	font-family: Raleway;
	font-size: 1.2vw;
	font-weight: lighter;
	color: var(--color_dark_grey);
}


@media screen and (min-width: 1024px){
	h2{
		font-size: 40px;
	}
	h6{
		font-size: 14px;
	}
}
@media screen and (max-width: 768px){
	h6{
		font-size: 1.7vw;
	}
}
@media screen and (max-width: 480px){
	h6{
		font-size: 3.2vw;
	}
}

.main-page-titles{
	width: var(--section_width);
	margin: 12vw auto 2vw auto;
}



#filter-bar, #filter-type-selector, #filter-for-selector{
	display: flex;
	justify-content: space-between;
	width: var(--filter_bar_width);
	margin-inline: auto;
	margin-top: 5vw;
	margin-bottom: 3vw;
	list-style-type: none;	
	align-items: center;
}

#filter-type-selector, #filter-for-selector{
	background: white;
	width: fit-content;
	margin: 0;
	padding: 0;
	border-radius: 50vw;
	border: solid 3px var(--color_dark_blue);
}

#filter-for-selector{
	border: solid 3px var(--color_secondary);
}





.filter-item{
 	font-family: Raleway;
	font-size: 1.5vw;
    font-weight: 500;
	color: var(--color_dark_grey);
	white-space: nowrap;
	transition: text-decoration 0.5s linear;
	cursor: pointer;
	border-radius: 50vw;
	padding: 1vw 1.5vw;
}


.filter-item:not(.filter-active):hover{
	background: var(--color_light_blue);
	transition: 300ms;
	
}

.filter-active{
	color: white;
	background: var(--color_dark_blue);
}

#filter-for-selector .filter-active{
	font-weight: 600;
	background: var(--color_secondary);
}

#filter-type-combobox, #filter-for-combobox{
	display: none;
}


@media screen and (min-width: 1024px){
	#filter-bar{
		margin-top: 50px;
		margin-bottom: 30px;
	}
	.filter-item{
		font-size: 14px;
		padding: 10px 14px;
	}
}

@media screen and (max-width: 768px){
	#filter-bar{
		margin-bottom: 3vw;
		margin-top: 4vw;
	}
	#filter-type-selector, #filter-for-selector{
		border-width: 2px;
	}
	.filter-item{
		font-size: 1.2vw;
		padding: 1vw 1.6vw;
	}
}


@media screen and (max-width: 480px){
	#filter-bar{
		margin-bottom: 5vw;
		margin-top: 8vw;
		width: var(--section_width);
	}
	
	#filter-type-selector, #filter-for-selector{
		display: none;
	}
	#filter-type-combobox, #filter-type-combobox > option, #filter-for-combobox, #filter-for-combobox > option{
		display: flex;
    	border-radius: 5vw;
    	padding: 1vw 2vw;
    	border: 2px solid var(--color_dark_blue);
    	outline: none;
		background: white;
    	color: var(--color_dark_blue);
    	font-family: 'Raleway';
		font-size: 1.6vw;
		font-weight: 600;
		box-shadow: none;
	}
	#filter-for-combobox{
		border: 2px solid var(--color_secondary);
		color: var(--color_secondary);
	}
	#filter-type-combobox > option{
		border-radius : 0;
	}
}

@media screen and (max-width: 480px) {
	#filter-type-combobox, #filter-type-combobox > option, #filter-for-combobox, #filter-for-combobox > option{
		font-size: 3vw;
	}	
}

@media screen and (max-width: 768px){
	#filter-bar > span{
		display: none;
	}
}



#archives-grid, #featured-post-grid, #companies-section, #Other-things-section, #contact-section{
	width: var(--section_width);
	display: flex;
	flex-wrap: wrap;
	margin: auto;
}

#featured-post-grid{
	flex-wrap: nowrap;
	flex-direction: column;
}

.no-post-found-container{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2vw;
	margin: 4vw auto;
}

.no-post-found-container > span{
	color: var(--color_dark_blue);
    font-family: 'Hind';
    font-size: 1.3vw;
}

@media screen and (min-width: 1024px){
	.main-page-titles, #filter-bar{
		margin: 120px auto 40px auto;
	}
	#filter-bar{
		margin: 40px auto 40px auto;
	}

	.no-post-found-container > span{
		font-size: 24px;
	}
}

@media screen and (max-width: 768px){
	.no-post-found-container > span{
		font-size: 2.3vw;
	}
	.main-page-titles{
		margin: 12vw auto 2vw auto;
	}
}

@media screen and (max-width: 480px){
	.main-page-titles{
		font-size: 7.6vw;
		margin-block: 12vw 8vw;
		margin-inline: calc((100vw - var(--section_width))*0.5);
	}
	.no-post-found-container > span{
		font-size: 3.3vw;
	}

	#archives-grid{
		width: 100%;
		justify-content: center;
	}
}


#companies-section{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 5%;
}

.company-card{
	width: 20%;
	padding: var(--pc_padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	text-decoration: none;
} 

.company-card img{
	width: 85%;
	height: auto;
	transition: 1.2s;
}

@supports (-webkit-touch-callout: none) {
	/* CSS specific to iOS devices */ 
	.company-card img{
		height: 65%;
	}
}

.company-card:hover img{
	transition: 0.333s;
	transform: translateY(calc(-0.05*var(--pc_width)));
}

@media screen and (min-width: 1024px) {
	.company-card{
		width: 20%;
		padding: 2vw;
	}
}


@media screen and (max-width: 768px) {
	.company-card{
		width: 20%;
		padding: 2vw;
	}
}

@media screen and (max-width: 468px) {
	.company-card{
		width: var(--pc_width);
		margin-bottom: 5%;
	}
}


#Other-things-section{
	display: flex;
	overflow-y: visible;
	padding: 1vw;
	scrollbar-width: none;
}

#contact-section{
	font-family: Hind;
	display: flex;
	flex-direction: row;
	margin: 2vw auto 5vw auto;
	align-items: center;
	justify-content: center;
}

#contact-section div:first-child{
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 2vw;
    align-items: left;
}

#contact-section img{
	width: 26%;
	margin-left: 5%;
}

@media screen and (min-width: 1024px){
	#contact-section{
		margin: 20px auto 75px auto;
	}
}

@media screen and (max-width: 768px){
	#contact-section{
		margin: 4vw auto 5vw auto;
		gap: 6vw;
	}
	#contact-section img{
		width: 30%;
	}
}

@media screen and (max-width: 480px){
	#contact-section{
		flex-direction: column-reverse;
		margin: 4vw auto 5vw auto;
	}
	#contact-section div:first-child{
		width: 70%;
		font-size: 4vw;
		gap: 6vw;
		align-items: center;
	}	
	#contact-section img{
		width: 66%;
		margin: 0;
	}
}

/*********POST PAGE RELATED*********/
/*********POST PAGE RELATED*********/
/*********POST PAGE RELATED*********/
/*********POST PAGE RELATED*********/
/*********POST PAGE RELATED*********/

.post-page-maintitles, .post-page-subtitles, .post-page-text{
	width: 90%;
	max-width: 600px;
}

.post-page-maintitles{
	font-family: Raleway;
	font-size: 44px;
	color: var(--color_dark_blue);
	margin: 14vw auto 2vw auto;
}

.post-page-subtitles{
	font-family: Raleway;
	font-size: 28px;
	font-weight: lighter;
	color: var(--color_dark_blue);
	margin: 5vw auto 2.5vw auto;
}

.post-page-text{
	display: block;
}

.post-page-text, .post-page-link{
	font-family: Hind;
	font-size: 16px;
	line-height: 22px;
	margin: 0 auto;
	color: var(--color_dark_blue);
	text-indent: calc(3*1.6vw);
}

.post-page-link{
	color: var(--color_secondary);
}

.post-page-large-img{
	width: 60%;
	height: fit-content;
	margin: 3vw auto;
}

.post-page-small-img{
	width: 30%;
	height: fit-content;
	margin: 5vw auto;
}

.post-page-double-img{
	width: 60%;
	height: fit-content;
	margin: 5vw auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.post-page-large-img img, .post-page-small-img img{
	width: 100%;
}

.post-page-double-img img{
	max-width: 48%;
	object-fit: contain;
}

@media screen and (min-width: 1024px){
	.post-page-maintitles, .post-page-subtitles, .post-page-text{
		width: calc(0.95*var(--big_screen_low_breakpoint));
	}
	.post-page-maintitles{
		margin: 140px auto 20px auto;
	}
	.post-page-subtitles{
		margin: 50px auto 25px auto;
	}
	.post-page-text, .post-page-link{
		text-indent: calc(3*16px);
	}
	.post-page-large-img, .post-page-double-img{
		width: calc(0.6*var(--big_screen_low_breakpoint));
		margin: 30px auto;
	}
	.post-page-double-img img{
		width: 300px;
	}
	.post-page-small-img{
		width: calc(0.3*var(--big_screen_low_breakpoint));
		margin: 50px auto;
	}
}

@media screen and (max-width: 768px){
	.post-page-maintitles{
		font-size: 38px;
		margin: 16vw auto 3vw auto;
	}
	.post-page-subtitles{
		font-size: 22px;
		margin: 8vw auto 4vw auto;
	}
	.post-page-text, .post-page-link{
		font-size: 16px;
		text-indent: calc(3*1.6vw);
	}
	.post-page-large-img{
		width: 67%;
		margin: 3vw auto;
	}
	.post-page-small-img{
		width: 40%;
		margin: 5vw auto;
	}
	.post-page-double-img{
		width: 67%;
	}
}

@media screen and (max-width: 480px){
	.post-page-maintitles{
		margin: 28vw auto 4vw auto;
	}
	.post-page-subtitles{
		margin: 12vw auto 6vw auto;
	}
	.post-page-large-img{
		width: 80%;
		margin: 6vw auto;
	}
	.post-page-small-img{
		width: 50%;
		margin: 8vw auto;
	}
	.post-page-double-img{
		width: 80%;
	}
}

/*********GENERAL STUFF*********/
/*********GENERAL STUFF*********/
/*********GENERAL STUFF*********/
/*********GENERAL STUFF*********/
/*********GENERAL STUFF*********/

hr.separator{
	width:80vw;
	height:1px;
	background-color: var(--color_light_stripes);
	border-width:0;
	text-align:center;
	margin: 12vw auto 0 auto;
}

hr.separator:first-child{
	margin-bottom: 0;
}

@media screen and (min-width: 1024px){
	hr.separator{
		width: calc(0.85*var(--big_screen_low_breakpoint));
		margin: 120px auto 40px auto;
	}
}



.hidden{
	display: none;
}

.text-centered{
	text-align: center;
}

/*********OTHER POST PAGES *********/
/*********OTHER POST PAGES *********/
/*********OTHER POST PAGES *********/
/*********OTHER POST PAGES *********/
/*********OTHER POST PAGES *********/


hr.small-separator{
	width: 25%;
	height: 1px;
	background-color: var(--color_dark_blue);
	border-width: 0;
	text-align: center;
	margin-left: auto;
	margin-top: 1vw; 
	margin-bottom: 24vw;
}


iframe{
	width: 47vw;
	height: 27vw;
	margin: 0 auto;
	border-style: solid;
	border-radius: 0.7vw;
	border-width: 1%;
	border-color: #033C40;
	background-color: #033C40;
	display: block;
	margin-bottom: 1vw;
}

audio{
	display: block;
	margin: 0 auto;
	margin-bottom: 1vw;
}


@media screen and (min-width: 1024px){
	hr.small-separator{
		margin-bottom: 240px;
	}
	iframe {
		width: calc(0.47*var(--big_screen_low_breakpoint));
		height: calc(0.27*var(--big_screen_low_breakpoint));
		border-radius: 7px;
	}
}


@media screen and (max-width: 768px) {
	iframe  {
	width: 64vw;
	height: 36vw;
	}
}

@media screen and (max-width: 480px) {
	iframe {
	width: 80vw;
	height: 45vw;
	} 
}


.drawings-rect-v{
	width: 50%;
	height: fit-content;
	margin: 3vw auto 0 auto;
}

.drawings-double-rect-v{
	width: 70%;
	height: fit-content;
	margin: 3vw auto 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.drawings-double-rect-h{
	width: 51%;
	height: fit-content;
	margin: 3vw auto 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 2vw;
}

.drawings-rect-h{
	width: 70%;
	height: fit-content;
	margin: 3vw auto 0 auto;
}

.drawings-rect-v img, .drawings-rect-h img{
	width: 100%;
}

.drawings-double-rect-v img{
	width: 49%;
	object-fit: cover;
}

.drawings-double-rect-h img{
	width: 100%;
	object-fit: cover;
}

@media screen and (min-width: 1024px){
	.drawings-rect-v{
		width: calc(0.5*var(--big_screen_low_breakpoint));
		margin: 30px auto 0 auto;
	}
	.drawings-double-rect-v{
		width: calc(0.6*var(--big_screen_low_breakpoint));
		margin: 30px auto 0 auto;
	}
	.drawings-rect-h{
		width: calc(0.7*var(--big_screen_low_breakpoint));
		margin: 30px auto 0 auto;
	}
	.drawings-double-rect-h{
		width: calc(0.51*var(--big_screen_low_breakpoint));
		margin: 30px auto 0 auto;
		gap: 20px;
	}
}

@media screen and (max-width: 768px){
	.drawings-rect-v{
		width: 60%;
	}
	.drawings-double-rect-v{
		width: 80%;
	}
	.drawings-rect-h{
		width: 80%;
	}
	.drawings-double-rect-h{
		width: 56%;
	}
}

@media screen and (max-width: 480px){
	.drawings-rect-v{
		width: 85%;
	}
	.drawings-double-rect-v{
		width: 85%;
	}
	.drawings-rect-h{
		width: 85%;
	}
	.drawings-double-rect-h{
		width: 70%;
	}
}


.canvas-title{
	margin-top: 4vw;
	text-align: center;
}