* {
}

#frontpage_logo {
    width: 100%;
    height: fit-content;
    background-image: linear-gradient(155deg, var(--primary-color) 0%, var(--primary-color2) 90%);
    border-bottom: var(--border-color) 3px solid;
    text-align: center;
}
#fplogo_img {
	width: 50%;
	max-width: 500px;
}



.toolcontainer {
	display: grid;
	grid-template-rows: 1fr;
    margin: 10px 50px;
    padding: 0px;
    cursor: pointer;
}

.toolcontainer:nth-child(odd) {
	grid-template-columns: 50px 3fr;
	border: 1px solid var(--border-color);	
	border-left: 10px solid var(--border-color);
	text-align: right;
	background-image: linear-gradient(-99deg, var(--background-color1) 0%,  #F09819  100%);
}

.toolcontainer:nth-child(even) {
	grid-template-columns: 3fr 50px;
	border: 1px solid var(--border-color);
	border-right: 10px solid var(--border-color);
	background-image: linear-gradient(99deg, var(--background-color1) 0%,  #F09819  100%);
}


.toolcontainer:nth-child(odd):hover {
	padding-right: 10%;
	transition-duration: 800ms;

}
.toolcontainer:nth-child(even):hover {
	padding-left: 10%;
	transition-duration: 800ms;
}


.toolname {
	font-size: 25px;
	font-weight: 500;
	padding: 5px;
	font-family: 'headfont', sans-serif;
	background-image: linear-gradient(62deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
	border-right: 1px solid var(--border-color);
}

.toolcontainer:nth-child(odd) > .toolname {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.toolcontainer:nth-child(even) > .toolname {
	writing-mode: vertical-rl;
	text-orientation: upright;
}


.tooldesc {
	font-size: 20px;
	padding: 10px 40px;
	vertical-align: middle;
	margin: auto;
}



.toolcontainer:nth-child(odd) .toolname {
	grid-row: 1;
	grid-column: 1;
}
.toolcontainer:nth-child(odd) .tooldesc {
	grid-row: 1;
	grid-column: 2;
}
.toolcontainer:nth-child(even) .tooldesc {
	grid-row: 1;
	grid-column: 1;
}
.toolcontainer:nth-child(even) .toolname {
	grid-row: 1;
	grid-column: 2;
}

@media screen and (max-width: 700px) {

	.toolcontainer {
		margin: 0px 0px;
	}
    

	#frontpage_logo {
	}
	#fplogo_img {
		width: 100%;
	}
	.toolname {
		font-size: 18pt;
	}
	.tooldesc {
		font-size: 10pt;

	}
}