* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	cursor: crosshair;
	overflow: hidden;
}

html {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px;
	background: black;
}

@font-face {
	font-family: 'Monument';
	src: 'resources/MonumentExtended-Ultrabold.otf';
}

a {
	color: inherit;
	text-decoration: inherit;
}

::-webkit-scrollbar {
	width: 15px;
}

::-webkit-scrollbar * {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.5);
	transition: 5s ease-in-out;
	border-radius: 20px;
	border: 5px white solid
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 1);
}

::selection {
	color: white;
	background: red;
}

h1 {
	font-family: Monument;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.menu {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-columns: 1fr;
	grid-template-areas: "nome" "sobre" "projetos" "socials";
}

.menu div {
	height: 25vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	background: black;
	border-bottom: .5px white solid;
	font: 5vmin 'Monument';
	letter-spacing: 2px;
	text-transform: uppercase;
}

.nome:hover,
.sobre:hover,
.projetos:hover,
#socials:hover {
	letter-spacing: 5px;
	transition: ease-in-out 0.2s;
	-webkit-text-stroke: white 1px;
	color: transparent;
}

.menu .nome:hover {
	background: #e6c700;
}

.menu .sobre:hover {
	background: #db2f27;
}

.menu .projetos:hover {
	background: #41842B;
}

#socials:hover {
	background: #1aa9bc;
}

.nome {
	grid-area: nome;
}

.sobre {
	grid-area: sobre;
}

.projetos {
	grid-area: projetos;
}

#socials {
	grid-area: socials;
	border-bottom: 0;
}

#contactos {
	border-bottom: 0;
}

#socials:hover #contactos {
	letter-spacing: 5px;
	transition: ease-in-out 0.2s;
	-webkit-text-stroke: white 1px;
	color: transparent;
	background: #1aa9bc;
}

#linkscontacts {
	display: none;
	width: 100vw;
	height: 25vh;
}

#links {
	position: absolute;
	/* bottom: 10.5vh; */
	left: 50%;
	transform: translate(-50%, 0%);
	height: 25vh;
	bottom:0;
	border-bottom: 0;
	font-size: 0.5em;
	overflow: visible;
}

#links a:hover {
	text-decoration: underline;
	color: transparent;
	-webkit-text-stroke: white .2px;
}


/* pop-ups */

button {
	border: 0;
	padding: 0;
	margin: 0;
}

#overlay {
	position: absolute;
	opacity: 0;
	top: 0;
	bottom: 0;
	background: #999;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	visibility: hidden;
	transition: all 1s ease;
}

#popup,
#popup2 {
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	visibility: hidden;
	overflow-y: scroll;
}

#popupclose,
#popupclose2 {
	padding: 10px;
	right: 3vw;
	top: 3vh;
	position: absolute;
	cursor: pointer;
	z-index: 999;
	-webkit-text-stroke: 1px black;
	color: transparent;
	font-size: 4em;
	transition: color 0.1s linear;
}

#popupclose:hover,
#popupclose2:hover {
	-webkit-text-stroke: 1px black;
	color: black;
}

#popupcontent,
#popupcontent2 {
	padding: 50px;
}

#button {
	cursor: pointer;
}

#popup[data-pop="slide-down"] {
	top: 25%;
	height: 25vh;
	background: red;
	transition: all .2s ease-in-out;
}

#popup[data-pop="slide-down"].show {
	visibility: visible;
	z-index: 200;
	opacity: 1;
	top: 0;
	height: 100vh;
}

#popup2[data-pop="slide-down2"] {
	top: 50vh;
	height: 25vh;
	background: #41842B;
	transition: all .2s ease-in-out;
}

#popup2[data-pop="slide-down2"].show {
	visibility: visible;
	z-index: 200;
	opacity: 1;
	background: white;
	top: 0;
	height: 100vh;
}