*{
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: "CaviarDreams";
	src: url(CaviarDreams.ttf);
	font-weight: normal;
}

@font-face {
	font-family: "CaviarDreams";
	src: url(CaviarDreams_Bold.ttf);
	font-weight: bold;
}

@media only screen and (max-width: 480px)
{
/* logo */

	.logo {
		z-index: 4;
		position: fixed;
		top: 8.5%;
		right: 15.7%;
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 2em;
	}

/* menu */

	.toggler {
		z-index: 4;
		position: fixed;
		height: 5em;
		width: 5em;
		top: 7%;
		left: 13%;
		opacity: 0;
	}

	/* burger thing */

	.hamburger {
		position: fixed;
		top: 0;
		left: 0;
		height: 70px;
		width: 70px;
		display: flex;
		text-align: center;
		justify-content: center;
		z-index: 3;
	}

	.hamburger > div {
		position: relative;
		top: 90px;
		left: 50px;
		background-color: #fff;
		height: 2px;
		width: 60%;
		transition: all 0.4s ease;
	}

	.hamburger > div::before,
	.hamburger > div::after {
		content: '';
		position: absolute;
		top: -13px;
		left: 0px;
		background-color: #fff;
		width: 100%;
		height: 2px;
		transition: all 0.4s ease;
	}

	.hamburger > div::after {
		top: 13px;
	}

	.toggler:checked + .hamburger > div {
    	background: rgba(0,0,0,0);
	}

	.toggler:checked + .hamburger > div::before {
    	top: 0;
    	transform: rotate(45deg);
    	background-color: #fff;
	}

	.toggler:checked + .hamburger > div::after {
    	top: 0;
    	transform: rotate(135deg);
    	background-color: #fff;
	}

	/* blurry thing */

	.menu {
    	background: rgba(255, 255, 255, 0.4);
    	-webkit-backdrop-filter: blur(4px);
    	backdrop-filter: blur(4px);
    	width: 0%;
    	height: 100vh;
 		transition: all 0.4s ease;
 		z-index: 1;
	}

	.toggler:checked ~ .menu {
		position: fixed;
    	width: 100vw;
	}

	/* list thing hidden */

	.menu >  div > ul {
    	display: flex;
    	flex-direction: column;
    	position: fixed;
    	top: 20%;
    	left: 50%;
    	transform: translateX(-50%);
    	text-align: center;
    	visibility: hidden;
	}

	.menu > div > ul > li {
    	list-style: none;
    	padding: 30px;
	}

	.menu > div > ul > li > a {
    	color: rgba(255, 255, 255, 1);
    	text-decoration: none;
    	font-size: 2.5em;
    	font-family: "CaviarDreams";
	}

	#shop {
		font-size: 0.3em;
	}

	/* list thing visible */

	.toggler:checked ~ .menu > div > ul {
    	transition: visibility 0.4s ease;
    	transition-delay: 0.1s;
    	visibility: visible;
	}

/* backgrounds */

	/* back images */

	#backhome {
		background: url(image/backhome.jpeg);
		background-size: 150vh;
		background-repeat: no-repeat;
		background-position: top 0 left -100px;
		display: block;
	}

	#backabout {
		background: url(image/backabout.jpeg);
		background-size: 140vh;
		background-repeat: no-repeat;
		display: block;
	}

	#backwork {
		background: url(image/backwork.jpeg);
		background-size: 150vh;
		background-repeat: no-repeat;
		display: block;
	}

	#backshop {
		background: url(image/backshop.jpeg);
		background-size: 140vh;
		background-repeat: no-repeat;
		background-position: top -20px left -480px;
		display: block;
	}

	#backcontact {
		background: url(image/backcontact.png);
		background-size: 180vh;
		background-repeat: no-repeat;
		background-position: top 0 left -50px;
		display: block;
	}

	#backunsent {
		background: url(image/backunsent.jpeg);
		background-size: 100vh;
		background-repeat: no-repeat;
		background-position: top 0 left -300px;
		display: block;
	}

	#backmosaic {
		background: url(image/backmosaic.jpeg);
		background-size: 200vh;
		background-repeat: no-repeat;
		background-position: top -160px left -600px;
		display: block;
	}

	#backsheme {
		background: url(image/backsheme.jpeg);
		background-size: 100vh;
		background-repeat: no-repeat;
		background-position: top 0 left -180px;
		display: block;
	}

	#backcocons {
		background: url(image/backcocons.png);
		background-size: 80vh;
		background-repeat: no-repeat;
		background-position: top 0 left -70px;
		display: block;
	}

	#backglitch {
		background: url(image/backglitch.png);
		background-size: 75vh;
		background-repeat: no-repeat;
		background-position: top 0 left -40px;
		display: block;
	}

	#backarmors {
		background: url(image/backarm.png);
		background-size: 150vh;
		background-repeat: no-repeat;
		background-position: top 0 left -540px;
		display: block;
	}

	#backsud {
		background: url(image/backsud.jpeg);
		background-size: 160vh;
		background-repeat: no-repeat;
		background-position: top -30px left -400px;
		display: block;
	}

	#backsoon {
		background: url(image/backsoon.jpeg);
		background-size: 160vh;
		background-repeat: no-repeat;
		display: block;
	}

	/* back videos */

	#backwttc {
		position: fixed;
		width: 180vh;
		left: 50%;
		transform: translateX(-50%);
	}

	#backblack {
		background-color: #030903;
	}

	#backthistles{
		position: fixed;
		width: 140vw;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
	}

	#backrules {
		position: fixed;
		width: 180vh;
		left: 50%;
		transform: translateX(-50%);
	}

/* titles */

	#hometitle {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translateX(-50%);
		font-family: "CaviarDreams";
		font-weight: bold;
		color: #fff;
		font-size: 4em;
		text-align: center;
	}

	#homeundertitle {
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translateX(-50%);
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 1em;
	}

	.titles {
		position: fixed;
		top: 20%;
		left: 50%;
		width: 80vw;
		transform: translateX(-50%);
		font-family: "CaviarDreams";
		font-weight: bold;
		color: #fff;
		font-size: 3em;
		text-align: center;
	}

	.undertitles {
		position: fixed;
		top: 28%;
		left: 50%;
		transform: translateX(-50%);
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 1em;
		text-align: center;
	}

/* content1 */

	/* blabla about */

	#boxabout {
		position: absolute;
		width: 80vw;
		height: 60vh;
		top: 32%;
		left: 50%;
		transform: translateX(-50%);
		overflow: scroll;
	}

	#boxabout > p {
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 0.8em;
		padding-bottom: 3em;
	}

	#boxabout > h2 {
		font-family: "CaviarDreams";
		font-weight: bold;
		color: #fff;
		font-size: 1em;
		padding: 2em;
		text-align: center;
	}

	#boxabout > ul > li {
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 0.9em;
	}

	/* blabla work*/

	#boxwork {
		position: absolute;
		width: 60vw;
		height: 50vh;
		top: 37%;
		left: 50%;
		transform: translateX(-50%);
		overflow: scroll;
	}

	#boxwork > h2 {
		font-family: "CaviarDreams";
		font-weight: bold;
		color: #fff;
		font-size: 1em;
		padding: 2em;
		text-align: center;
	}

	#boxwork > ul > a {
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 1em;
		padding: 0.5em;
		text-decoration-line: none;
	}

	#boxshop {
		position: absolute;
		width: 60vw;
		height: 40vh;
		top: 40%;
		left: 50%;
		transform: translateX(-50%);
	}

	#boxshop > ul > a {
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 2em;
		list-style: none;
		text-align: center;
		padding: 0.7em;
		text-decoration-line: none;
	}

	/* blabla shop */

	#comingsoon {
		position: fixed;
		top: 42%;
		left: 50%;
		transform: translateX(-50%);
		font-family: "CaviarDreams";
		font-weight: bold;
		color: #8D021F;
		font-size: 3em;
		text-align: center;
	}

	#description {
		position: fixed;
		bottom: 9%;
		left: 50%;
		width: 70vw;
		transform: translateX(-50%);
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 0.7em;
		text-align: center;
	}

	/* blabla contact */

	#boxcontact {
		position: absolute;
		width: 80vw;
		height: 60vh;
		top: 33%;
		left: 50%;
		transform: translateX(-50%);
	}

	#boxcontact > h2 {
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 2em;
		list-style: none;
		text-align: center;
		padding: 1em;
	}

	#boxcontact > h3 {
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 1em;
		list-style: none;
		text-align: center;
		padding: 1em;
	}

	#boxcontact > h3 > span {
		text-decoration-line: underline ;
	}

	.fa-instagram {
		position: absolute;
		font-size: 3em;
		bottom: 17%;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
	}

	#instalink {
		position: absolute;
		font-size: 1em;
		bottom: 13%;
		left: 50%;
		transform: translateX(-50%);
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
	}

/* content2 */

	/* work work */

	.boxwork {
		position: fixed;
		width: 80vw;
		height: 75vh;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
		overflow: scroll;
	}

	.boxwork > h1 {
		font-family: "CaviarDreams";
		font-weight: bold;
		color: #fff;
		font-size: 1.4em;
		text-align: center;
		padding: 0.5em;
	}

	.boxwork > h4 {
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 1em;
		text-align: center;
		padding-bottom: 1em;
	}

	.boxwork > p {
		font-family: "CaviarDreams";
		font-weight: normal;
		color: #fff;
		font-size: 0.7em;
		padding-bottom: 3em;
	}

	.boxwork > img {
		max-width: 80vw;
	}
	
}