:root {
	--avatarHeight: calc(90vh / 2);
	--avatarWidth: calc(90vw / 3);
	--avatarSize: min(var(--avatarHeight), var(--avatarWidth));
	--avatarOffset: calc(var(--avatarSize) / 2);
}

body{
	background-color: #36393f;
	font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 4vh;
	color: #dcddde;
}

a{
	color: #00b0f4;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

code{
	background: #2f3136;
	padding: .05vh .5vh;
	border-radius: 1vh;
}

.bot-div{
	min-height: 80vh;
	width: 80vw;
	background-color: #40444b;
	margin: 5vh auto;
	padding: 5vh 5vw;
	border-radius: 10vmin;
	overflow: hidden;
}


.avatar-div {
	height: var(--avatarSize);
	width: var(--avatarSize);
	position: relative;
	transform: translate(-50%, -50%);
	display: inline-block;
}
@media (orientation: landscape) {
	.avatar-div {
		top: calc(45vh * .9);
		left: var(--avatarOffset);
	}
}
@media (orientation: portrait) {
	.avatar-div {
		top: var(--avatarOffset);
		left: calc(45vw * .9);
	}
}
.avatar-img {
	height: 100%;
	width: 100%;
	border-radius: 50%;
	object-fit: contain;
}
.avatar-online .avatar-img {
	clip-path: url("#cutout");
}
.avatar-offline .avatar-img {
	clip-path: url("#cutout");
}
.avatar-dot {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 1000;
}
.avatar-online .avatar-dot {
    clip-path: url("#online");
    background-color: #43b581;
}
.avatar-offline .avatar-dot {
    clip-path: url("#offline");
    background-color: #747f8d;
}


.bot-text {
	display: inline-block;
	position: relative;
	text-align: center;
	margin: 0px 2vw 10vh;
}
@media (orientation: landscape) {
	.bot-text {
		width: calc(90vw - var(--avatarSize) - var(--avatarOffset) - 14vw);
		float: right;
		left: -5vw;
	}
}
@media (orientation: portrait) {
	.bot-text {
		width: 80vw;
		left: 38vw;
		top: 10vh;
		transform: translate(-50%, 0%);
	}
}
.bot-title {
	position: relative;
	display: inline-block;
	font-size: 6vh;
	font-weight: bold;
	color: #ffffff;
}
.bot-desc {
	position: relative;
	display: inline-block;
	top: 2vmin;
}
.bot-desc-image {
	position: relative;
	display: inline-block;
	top: 2vmin;
	height: 40%;
	width: auto;
}
.bot-guilds {
	position: relative;
	display: inline-block;
	color: #8e9297;
	background-color: #36393f;
	font-size: 3vh;
	padding: .5vmin;
	border-radius: 1vmin;
}


.bot-invite {
	position: relative;
	display: inline-block;
	font-size: 5vh;
	color: #ffffff;
	background-color: #7289da;
	padding: 1vmin 2vmin;
	border-radius: 1vmin;
	top: 1vmin;
	cursor: pointer;
}
.bot-invite-text {
}
.bot-invite-text:hover {
}
.bot-invite-text-offline {
}
.bot-invite-text-offline:hover {
	font-size: 0px;
}
.bot-invite-offline-tooltip {
	font-size: 0px;
}
.bot-invite-text-offline:hover .bot-invite-offline-tooltip {
	font-size: 5vh;
}

.privacy {
	font-size: 3vh;
}

.widgetbot-div{
	min-height: 80vh;
	width: 80vw;
	background-color: #40444b;
	margin: 0px auto;
	padding: 5vmin;
	border-radius: 10vmin;
}