:root {
  --backgroundColor: ivory;
  --textColor: purple;
  --fontSize: 45vh;
}

body {
	margin: 0;
	background-color: var(--backgroundColor);
	color: var(--textColor);
}

*, ::after, ::before {
    box-sizing: border-box;
}

#card {
	font-size: var(--fontSize);
	font-family: sans-serif;
	font-weight: bold;
	position: fixed;
/*	text-align: justify;*/
/*  	text-justify: inter-word;*/
/*	padding: 28px 18px 28px 18px;*/
	margin: 28px 18px 28px 18px;;
	height: calc(100vh - 28px - 28px);
	width: calc(100vw - 18px - 18px);
/*	margin: 0;*/
	border: 0;
	line-height: 100%;
	overflow: scroll;
	word-break: normal;
	overflow-wrap: normal;
	scrollbar-width: none; /* this is a trick from: https://blog.logrocket.com/hide-scrollbar-without-impacting-scrolling-css/	*/
}

#card:focus {
	outline: none !important;
	border: 0;
}

#card::-webkit-scrollbar {
	width: 0 !important
}

a {
	color: var(--textColor);
  	text-decoration: none;
}

footer {
	position: fixed;
  	left: 0;
  	top: 100%;
	transform: translateY(-100%);
	padding: 5px;
  	font-size: 1.2em;
  	font-style: italic;
  	font-weight: bold;
  	font-family: "Segoe UI",Arial,sans-serif;
}

#menu, #trash, #coffee, #textColor, #backgroundColor, #textColorPicker, #backgroundColorPicker, #tts, #flagPT, #flagUK, #stt, #sflagPT, #sflagUK {
	position: fixed;
	top: 10px;
	right: 10px;
	font-size: 1.5em;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transform: translateY(100%);
	transition: visibility 0.6s, transform 0.6s, opacity 0.6s;
}

#trash {
	right: 50px;
	transition: visibility 0.6s, transform 0.6s, opacity 0.6s;
}

#textColor, #textColorPicker {
	right: 90px;
	transition: visibility 0.9s, transform 0.9s, opacity 0.9s;	
}

#backgroundColor, #backgroundColorPicker {
	right: 130px;
	transition: visibility 1.2s, transform 1.2s, opacity 1.2s;	
}

#tts, #flagPT, #flagUK {
	right: 170px;
	transition: visibility 1.5s, transform 1.5s, opacity 1.5s;
}

#stt, #sflagPT, #sflagUK {
	right: 210px;
	transition: visibility 1.8s, transform 1.8s, opacity 1.8s;
}

#coffee {
	right: 240px;
	transition: visibility 2.1s, transform 2.1s, opacity 2.1s;	
}

#textColorPicker, #backgroundColorPicker, #flagPT, #flagUK, #sflagPT, #sflagUK {
	width: 24px;
	height: 24px;
}

#flagPT, #flagUK, #sflagPT, #sflagUK {
	background-color: var(--backgroundColor);
	transform: translateY(-100%);
}

#flagPT, #sflagPT {top: 39px;}
#flagUK, #sflagUK {top: 69px;}

.show {
	visibility: visible !important;
	opacity: 1 !important;
	transform: translateY(0) !important;
}

#splashscreen {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: black;
  text-align: center;
  justify-content: center;
  color: white;
  font-size: 2vw;
  vertical-align: middle;
}
.splashtext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: sans-serif;
}
.splashtext h1 {
  font-size:7vw;
  font-style:italic;
  margin-bottom: 0;
  margin-top: 0;
  font-weight: bold;
}
.splashtext p {
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 1vw;
  word-spacing: 1vw;
  font-weight: 300;
}

.animate {
  animation: splash 2s forwards 1s ease-in-out;
}

@keyframes splash {
  0% { opacity: 100%; }
  100% { opacity: 0%; }
}