@charset "UTF-8";
/* CSS Document */

body {
	font-family: Times, "Times New Roman", "serif";
	margin: 0;
	padding: 0;
}

/* community */

.grid-container-net {
	padding: 8%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
	z-index: 1;
}

.grid-item-net {
	position: relative;
    /*background-color: #98E4AD;  /* Placeholder color, change as needed */
    aspect-ratio: 1 / 1; /* Ensures square items */
	text-align: center;
	overflow: visible;
	z-index: 2;
	
}

.img-net {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	visibility: hidden;
	z-index: -1;
}

.grid-item-net:hover > .img-net {
	visibility: visible;
}

/* ressources */

.toc {
	position: fixed;
	margin-left: 25px;
	width: 225px;
	height: 100vh;
	display: flex;
	align-items: center;
}

.grid-container-res {
	padding-top: 100px;
	padding-bottom: 100px;
	margin-bottom: 25px;
	margin-left: 250px;
	z-index: 10;
	
}

.grid-item-res {
	position: relative;
	padding-top: 25px;
	/*border-style: solid;
	border-color: blue;*/
	display: flow-root;
	overflow: hidden;
}

.grid-item-res-prev {
	position: relative;
	right: 33%;
	/*border-style: solid;
	border-color: coral;*/
	float: right;
	display: flex;
	align-items: flex-end;
	
}
.grid-item-res-prev img {
	width: auto;
	height: auto;
}

.grid-item-res-tag {
	position: absolute;
	left: 66%;
	bottom: 0;
	margin-left: 20px;
	/*border-style: solid;
	border-color: greenyellow;*/
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

/* general */

.navi {
	position: fixed;
	top: 25px;
	left: 25px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	display: block;
	font-size: 1em;
	font-weight: bold;
	z-index: 100
}

.address{
	position: fixed;
	left: 25px;
	bottom: 25px;
	z-index: 100;
}

.link1{
	display: block;
	color: #00A0E3;
}

.link2{
	display: block;
	color: #E82687;
}

.button {
	text-decoration: inherit;
	font-style: normal;
	color: black;
}

/* intro */

.logo {
	position: fixed;
	top: 	50%;
	left: 	50%;
	transform:translate(-50%,-50%);
	text-align: center;
}

.slide{
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto;
    height: auto;
	transform: translate(-50%, -50%);
	z-index:-100;
		
}

/* other */

.center {
	position: fixed;
	left: 	50%;
	transform: translate(-50%);
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* fonts */

a{
	font-style: italic;
	
}

@media screen and (max-width: 767px) {

/* general */
.resources{
	margin-left: 30px;
}
.navi {
	position: fixed;
	bottom: 15px;
	left: auto;
	top:auto;
	width: 100%;
	text-align: center;
	background-color: white;
	border: 10px;
}

.address {
	position: fixed;
	top: 0;
	bottom: auto;
    left: 0;
	right: auto;
    transform: rotate(90deg);
    transform-origin: left bottom;
    white-space: nowrap;
    padding: 5px;
	display: flex;

}

.link1{
	margin-left: 8%;
	display: inline;
	color: #00A0E3;
}

.link2{
	margin-left: 8%;
	display: inline;
	color: #E82687;
}

/* resources */

.toc {
	display: none;
}

.grid-container-res {
	padding: 0;
	margin: 0;
}

/* community */

.grid-container-net {
	grid-template-columns: repeat(3, 1fr);
	padding: 40px;
}

h5.grid-item-net {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* fonts */