:root{
	--seaFoam:#50AEAE;
	--ink:    #104B51;
	--steam:  #e2d4ba;
	--fog:    #ABBDA5;
	--sorrow: #849D8A;
	--ribbon: #D7AC5A;
}




html{
background-color: var(--steam);
  background-image: radial-gradient(var(--ribbon) 1px, transparent 1px);
  background-size: 1vw 1vw;
  background-repeat: repeat;

image-rendering:pixelated;
image-rendering:-moz-crisp-edges;
font-smooth:never;
-webkit-font-smoothing: none;
scrollbar-color: var(--fog) var(--sorrow);

font-family: VCR_OSD_Mono;
font-size:2vw;
color:var(--ink);
}



body {
  height:150vh;
  width:100vw;
  overflow-x:hidden;
}













@font-face {
	font-family: VCR_OSD_Mono;
	src: url(fonts/VCR_OSD_MONO.ttf);
}
@font-face {
	font-family: kiwiSoda;
	src: url(fonts/KiwiSoda.ttf);
}

h1,h2,h3,h4{
	font-Family:kiwiSoda;
}
a {
	color:var(--ink);
	text-decoration-style:wavy;
}
.squidTray{
align-content: center;
 display: grid;
 width:80%;
 margin:2% 5% 0 5%;
 gap: 3vw;
 grid-template-columns: auto auto auto;
 	box-sizing: border-box;
 
}

.squidTray > div {
grid-column: 1 / span 3;
width:100%;
box-sizing: border-box;
}
.head{
z-index:5;
	
display: grid;
grid-template-columns: auto auto auto;

rotate:-1deg;
align-content: center;
position:sticky;
height:9vw;

background-color:var(--fog);
border-bottom: 3px solid var(--steam);
top:-20px;
}
.head > div{
margin:0 auto 0 auto;
align-content:center;
text-align:center;
float:left;
width:25vw;
height:8vw;
background-color:var(--sorrow);
}
.fin{
background-color:var(--seaFoam);
position:static;
text-align:center;
padding:0px 0px 20px 20px;
height:50vw;

}
.fin > h1 {
margin:0 0 -3vw 0;
font-size:5vw;
}
.head > div > a{
	text-decoration: none;	
}
.head > div > a:hover{
	color:var(--steam);
	font-size: 2.5vw;
}








.gallery{
overflow-y:hidden;
overflow-x:scroll;
height:50vw;
padding:0px 0px 20px 20px;
background-color:var(--seaFoam);

}
.gallery > ul {
	width:200vw;
	height:100%;
	list-style-type:none;
}
h2{
rotate:-1deg;
width:90.5vw;
background-color:var(--steam);
border-bottom: 4px solid var(--seaFoam);

margin: 0 0 -10px 0;

grid-column: 1 / span 3;
}

li {
float:left;
margin-left:3vw;
}



.card{
padding:10px;
width:30vw;
height:65%;
background-color:var(--steam);
box-shadow: 10px 5px 5px var(--ink);
}

.card:hover{
box-shadow: 12px 12px 2px 1px var(--ink);
rotate:-2deg;
}

hr{
	width:20%;
	border:1px dashed var(--ink);
	margin-top:3vw;
}

.tenta{
	background-color: var(--ribbon);
	height:10vh;
	justify-content: center;
	padding:0 5%;

}
.stamp{
width:8vw;
rotate: -4deg;
float:right;
}