/* --.-- SOFTYBNUNY CSS CODE == TO BE USED WITHIN THE SITE --.-- */

@import url("font-mdhbhs6zna7on.css");

*, *::before, *::after {
	box-sizing: border-box;
	pointer-events: none;
	user-select: none;
	font-family: "Fuzzy Bubbles";
}

@keyframes fadeIntro {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes fadeIntroB {
	from {transform: translateX(-100%);}
	to {transform: translateX(0%);}
}

/* - */

html, body {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	cursor: default;
	margin: 0;
	padding: 0;
}

html {
	background: black;
}

body {
	opacity: 1;
	animation: fadeIntro 0.75s ease;
	background: center / cover no-repeat url('./bg-mdhbhs6zna7on.webp');
}

b, bold, strong {
    font-family: "Fuzzy Bubbles Bold";
    font-weight: normal;
}

button.btn.disabled#rightcoms {
    margin-right: -1500 !important;
}
button.btn.disabled#backhome {
    margin-left: -1500 !important;
}

button.btn {
	transition: all 1s ease;
}

/* --- START OF THE FULL PAGE --- */

homepage {
	width: 100%;
	display: flex;
	height: 100%;
	margin-left: 0;
	animation: fadeIntroB 2s ease;
	transition: all 1s ease;
}

homepage > page {
	width: 100%;
	min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	overflow: hidden;
}
homepage > page.disabled {
	display: none;
}

page#d829oj2n1, page#nsi72mx0z {
	flex-direction: column;
	animation: fadeIntroD 3.5s ease;
	visibility: visible;
	min-width: 100%;
}

page#b629nx75c > logo {
	width: auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
page#b629nx75c > logo > div {
	width: 202.5px;
	height: 200px;
	margin: 20px;
}
page#b629nx75c > logo > div > svg {
	width: 100%;
	height: 100%;
	overflow: hidden;
	filter: drop-shadow(0px 0px 7.5px #ffffff);
}

page#b629nx75c > site-linkz {
    margin-left: 100px;
    display: flex;
}

/* -- */

page#b629nx75c > site-linkz > ol, page#b629nx75c > site-linkz > ol > li, site-linkz > ol > li::marker {
    margin: 0;
    content: none;
    padding: 0;
}

page#b629nx75c > site-linkz > ol > li {
    background: transparent;
    padding: 15px;
    font-size: 20px;
    color: white;
    border-radius: 7.5px;
    cursor: pointer;
    display: flex;
    pointer-events: all;
    user-select: none;
    margin-bottom: 17.5px;
    justify-content: center;
    align-items: flex-end;
	transition: all ease 0.1s;
}

page#b629nx75c > site-linkz > ol > li#fa-lnk > svg,
page#b629nx75c > site-linkz > ol > li#bsky-lnk > svg,
page#b629nx75c > site-linkz > ol > li#da-lnk > svg,
page#b629nx75c > site-linkz > ol > li#disc-lnk > svg {
    width: 30px;
    height: 30px;
    margin: 0 10 0 0;
    padding: 0;
    fill: white;
}

/* - */

page#b629nx75c > site-linkz > ol > li#fa-lnk {
    background: rgb(215 165 45);
    filter: drop-shadow(0px 0px 5px rgb(215 165 45));
}

page#b629nx75c > site-linkz > ol > li#fa-lnk:hover {
    background: rgb(205 155 35);
    filter: drop-shadow(0px 0px 5px rgb(205 155 35));
}
page#b629nx75c > site-linkz > ol > li#fa-lnk:active {
    background: rgb(200 150 30);
    filter: drop-shadow(0px 0px 5px rgb(200 150 30));
}

/* - */

page#b629nx75c > site-linkz > ol > li#bsky-lnk {
    background: rgb(45 145 215);
    filter: drop-shadow(0px 0px 5px rgb(45 145 215));
}

page#b629nx75c > site-linkz > ol > li#bsky-lnk:hover {
    background: rgb(40 140 210);
    filter: drop-shadow(0px 0px 5px rgb(40 140 210));
}
page#b629nx75c > site-linkz > ol > li#bsky-lnk:active {
    background: rgb(35 135 205);
    filter: drop-shadow(0px 0px 5px rgb(35 135 205));
}

/* - */

page#b629nx75c > site-linkz > ol > li#da-lnk {
    background: rgb(65 190 55);
    filter: drop-shadow(0px 0px 5px rgb(65 190 55));
}

page#b629nx75c > site-linkz > ol > li#da-lnk:hover {
    background: rgb(60 185 50);
    filter: drop-shadow(0px 0px 5px rgb(60 185 50));
}
page#b629nx75c > site-linkz > ol > li#da-lnk:active {
    background: rgb(55 180 45);
    filter: drop-shadow(0px 0px 5px rgb(55 180 45));
}

/* - */

page#b629nx75c > site-linkz > ol > li#disc-lnk {
    background: rgb(90 100 235);
    filter: drop-shadow(0px 0px 5px rgb(90 100 235));
}

page#b629nx75c > site-linkz > ol > li#disc-lnk:hover {
    background: rgb(85 95 230);
    filter: drop-shadow(0px 0px 5px rgb(85 95 230));
}
page#b629nx75c > site-linkz > ol > li#disc-lnk:active {
    background: rgb(80 90 225);
    filter: drop-shadow(0px 0px 5px rgb(80 90 225));
}

/* --- Mobile Layout --- */

@media screen and (max-width: 500px) {
	page#b629nx75c {
		width: 100%;
		display: flex;
		flex-direction: column;
		transform: scale(0.85);
	}
	
	page#b629nx75c > site-linkz {
		margin: 0;
	}
	page#b629nx75c > logo {
		height: auto;
	}
	button.btn#backhome {
		transform: scale(0.85) rotate(-90deg) !important;
		left: -12.5% !important;
	}
	button.btn#rightcoms {
		transform: scale(0.85) rotate(-90deg) !important;
		right: -27.5% !important;
	}
}

/* -- Commission Layout -- */

button.btn {
    position: absolute;
    height: auto;
    width: auto;
    filter: drop-shadow(0px 0px 5px #ffffff);
    font-family: "Fuzzy Bubbles Bold";
    font-size: 35px;
    color: white;
    background: transparent;
    border: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: all;
	transition: all ease 1.5s;
}

/* - */

@keyframes comsButton {
	from {margin-right: -1500;}
	to {margin-right: 0;}
}
@keyframes homeButton {
	from {margin-left: -1500;}
	to {margin-left: 0;}
}

button.btn#rightcoms {
    right: -7.5%;
    bottom: 47.5%;
    transform: rotate(90deg);
	animation: comsButton 2s ease;
}
button.btn#backhome {
    left: -3%;
    bottom: 47.5%;
    transform: rotate(-90deg);
	animation: homeButton 2s ease;
}