:root {
  --background-old: rgba(228,217,186,1);
  --background-1: rgba(0,0,0,1);
	
  --colour-light: rgba(255,255,255,1);
  --colour-medium: rgba(180,180,180,1);
  --colour-dark: rgba(242,192,65,1);
  
  --text-light: rgba(255,255,255,1);
  --text-dark: rgba(30,40,60,1);
  --text-coloured: rgba(150,150,150,1);
  
  --page-width: 100vw;
}

@font-face {
	font-family: standard;
	font-style: normal;
	src: url('../fonts/Montserrat-Regular.ttf');
}
@font-face {
	font-family: links;
	font-style: normal;
	src: url('../fonts/Montserrat-Medium.ttf');
}
@font-face {
	font-family: display;
	font-style: normal;
	src: url('../fonts/Montserrat-Regular.ttf');
}
@font-face {
	font-family: titles;
	font-style: normal;
	src: url('../fonts/Montserrat-Bold.ttf');
}
@font-face {
	font-family: standard-medium;
	font-style: normal;
	src: url('../fonts/Montserrat-Regular.ttf');
}
@font-face {
	font-family: handwriting;
	font-style: normal;
	src: url('../fonts/RumRaisin-Regular.ttf');
}
@font-face {
	font-family: italics;
	font-style: normal;
	src: url('../fonts/BerkshireSwash-Regular.ttf');
}

html {
	font-size: 17px;
}
@media (max-width: 900px) {
	html {
		font-size: 16px;
	}
}
@media (max-width: 600px) {
	html {
		font-size: 15px;
	}
}

body {
	margin: 0;
	background-color: var(--background-1);
	background-position: top;
	background-size: cover;
	font-family: standard;
	overflow-X: hidden;
}

/* Scroll bar */
/* width */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
	background: rgba(200,200,200,0);
}
/* Handle */
::-webkit-scrollbar-thumb {
	background-color: rgba(100,100,100,1);
	border-radius: 0px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(50,50,50,1);
}
::-webkit-scrollbar-button {
	display: none;
}
p, li, a {
	font-family: standard;
	font-size: 1rem;
	color: var(--text-dark);
	font-weight: normal;
	text-decoration: none;
	letter-spacing: -0.02em;
}
h1, h2, h3, h4, h5, h6 {
	font-family: titles;
	font-weight: normal;
	color: var(--text-dark);
	letter-spacing: -0.07em;
}

h1 {font-size: 2.2rem; line-height: 2.4rem; margin: 1rem 0;}
h2 {font-size: 2.0rem; line-height: 2.2rem; margin: 1rem 0;}
h3 {font-size: 1.8rem; line-height: 2.0rem; margin: 1rem 0;}
h4 {font-size: 1.6rem; line-height: 1.8rem; margin: 1rem 0;}
h5 {font-size: 1.4rem; line-height: 1.6rem; margin: 1rem 0;}
h6 {font-size: 1rem; line-height: 1.2rem; margin: 1rem 0;}
p {font-size: 1rem; line-height: 1.2rem; margin: 0.5rem 0;}

.handwriting {font-family: handwriting; font-weight: normal; letter-spacing: 0;}
.italics {font-family: italics; font-weight: normal; letter-spacing: 0;}
.fontColour1 {color: rgba(186,197,228,1);}
.fontColour2 {color: rgba(96,130,159,1);}
.fontColour3 {color: rgba(242,192,65,1);}

/*==============================*/
/* Header and logo              */
/*==============================*/
header {
	position: fixed;
	padding: 0px 20px;
	box-sizing: border-box;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	height: 40px;
	width: 200px;
	background-color: rgba(50,50,50,0.7);
	border-radius: 40px;
	transition: 0.2s all ease-in-out;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	z-index: 99999;
}
header.fix {
	top: 10px;
	height: 40px;
	background-color: rgba(50,50,50,0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.top-margin {
	margin-top: 100px !important;
}
.logo {
	position: relative;
	float: left;
	left: 0px;
	top: 15px;
	height: 30px;
	width: 116px;
	border: 0px solid var(--primary-1);
	border-radius: 0px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 99999;
	transition: 0.2s all ease-in-out;
}
header.fix .logo {
	top: 15px;
	height: 30px;
	width: 116px;
}
.menu-button {
	position: relative;
	display: inline-block;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 40px;
	width: 200px;
	border-radius: 40px;
	background-color: rgba(200,200,200,0);
	transition: 0.3s all ease-in-out;
	z-index: 99999999999999;
}
.menu-button:hover {
	cursor: pointer;
}
.menu-line {
	position: absolute;
	height: 1px;
	width: 30px;
	background-color: rgba(255,255,255,1);
	transition: 0.3s all ease-in-out;
}
.menu-line.one {
	top: 12px;
	left: 85px;
}
.menu-button:hover .menu-line.one {
	
}
.menu-line.two {
	top: 18px;
	left: 85px;
}
.menu-button:hover .menu-line.two {
	
}
.menu-line.three {
	opacity: 1;
	top: 24px;
	left: 85px;
}
.menu-button:hover .menu-line.three {
	
}
header.on .menu-line.one, header.on .menu-button:hover .menu-line.one {
	top: 8px;
	left: 90px;
	transform: rotate(45deg);
	transform-origin: 0% 0%;
}
header.on .menu-line.two, header.on .menu-button:hover .menu-line.two {
	top: 29px;
	left: 89px;
	transform: rotate(-45deg);
	transform-origin: 0% 0%;
}
header.on .menu-line.three, header.on .menu-button:hover .menu-line.three {
	opacity: 0;
}

nav {
	position: fixed;
	padding-top: 100px;
	padding-bottom: 20px;
	top: -100vh;
	left: 50%;
	transform: translateX(-50%);
	height: fit-content;
	width: 100vw;
	background-color: rgba(0,0,0,0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: 0.7s all cubic-bezier(.43,.19,.09,1);
}
nav.on {
	top: 0;
}
nav p {
	font-family: links;
	font-size: 0.8rem;
	color: rgba(255,255,255,1);
	display: inline;
	line-height: 60px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 0.3s all ease-in-out;
}
header.fix nav p {
	line-height: 60px;
}
nav a {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  margin: 0px 10px;
  display: block;
  height: 40px;
  width: fit-content;
  
  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 5px;
    display: block;
    width: 0%;
    height: 1px;
    background-color: rgba(255,255,255,1);
    transition: width 200ms linear;
    
  }
  
  &:hover {
    &::before {
      width: 100%;
      left: 0;
      right: auto;
    }
  }
}

/*==============================*/
/* GRID SYSTEM                  */
/* Containers and cols          */
/*==============================*/
.grid-container {
	position: relative;
	display: grid;
	margin: auto;
    width: var(--page-width);
	column-gap: 0px;
	row-gap: 0px;
	box-sizing: border-box;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}
.grid-container.cols-1 {grid-template-columns: auto;}
.grid-container.cols-2 {grid-template-columns: 50% auto;}

@media (max-width: 900px) {
.grid-container.cols-1 {grid-template-columns: auto;}
.grid-container.cols-2 {grid-template-columns: auto;}
}
@media (max-width: 600px) {
.grid-container.cols-1 {grid-template-columns: auto;}
.grid-container.cols-2 {grid-template-columns: auto;}
}

.grid-item {
	position: relative;
	display: flex;
	box-sizing: border-box;
	padding: 5vw;
	width: 100%;
	border-radius: 20px;
	background-color: rgba(255,255,255,0);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-clip: border-box;
	flex-direction: column;
}

.vh-100 {min-height: 100vh;}
.vh-90 {min-height: 90vh;}
.vh-80 {min-height: 80vh;}
.vh-70 {min-height: 70vh;}
.vh-60 {min-height: 60vh;}
.vh-50 {min-height: 50vh;}
.vh-40 {min-height: 40vh;}
.vh-30 {min-height: 30vh;}
.vh-20 {min-height: 20vh;}
.vh-10 {min-height: 10vh;}

.h-100 {min-height: 100%;}
.h-90 {min-height: 90%;}
.h-80 {min-height: 80%;}
.h-70 {min-height: 70%;}
.h-60 {min-height: 60%;}
.h-50 {min-height: 50%;}
.h-40 {min-height: 40%;}
.h-30 {min-height: 30%;}
.h-20 {min-height: 20%;}
.h-10 {min-height: 10%;}

.top-10 {margin-top: 10px;}
.top-20 {margin-top: 20px;}
.top-30 {margin-top: 30px;}
.top-40 {margin-top: 40px;}
.top-50 {margin-top: 50px;}
.top-60 {margin-top: 60px;}
.top-70 {margin-top: 70px;}
.top-80 {margin-top: 80px;}
.top-90 {margin-top: 90px;}
.top-100 {margin-top: 100px;}

.x-left {align-items: start;}
.x-centre {align-items: center;}
.x-right {align-items: end;}
.y-top {justify-content: start;}
.y-centre {justify-content: center;}
.y-end {justify-content: end;}

.x-gap {column-gap: 10px; margin-left: 10px; margin-right: 10px;}
.y-gap {row-gap: 10px; margin-top: 10px; margin-bottom: 10px;}

.x-offset {transform: translateX(-20%);}

.h-fit {height: fit-content;}

.filter.dark {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.4);
}

/*==============================*/
/* CUSTOM DIVS                  */
/* Specific to this site only   */
/*==============================*/

header .button {
	position: fixed;
	padding: 0px 35px 0px 20px;
	right: 20px;
	top: 10px;
	height: 40px;
	width: fit-content;
	border: 1px solid rgba(0,0,0,1);
	border-radius: 20px;
	background-color: rgba(0,0,0,1);
	transition: 0.2s all ease-in-out;
	font-family: links;
	font-size: 0.8rem;
	color: rgba(255,255,255,1);
	line-height: 40px;
	overflow: hidden;
	transition: 0.3s all cubic-bezier(.17,.67,.46,1);
	
	&:hover {
		cursor: pointer;
		background-color: rgba(0,0,0,1);
	}
	&:hover {
		padding: 0px 45px 0px 20px;
		color: rgba(255,255,255,1);
		transition: 0.3s all cubic-bezier(.17,.67,.46,2);
	}
	&::after {
		content: "";
		position: relative;
		float: right;
		margin-right: -18px;
		top: 15px;
		height: 10px;
		width: 10px;
		background-image: url('../images/button-arrow.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,1);
	}
	&:hover::after {
		transform: rotate(-45deg);
		margin-right: -30px;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,2);
	}
}

@media (max-width: 900px) {
	header .button {
		right: 80px;
	}
}

.bg-contain {
	background-repeat: no-repeat;
	background-size: contain;
}
.bg-center {
	background-repeat: no-repeat;
	background-position: center;
}

.custombutton {
	display: block;
	padding: 0px 35px 0px 20px;
	height: 40px;
	width: fit-content;
	border: 1px solid rgba(0,0,0,1);
	border-radius: 20px;
	background-color: rgba(0,0,0,1);
	transition: 0.2s all ease-in-out;
	font-family: links;
	font-size: 0.8rem;
	color: rgba(255,255,255,1);
	line-height: 40px;
	overflow: hidden;
	transition: 0.3s all cubic-bezier(.17,.67,.46,1);
	
	&:hover {
		cursor: pointer;
		background-color: rgba(0,0,0,1);
	}
	&:hover {
		padding: 0px 45px 0px 20px;
		color: rgba(255,255,255,1);
		transition: 0.3s all cubic-bezier(.17,.67,.46,2);
	}
	&::after {
		content: "";
		position: relative;
		float: right;
		margin-right: -18px;
		top: 15px;
		height: 10px;
		width: 10px;
		background-image: url('../images/button-arrow.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,1);
	}
	&:hover::after {
		transform: rotate(-45deg);
		margin-right: -30px;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,2);
	}
}

.image-horizontal-slider {
	
}
.image-horizontal-slider img {
	margin: 20px;
}

#mobile-design-container {
	animation-name: mobilecontainer;
	animation-duration: 15s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes mobilecontainer {
	from {transform: rotate(-20deg) scale(0.9,0.9);}
	to {transform: rotate(-5deg) scale(1,1);}
}

#guy-rich-logo {
	position: absolute;
	top: 15vh;
	left: 10vw;
	height: auto;
	width: 50%;
	max-width: 500px;
	transform: rotate(0deg);
	filter: drop-shadow(-30vw 20vh 300px rgba(255,95,150,1));
	animation-name: guyrichlogos;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	transition: none;
}
#guy-rich-logo.pop {
	margin-left: 20px;
	filter: drop-shadow(-20px 20px 10px rgba(0,0,0,0.5));
	transition: 0.3s all cubic-bezier(.17,.67,.46,2);
}

@keyframes guyrichlogo {
	0% {opacity: 0.9;}
	100% {opacity: 1;}
}

#guy-rich-profile {
	position: absolute;
	top: 0;
	right: 0;
	margin-left: 0px;
	height: 100%;
	width: auto;
	transform: rotate(0deg);
	filter: drop-shadow(0px 0px 300px rgba(95,150,255,1));
	animation-name: guyrichprofiles;
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
}
@keyframes guyrichprofile {
	0% {filter: drop-shadow(0px 0px 300px rgba(95,150,255,1));}
	100% {filter: drop-shadow(0px 0px 300px rgba(95,150,255,0.6));}
}

.jagged {
	border: none;
	--m: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/40px 51% repeat-x, conic-gradient(from 135deg at top   ,#0000,#000 1deg 89deg,#0000 90deg) top   /40px 51% repeat-x;
	-webkit-mask: var(--m);
    mask: var(--m);
}
.bubbles {
	background-color: rgba(186,197,228,1);
}

.bubbles .grid-item {
	background-color: rgba(186,197,228,1);
}
.slowmo {
	transition: 0.5s all ease-in-out;
}
.out {
	margin-top: -200px;
}