@font-face {
    font-family: 'squarefontregular';
    src: url('../SquareFont/square-webfont.woff2') format('woff2'),
         url('../SquareFont/square-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
	--primary-color: #6038a5;
	--secondary-color: #5a447e;
	--tertiary-color: #614b9f;
	--dark-color: #30243e;

	--text-color: #9e98f4;
	--text-color-light: #eed9ea;
	--text-color-dark: #e395d2;
	
	--link-color: #7675d7;
	--link-color-hover: #57549c;
	--background-color: #45345e;

}	
body{
    background-color: var(--background-color);
    color: var(--primary-color);
	font-family: "squarefontregular";

	overflow-x:hidden;
	max-width:100vw;
}

h1{
	color:var(--text-color);
	font-size: 50px;
	padding: 10;
	margin: auto;

}

p {
	color:var(--text-color);
	font-size:20px;
	margin: auto;
	padding: 10px
}
li{
	color:var(--text-color);
	font-size:20px;
	margin: auto;
	padding: 10px
}



.textLink {
	color: var(--link-color);
    transition: .25s;
}
.textLink:hover {
	color:var(--link-color-hover);
    transition: .25s;
}


.titleText{
	font-size: 100px;
	text-align: center;
}

.column{
	display: flex;
	flex-direction: column;
}

h1{
	font-size: 70px;
	padding:20px;
}

button{
	padding: 10px;
	margin: 10px;
	content: auto;
	color: var(--text-color);
	font-family: "squarefontregular";
	
	background-color: var(--secondary-color);
	border-color: var(--dark-color);

	
}
input{
	background-color: var(--secondary-color);
	color:var(--text-color);
	font-size:20px;
	font-family: "squarefontregular";

	border:5px solid var(--dark-color);
	
	justify-content: center;
  	align-items: center;
}

.link{
	color: var(--link-color);
}
.link:hover{
	color: var(--link-color-hover);
}