:root {
	--base03: #0a2732;
	--base02: #012b36;
	--base01: #5c6d74;
	--base00: #697a82;
	--base0: #869396;
	--base1: #96a1a1;
	--base2: #ede8d7;
	--base3: #fcf6e5;
	--yellow: #b58901;
	--orange: #bc5429;
	--red: #ce2c22;
	--magenta: #d23682;
	--violet: #6d71c4;
	--blue: #278bd2;
	--cyan: #2aa198;
	--green: #859900;
	--sans-serif: 'Montserrat', sans-serif;
	--serif: 'Quattrocento', serif
}
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
ul {
	list-style: none;
}
button, input, select {
	margin: 0;
}
html {
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
}
img, video {
	height: auto;
	max-width: 100%;
}
iframe {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td, th {
	padding: 0;
}
.anim {
    -webkit-transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    transition: .3s ease-out
}
#home-code,
#home-design {
	width: 100vw;
	height: 100vh;
	position: fixed;
}

#home-design {
	filter: drop-shadow(-1px 6px 8px rgba(0, 0, 0, 0.7));
	pointer-events: none;
}

#home-design .content {
	height: 100%;
	width: 100%;
	background-color: var(--base3);;
	transition: background 0.4s linear;
	clip-path: polygon(11% 0%, 100% 0%, 100% 100%, 82% 100%);
	pointer-events: all;
}

#home-code {
	background: var(--base02);
}

#home-code .content {
	height: 100%;
	width: 100%;
}

#home-code svg {
	z-index: 999;
}

#home-code svg,
#home-design svg {
	display: block;
	max-width: 720px;
	position: relative;
	top: 30vh;
	left: 0;
	right: 0;
	margin: 0 auto;
	pointer-events: none;
}
#home-code svg .st0 {
	fill: var(--green)
}
#home-code svg .name-description .st0 {
	fill: var(--magenta)
}
#home-design svg .st0{
	fill: var(--base1)
}
#frame {
	position: absolute;
	z-index: 99;
	width: calc(100vw - 50px);
	height: calc(100vh - 50px);
	margin: 25px;
	border: 2px solid var(--base1);
	border-radius: 12px;
	pointer-events: none;
}
#nav {
    border-bottom: 2px solid var(--base1);
    margin: 0 8px;
    padding: 6px;
    color: var(--base1);
    pointer-events: all;
}
#nav img {
    max-width: 12px;
    margin-right: 2px;
    cursor: pointer;
}
#testcode {
    position: absolute;
    display: block;
    z-index: 9;
    left: 3vw;
    top: 6.5vh;
    height: 91vh;
    width: 97vw;
    overflow: scroll;
    text-align: left;
}
#name-change {
    clip-path: url(#nameclip);
    display: block;
    width: 720px;
    height: 270px;
    position: absolute;
    top: 30vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    pointer-events: none;
    z-index: 99999;
}
#scroll-designs {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: -1;
    overflow: scroll;
    pointer-events: all;
}
.design-bg {
    width: 100vw;
    height: 100%;
    background-size: cover;
    background-attachment: fixed;
	box-shadow: 0 0 42px rgb(0 0 0 / 35%);
}
#design-0 {
    background-image: none;
	box-shadow: none;
}
#smenu {
    float: right;
    margin-right: 0;
    margin-left: 12px;
    width: 42px;
    height: 32px;
    font-size: .1px;
    cursor: pointer;
    position: relative;
    top: 3vh;
    left: -2vw;
    display: block;
}
#smenu s {
    height: 6px;
    right: 0;
    top: 0;
    margin-bottom: 5px;
	border-radius: 4px;
	position: relative;
	z-index: 999;
	display: block;
    background: #333333;
}
#smenu.close s {
    background: #fff;
}
#smenu.close s:first-child {
    top: 12px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#smenu.close s:nth-child(2) {
    width: 0;
    right: -20px;
}
#smenu.close s:last-child {
    top: -10px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#smenu s:last-child {
    margin-bottom: 0;
}
#links.open {
	right: 0;
}
#links {
    display: block;
    height: 100vh;
    width: 320px;
    background: #000;
    position: absolute;
    z-index:99;
    right: -400px;
    backdrop-filter: blur(10px);
    background-color: rgb(150 161 161 / 80%);
    box-shadow: 8px -8px 12px rgb(42 42 42 / 15%);
    padding-top: 8vh;
    padding-left: 32px;
}
#links li {
    color: #fff;
    font-family: 'Red Hat Display', sans-serif;
    padding: 10px 0;
}
#links li a {
    color: #fff;
    text-decoration: none;
}
#logos {
	width: 100vw;
	display: flex;
	flex-wrap: wrap;
}
#logos .logo {
	max-width: 25vw
}