@font-face {
	font-family: quicksand;
	src: url(font.ttf);
}

body {
	margin: 0 auto;
	max-width: 800px;
	font-family: quicksand;
}

#welcome {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#welcome a {
	margin: 5px;
	padding: 10px 15px;
}

menu {
	display: flex;
	margin: 0;
	padding: 10px;
}

menu div {
	flex-grow: 1;
	text-align: center;
	cursor: pointer;

	svg {
		height: 40px;
		transition-duration: 0.2s;
	}
}

main {
	text-align: center;
}

#search-bar {
	font-family: quicksand;
	padding: 10px 12px;
	border-radius: 25px;
	border: solid 2px rgb(191, 141, 201);
	margin-bottom: 30px;
	width: 70%;
}

.word-box {
	padding: 10px;
	border: 2px solid rgb(234, 115, 192);
	text-align: left;
	margin: 5px 0;
	border-radius: 14px;
}

.word {
	font-weight: bold;
	font-size: xx-large;
	color: rgb(100, 37, 135);
}

.sub {
	color: grey;
	margin-left: 20px;
	font-size: small;
}

.trans-list {
	display: flex;
	font-weight: bold;
	gap: 20px;
	margin: 5px;
	font-size: large
}

.tags-list {
	font-size: small;
	display: flex;
	gap: 5px;
	margin: 5px
}

.tag {
	border: 2px grey solid;
	padding: 3px 7px;
	border-radius: 25px;
}

.Nom-propre,
.Proper-noun {
	border-color: #430466;
}

.Nom,
.Noun {
	border-color: #ba0be0;
}

.Interjection {
	border-color: #b56f2b;
}

.Verb,
.Verbe {
	border-color: #118b9e;
}

.Adjective,
.Adjectif {
	border-color: #db358e;
}

.Kykasu {
	border-color: #e6ba63;
}

.Kykasa {
	border-color: #ed6442;
}

.extra-margin {
	margin-top: 20px;
}

.alphabet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
}

table, th, td {
    border-collapse: collapse;
    border: 2px solid rgb(255, 175, 210);
}

table {
    border-width: 2px;
}

th, td {
    padding: 3px;
}

#knowledge, #dictionary {
	padding: 15px;
}

p, h2 {
	text-align: left;
}

.grid1 {
	display: grid;
	grid-template-columns: 1fr;
}

h2, .word {
	cursor: pointer;
}

h2 {
	color: rgb(100, 37, 135);
}

.copied {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	position: fixed;
	top: 15px;
	left: 15px;
	padding: 10px;
	background-color: white;
    border: 2px solid rgb(255, 175, 210);
	border-radius: 10px;
}

.copied span {
	font-weight: bold;
	color: rgb(100, 37, 135);
}

@keyframes from-left {
	0% {
		transform: translateX(-400px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes from-right {
	0% {
		transform: translateX(400px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fadeout {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}