vocab.css

:root {
	--grey: #A9A9A9;
	--yellowlight: #FFFBDF;
	--greenlight: #EAFFEF;
	--bluelight: #D9E5FF;
	--purplelight: #CBC5F5;
	--pinkdark: #E2C8E5;
	--pink: #F3D3EA;
	--pinklight: #F9DFE8;
	--orangelight: #FDECE4;
}

body {
	margin: 0px;
	border: 0px;
	font-family: 'Roboto', sans-serif;
	align-items: center;
	min-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

a {
	display:inline;
}

/* OPTIONS ----------------------------- */

#goToOptions {
	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
	position: fixed;
	top: 5vh;
	left: 5vh;
	height: 23px;
	width: 23px;
	
}

#goToOptions:hover {
	cursor: pointer;
}

#romajiCheck {
	position: fixed;
	top: 11vh;
	left: 6vh;
	visibility: hidden;
}

#topText {
	position: fixed;
	top: 14vh;
	left: 6vh;
}
/* COLOURS ------------------------------------ */

.colourSwatch {
	position: fixed;
	bottom: 3vh;
	right: 5vh;
	float: right;
}

.colourBlock {
	border: var(--grey) 1px solid;
	width: 20px;
	height: 20px;
	display: inline-block;
}

.colourBlock:hover, .colourBlock:visited {
	cursor: pointer;
	border: black 1px solid;
}

.upperSwatch {
	position: relative;
	float:right;
}
.lowerSwatch {
	clear:right;
	float: right;
	position: relative;
}

#yellowlight {
	background-color: var(--yellowlight);
}
#greenlight {
	background-color: var(--greenlight);
}
#bluelight {
	background-color: var(--bluelight);
}
#purplelight {
	background-color: var(--purplelight);
}
#pinkdark {
	background-color: var(--pinkdark);
}
#pink {
	background-color: var(--pink);
}
#pinklight {
	background-color: var(--pinklight);
}
#orangelight {
	background-color: var(--orangelight);
}


/* JAPANESE --------------------------------- */

.romaji {
	margin-top: 10vh;
	font-weight: 100;
	font-size: 60px;
	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace; 
}

.hiraganaclass {
	position: relative;
	margin-top: -5vh;
	margin-left: 3vh;
}

.hiragana {
	text-align: center;
	font-size: 60px;
	font-weight: 900;
}

.audio {
	position: relative;
	bottom: 30px;
}

.audio:hover {
	cursor: pointer;
}

.kaclass {
	position: relative;
	padding-top: 1vh;
}

.kanji {
	font-weight: 100;
	font-size: 20px;	
	margin-right: 10px;
}

.dot {
	align-items: center;
}

.katakana {
	padding-top: 2vh;
	font-weight: 100;
	font-size: 20px;
	position:relative;
	text-align: center;	
	margin-left: 10px;
}

.pos {
	font-weight: 100;
	font-size: 15px;
	position:relative;
	text-align: center;	
	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace; 
	
}

.pronounciation_pos {
	color:#8c8c8c;
	position:relative;
	margin: 0 auto;
	padding-top: 1vh;
}

.definition {
	font-size: 30px;
	margin: 0;
	padding: 0;
	margin-top: 1vh;
	width: 90vw;
	margin-left: auto;
	margin-right: auto;
	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace; 
}


/* MOST VISITED ------------------------ */

#toggleLinks {
	position: fixed;
	height: 20px;
	width: 30px;
	bottom: 3vh;
	left: 5vh;
}

#toggleLinks:hover {
	cursor: pointer;
}

.most_visited {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3vh;
	max-width:980px;
}

ul {
	margin: 0px;
	padding-top: 1vh;
}

li {
	border:0px;
	float: left;
	display: inline-block;
	margin: 10px;
	-webkit-transition: box-shadow .2s; /* Safari */
    transition: box-shadow .2s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

li:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	background-color: white;
}

a:link {
	color:black;
	text-decoration: none;
}

a:visited {
	color:black;
	text-decoration: none;
}

a:hover {
	color:black;
	text-decoration: none;
}

a:active {
	color:black;
	text-decoration: none;
}

.link {
	position: relative;
	width: 180px;
	overflow: hidden;
    overflow: ellipsis;
    white-space: nowrap;
  	border: 1px solid var(--grey);
  	padding: 10px;
  	height: 30px;
  	border-radius: 30px;
  	
}

.favicon {
	width: 20px;
	height: 20px;
	margin-left: 5px;
	margin-top: 5px;
	margin-right: 5px;
}

.link_text {
	padding-left: 5px;
	padding-top: 5px;
	position: absolute;
	font-size: 15px;
	display: inline-flex;
    
}