*{
	font-family: century-gothic, sans-serif;
}
html{
	background-color: #D9ABA9;
}
body{
	display: grid;
	height: calc(90vh - 16px);
	width: calc(100vw - 16px);
	grid-template-columns: 7% auto;
	justify-items: center;
	align-items: center;
	background-color: #ffffff;
	border-radius: 18px !important;
	overflow: hidden;
}
aside{
	display: grid;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-template-rows: 20% 80%;
	justify-items: center;
	align-items: center;
	height: 100%;
	width: 90%;
	color: #0D0D0D;
	overflow:hidden;
}
aside img{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	width: 160%;
}
aside h1{
	writing-mode: vertical-lr;
	text-orientation: upright;
	text-align: center;
}
main{
	display: grid;
	background-color: #f7f7f7;
	background-image: url("../../img/bg.svg");
	background-size: cover;
	height: 100%;
	width: calc(100% - 16px);
	justify-content: center;
	align-items: center;
	align-content: center;
	border-radius: 10px;
	overflow: auto;
	justify-items: center;
}main form{
	display: grid;
	grid-template-columns: 400px;
	row-gap: 10px;
}
main div{
	display: grid;
	justify-content: center;
	align-content: center;
	height: 200px;
	width: 200px;
	background-size: cover;
	color: #ffffff;
	font-size: 35px;
}main a .c1{
    background-image: url("../../img/blob1.png");
}main a .c2{
    background-image: url("../../img/blob3.png");
}main a .c3{
    background-image: url("../../img/blob2.png");
}
main a{
    width: calc((100vw - 300px) / 6);
    min-width: 150px;
}
a{
	text-decoration: none;
}
td{
	border: solid 1px black;
}
input{
	padding: 10px;
	border-radius: 5px;
}

@media (orientation: portrait){
	body{
		grid-template-columns: 15% auto;
	}
	main{
		display: grid;
	}
	main a{
		width: auto;
	}
}