@font-face {
    font-family: 'Upheaval TT (BRK)';
    src: url('font/UpheavalTT-BRK-.woff2') format('woff2'),
        url('font/UpheavalTT-BRK-.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
	height: 100%;

	background-color: #2E2343;
	font-family: 'Upheaval TT (BRK)';
    font-weight: normal;
    font-style: normal;
    color: #A17558;
}

body,
html {
    height: 100%
}

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0
}

ul {
	list-style-type: none;
	margin: 0 auto;
    padding: 0;
	overflow: hidden;
	position: center;
	width: 80%;
    text-align:center;
    font-size: 35px;
}

li {
	display: inline-block;
    background-color: #694549;
    margin: 16px;
    padding: 16px;
}

.border{
    background-color: #A17558;
    padding: 5px;
}

li a {
	display: block;
	color: #694549;
    background-color: #A17558;
	text-align: center;
	padding: 16px;
    margin: 4px;
	text-decoration: none;
    font-size: 30px;
}

li a:hover {
	background-color: #2E2343;
	color: #A17558;
}

/*---------------------------------------------------------------*/

.instagram {
    display: inline-block;
    background-color: #694549;
    margin: 10px;
    padding: 10px;
}

.instagram img{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/instagram.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.instagram img:hover{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/instagram_h.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.youtube{
    display: inline-block;
    background-color: #694549;
    margin: 10px;
    padding: 10px;
}

.youtube img{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/youtube.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.youtube img:hover{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/youtube_h.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.itchio{
    display: inline-block;
    background-color: #694549;
    margin: 10px;
    padding: 10px;
}

.itchio img{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/itchio.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.itchio img:hover{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/itchio_h.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.steam{
    display: inline-block;
    background-color: #694549;
    margin: 10px;
    padding: 10px;
}

.steam img{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/steam.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.steam img:hover{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/steam_h.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.discord {
    display: inline-block;
    background-color: #694549;
    margin: 10px;
    padding: 10px;
}

.discord img{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/discord.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.discord img:hover{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(image/discord_h.png);
    background-size: cover; 
    width: 100px; /* Width of new image */
    height: 100px; /* Height of new image */
    padding-left: 100px; /* Equal to width of new image */
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project_title{
    color: #A17558;
    font-size: 50px;
}

.description{
    font-size: 30px;
    text-align: center;
    white-space: pre;
}

.bulletpoints{
    font-size: 30px;
    text-align: center;
    display: inline-block;
}

.bulletpoints{
    font-size: 30px;
    text-align: left;
    display: inline-block;
}

.title{
    color: #A17558;
    font-size: 120px;
    text-align: center;
    padding-top: 200px;
    padding-bottom: 25px;
}

.floating-button{
    position: fixed;
}
.floating-button-br{
    position: fixed;
    bottom: 5px;
    right: 5px;
}
.floating-button a{
    font-size: 20px;
}


#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #694549; /* Set a background color */
  color: #A17558; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 16px; /* Some padding */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
	background-color: #2E2343;
	color: #A17558;
}