@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
*{box-sizing:border-box;font-family: "Raleway", sans-serif;font-style: normal;transition:0.2s;}
::selection{background:skyblue;}
body{width:100%;height:100%;margin:0;font-family:'Arial';overflow-x:hidden!important;font-weight:400;}

#masthead{width:100%;height:auto;display:flex;background:white;justify-content:space-between;padding:1rem;position:fixed;top:0px;left:0px;z-index:999;height:110px;}
#masthead #menu{width:40%;display:flex;justify-content:space-between;}
#masthead a {align-self:flex-start;}
#masthead #menu a{text-decoration:none;text-transform:uppercase;}
#logo{height:100%;width:auto;z-index:999;cursor:pointer;}

#wave{width:100%;height:2.97vw;position:fixed;top:110px;left:0px;z-index:998;pointer-events:none;user-select: none;}


#mobilemenu{width:100vw;background:rgb(0,250,179,0.9);height:100dvh;position:fixed;top:0px;right:-100vw;padding:3rem;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;z-index:999;gap:1rem;text-transform:uppercase;transition:0.5s ease;font-size:1.5em;letter-spacing:1px;z-index:997;}
#mobilemenu a{text-decoration:none;}
#mobilemenu a:hover{letter-spacing:2px;}

main{padding:1rem;padding-top:50px;line-height:1.5em;}

a{color:black;text-decoration:none;}


/* INDEX */

.image-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 50vw; gap: 5px; width: 100vw; max-width: 100%; } 
.image { position: relative; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; color: white; font-size: 4rem; text-decoration: none; } 
.image span { position: relative; z-index: 1; opacity: 0; transition: 0.5s ease-in-out; } 
.image:hover span { opacity: 1; } 
.image::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; background-size: cover; background-position: center; transition: transform 0.5s ease-in-out; z-index: 0; } 
.image:hover::after { transform: scale(1.05); } 
.image:nth-child(4n+1) { grid-column: span 2; } 
.image:nth-child(4n+2), .image:nth-child(4n+3) { grid-column: span 1; } 
.image:nth-child(4n+4) { grid-column: span 2; } 
.image a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; text-decoration: none; }

/* Project Page */

.project-container {display: grid; grid-template-columns: 2fr 3fr;}
.col{height:100dvh;overflow:scroll;overflow-x:hidden; -ms-overflow-style: none; scrollbar-width: none;}
.col::-webkit-scrollbar { display: none; }
.col-left{display:flex;flex-direction:column;gap:5px;padding-top:110px;}
.col img{width:100%;}
.col-right{padding:2rem;overflow:auto;padding-top:110px;}
.title{font-size:4rem;margin:1.5em 0 0.5em 0;font-weight:normal;}
.text{line-height:1.5em;}

.post-navigation{width:100%;display:flex;gap:35px;margin:32px 0;}
.post-navigation img{height:35px;}

.nomobile{display:block;}
.image.in-view::after { /* Trigger scale on hover or when in view */
	transition:2s;
    transform: scale(1.1); /* Scale effect */
}

@media (max-width:768px) {
	
	main{margin:1rem;}
	#logo:hover{transform:scale(0.97);}
	#masthead{height:110px;justify-content:flex-end;}
	#masthead #menu{display:none;}
	#mobilemenu{width:100vw;right:-100vw;}
	
	.nomobile{display:none;}
	
	.image-grid { grid-template-columns: 1fr; grid-auto-rows: 100vh; } 
	.image { grid-column: span 1!important; }

	.project-container {grid-template-columns: 1fr;}
	.col{height:auto;}
	.col-right {order: -1;}
	.col-left {padding-top:0;}
}