expo-web/public/css/style.css

html {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

body {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

img {
	width: 100%;
	height: auto;
}

.shader {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.tile {
	background-color: #000000;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	height: 25%;
	width: 25%;
}

.tile-mobile-element {
	background-color: #000000;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	height: 25%;
	width: 50%;
}

.tile-mobile-main {
	background-color: #000000;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	height: 12.5%;
	width: 100%;
}

.tile-mobile-downloadcv {
	background-color: #000000;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	height: 15%;
	width: 100%;
}

.tile-child {
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.tile-player {
	animation: player 2s infinite;
}

.player-text {
	color: #ebdbb2;
}

.loader {
	border: 12px solid #ebdbb2;
	border-top: 12px solid #458588;
	border-radius: 50%;
	height: 120px;
	width: 120px;
	animation: spin 2s linear infinite;
}
  
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }

#whoami {
	background-color: #1d2021;
	color: #ebdbb2;
}

#git {
	background-color: #282828;
}

#downloadcv {
	background-color: #282828;
	color: #8ec07c;
	border-color: #8ec07c;
}

#clickme {
	background-color: #1d2021;
	color: #d3869b;
	border-color: #d3869b;
}

#root {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.btn,
.btn:focus,
.btn:active {
	outline: none;
	box-shadow: none;
	background-color: none;
}

.btn-mine {
	border-radius: 0;
	white-space: normal;
	background-color: #1d2021;
	color: #ebdbb2;
	border-color: #ebdbb2;
	transition: none;
}

.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active {
	background-color: #3c3638;
	color: #fbf1c7;
	border-color: #fbf1c7;
}

.btn-clickme,
.btn-clickme:focus {
	border-radius: 0;
	white-space: normal;
	background-color: #1d2021;
	color: #ebdbb2;
	border-color: #ebdbb2;
	transition: none;
}

.btn-clickme:hover,
.btn-clickme:active {
	background-color: #3c3638;
	color: #fbf1c7;
	border-color: #fbf1c7;
	animation: clickme 2s infinite;
}

@keyframes clickme {
	0% {background-color: #b16286;}
	14.28% {background-color: #458588;}
	28.57% {background-color: #689d6a;}
	42.85% {background-color: #98971a;}
	57.14% {background-color: #d79921;}
	71.42% {background-color: #d65d0e;}
	85.71% {background-color: #cc241d;}
	100% {background-color: #b16286;}
}

@keyframes player {
	0% {background-color: #b1628633;}
	14.28% {background-color: #45858833;}
	28.57% {background-color: #689d6a33;}
	42.85% {background-color: #98971a33;}
	57.14% {background-color: #d7992133;}
	71.42% {background-color: #d65d0e33;}
	85.71% {background-color: #cc241d33;}
	100% {background-color: #b1628633;}
}