@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900') ;
@font-face {
	font-family: "Ninna" ;
	src: url("ninna.woff2") format("woff2"),
		url("ninna.woff") format("woff") ;
	font-weight: normal ; font-style: normal ; font-display: swap ;
}

* { box-sizing: content-box ; margin: 0 ; padding: 0 ; }

:root {
	--bg-color: #f2f2ed ;
	--front-color: #575756 ;
	--color: black ;
}

body.menu { background-color: var(--bgcolor) ; display: flex ; justify-content: center ; align-items: center ; }
body.menu div.logo { position: fixed ; top: 1rem ; left: 1rem ; }
body.menu div.logo a { font: 1.5rem Ninna ; color: var(--front-color) ; text-decoration: none ; }
body.menu main { display: flex ; justify-content: space-evenly ; align-items: center ; width: 100dvw ; height: 100dvh ; }
body.menu main a { padding: 1rem 2rem ; border: .125rem solid var(--front-color) ; border-radius: .25rem ; text-decoration: none ; text-transform: uppercase ; font: 3rem Ninna ; color: var(--front-color) ; transition: background-color .25s ease-in-out, color .25s ease-in-out ; }
body.menu main a:active, body.menu main a:focus, body.menu main a:hover { background-color: var(--front-color) ; color: var(--bg-color) ; }
body.menu footer { position: fixed ; bottom: 1rem ; right: 1rem ; font: 1rem Ninna ; color: var(--front-color) ; text-align: right ; text-wrap: balance ; }
body.menu footer a { color: var(--front-color) ; }

body.home main { display: flex ; justify-content: center ; align-items: center ; width: 100dvw ; height: 100dvh ; }

body.bio { display: grid ; grid-template-rows: min-content min-content auto ; min-height: 100dvh ; }
body.bio main { flex-grow: 1 ; margin-block-start: 5rem ; padding: 2rem ; display: grid ; grid-template-columns: 1fr 1fr ; gap: 2rem ; }
body.bio main h2 { font: 500 1.25rem / 1 Roboto ; text-wrap: balance ; padding: 2rem 0 1rem 0 ; }
body.bio main h2:first-child { padding-block-start: 0 ; }
body.bio main p { font: 400 1rem / 1.5 Roboto ; text-wrap: pretty ; margin-block-end: 1rem ; }
body.bio main p:last-child { margin-block-end: 0 ; }
body.bio ml-menu { margin-block-start: auto ; }

body.cv { display: grid ; grid-template-rows: min-content min-content auto ; min-height: 100dvh ; }
body.cv main { margin-block-start: 5rem ; padding: 2rem ; display: block ; }
body.cv main h2 { font: 500 1.25rem / 1 Roboto ; text-wrap: balance ; padding: 2rem 0 1rem 0 ; }
body.cv main h2:first-child { padding-block-start: 0 ; }
body.cv ml-menu { margin-block-start: auto ; }

body.portfolio { display: grid ; grid-template-rows: min-content min-content auto ; min-height: 100dvh ; }
body.portfolio main { margin-block-start: 5rem ; padding: 2rem ; display: block ; }
body.portfolio ml-menu { margin-block-start: auto ; }

body.statement { display: grid ; grid-template-rows: min-content min-content auto ; min-height: 100dvh ; }
body.statement main { margin-block-start: 5rem ; padding: 2rem ; display: grid ; grid-template-columns: 1fr 1fr ; gap: 2rem ; }
body.statement main h2 { font: 500 1.25rem / 1 Roboto ; text-wrap: balance ; padding: 2rem 0 1rem 0 ; }
body.statement main h2:first-child { padding-block-start: 0 ; }
body.statement main p { font: 400 1rem / 1.5 Roboto ; text-wrap: pretty ; margin-block-end: 1rem ; }
body.statement main p.signature { font: 400 1.5rem / 1.5 Roboto ; text-align: end ; }
body.statement main p.signature::before { content: "── " ; }
body.statement main p:last-child { margin-block-end: 0 ; }
body.statement ml-menu { margin-block-start: auto ; }

body.contact { display: grid ; grid-template-rows: min-content min-content auto ; min-height: 100dvh ; }
body.contact main { margin-block-start: 5rem ; padding: 2rem ; display: grid ; grid-template-columns: 1fr 1fr ; gap: 2rem ; }
body.contact main h2 { font: 500 1.25rem / 1 Roboto ; text-wrap: balance ; padding: 2rem 0 1rem 0 ; }
body.contact main h2:first-child { padding-block-start: 0 ; }
body.contact main p { font: 400 1rem / 1.5 Roboto ; text-wrap: pretty ; margin-block-end: 1rem ; }
body.contact main p:has(+ h2) { margin-block-end: 0 ; }
body.contact main a { display: inline-block ; position: relative ; text-decoration: none ; color: var(--color) ; }
body.contact main a::after { content: "" ; display: block ; position: absolute ; bottom: .125rem ; left: -.25rem ; width: 0 ; height: .1rem ; background-color: var(--color) ; transition: color 1.5s ease-in-out ; transition: width .25s ease-in-out ; }
body.contact main a:hover::after { width: calc(100% + .5rem) ; }
body.contact ml-menu { margin-block-start: auto ; }

body.legal { display: grid ; grid-template-rows: min-content min-content auto ; min-height: 100dvh ; }
body.legal main { margin-block-start: 5rem ; padding: 2rem ; display: grid ; grid-template-columns: 1fr 1fr ; gap: 2rem ; }
body.legal main h2 { font: 500 1.25rem / 1 Roboto ; text-wrap: balance ; padding: 2rem 0 1rem 0 ; }
body.legal main h2:first-child { padding-block-start: 0 ; }
body.legal main p { font: 400 1rem / 1.5 Roboto ; text-wrap: pretty ; margin-block-end: 1rem ; }
body.legal main p:last-child { margin-block-end: 0 ; }
body.legal main a { display: inline-block ; position: relative ; text-decoration: none ; color: var(--color) ; }
body.legal main a::after { content: "" ; display: block ; position: absolute ; bottom: .125rem ; left: -.25rem ; width: 0 ; height: .1rem ; background-color: var(--color) ; transition: color 1.5s ease-in-out ; transition: width .25s ease-in-out ; }
body.legal main a:hover::after { width: calc(100% + .5rem) ; }
body.legal ml-menu { margin-block-start: auto ; }

@media only screen and (max-width: 768px) {
	body.menu main { flex-direction: column ; justify-content: center ; gap: 2rem ; }
	body.bio main { padding: 1rem ; grid-template-columns: 1fr ; }
	body.statement main { padding: 1rem ; grid-template-columns: 1fr ; }
	body.contact main { padding: 1rem ; grid-template-columns: 1fr ; }
	body.legal main { padding: 1rem ; grid-template-columns: 1fr ; }
}