@font-face {
    font-family: TsunagiGothic;
    src: url("./assets/fonts/tsunagigothic/TsunagiGothic.ttf") format("truetype");
}

@font-face {
    font-family: Torus;
    font-weight: bold;
    src: url("./assets/fonts/torus/Torus-Bold.otf") format("opentype");
}

@font-face {
    font-family: Torus;
    font-weight: 900;
    src: url("./assets/fonts/torus/Torus-Heavy.otf") format("opentype");
}

@font-face {
    font-family: Torus;
    font-weight: 300;
    src: url("./assets/fonts/torus/Torus-Light.otf") format("opentype");
}

@font-face {
    font-family: Torus;
    font-weight: normal;
    src: url("./assets/fonts/torus/Torus-Regular.otf") format("opentype");
}

@font-face {
    font-family: Torus;
    font-weight: 600;
    src: url("./assets/fonts/torus/Torus-SemiBold.otf") format("opentype");
}

@font-face {
    font-family: Torus;
    font-weight: 100;
    src: url("./assets/fonts/torus/Torus-Thin.otf") format("opentype");
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #1f1e1e;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #fc3d3d;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #993c3c;
}

.leaderboard-custom {
	background: linear-gradient(to right, rgba(31,30,30,1), rgba(31,30,30,0.3));
    color:#ffe4e7;
}
.cover {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.maps {
	height: auto;
	overflow: visible;
}

.options-container {
	height: auto;
	overflow: visible;
}

.map-custom {
	height: 175px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.map-layout {
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.6);
	transition: background .5s;
}

.map-layout:hover {
	background: rgba(0,0,0,0.3);
}

.map-creator {
	font-size: 16px;
	color: #f2f2f2;
	font-family: 'Torus';
	font-weight: normal;
	padding: 0px 12px 0px 12px;
}

.map-name {
	font-size: 22px;
	color: #f2f2f2;
	font-family: 'TsunagiGothic';
	padding: 0px 12px 0px 12px;
}

.artist-name {
	font-size: 18px;
	color: #f2f2f2;
	font-family: 'TsunagiGothic';
	padding: 0px 12px 0px 12px;
}

.central {
    background-color: #2e2d2d;
}

.sides {
    background-color: #2e2d2d;
}

.nav-color {
    background-color: #1f1e1e;
}

.navbar-brand-text {
    color: #fc3d3d;
	text-decoration: none;
	font-family: 'TsunagiGothic';
	font-size: 25px;
	padding: 4px;
	margin-left: 4px;
	margin-right: 12px;
}

.navbar-brand-text:hover {
    color: #f2f2f2;
}

.nav-link-text {
    color: #fc3d3d;
	text-decoration: none;
	font-family: 'TsunagiGothic';
	font-size: 18px;
	margin-left: 2px;
	margin-right: 2px;
}

.nav-link-text:hover {
    color: #f2f2f2;
}

.page_break-color {
	border-width: 2px;
	opacity: 1;
	margin: 0px;
	padding-bottom: 20px;
	color: #fc3d3d;
}

.avatar {
    max-width: 200px;
	filter: brightness(100%);
	transition: filter .5s;
}

.avatar:hover {
    filter: brightness(130%);
}

.flag {
    max-width: 35px;
}

.flag-col {
	padding-right: 0px!important;
}

.stats {
    font-size: 18px;
}

.username {
    font-size: 23px;
	color: #f2f2f2;
}

.rank {
    font-size: 15px;
	color: #f2f2f2;
	font-family: 'Torus';
	font-weight: normal;
}

.username-break{
	border-color: #fc3d3d;
	border-width: 1.5px;
	margin: 0px 0px 0px 0px;
	margin-right: calc(100% - 170px);
	opacity: 1;
	border-style: solid;
}

.caption {
    color: #f2f2f2;
	font-family: 'Torus';
	font-weight: normal;
	font-size: 18px;
}

.caption-link {
    color: #fc3d3d;
	text-decoration: none;
}

.caption-link:hover {
    color: #f2f2f2;
}

.red-text {
	color: #fc3d3d;
}

.red-button {
	background-color: #2e2d2d;
	color: #f2f2f2;
	border-color: #fc3d3d;
	border-style: solid;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	margin: 10px;
}

.red-button:hover {
	background-color: #fc3d3d;
}

.heading {
    color: #f2f2f2;
	font-family: 'TsunagiGothic';
}

.gif {
    max-width: 280px;
}

.radio-style {
	accent-color: #fc3d3d;
	transform: translateY(+0.115em);
}

.map-link {
	text-decoration: none;
	padding: 0px!important;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 300px) {
    .avatar {
        max-width: 80px;
    }

    .flag {
        max-width: 30px;
        margin-top: 1px; 
    }

    .stats {
        font-size: 10px;
        padding-top: 1px;
        margin-bottom: 0px;
        font-family: 'Torus';
		font-weight: normal;
    }
    
    .username {
        padding-top: 3px;
        font-size: 15px;
        font-family: 'TsunagiGothic';
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 300px) {
    .avatar {
        max-width: 100px;
    }

    .flag {
        max-width: 35px;
        margin-top: 4px; 
    }

    .stats {
        font-size: 15px;
        margin-bottom: 0px;
        font-family: 'Torus';
		font-weight: normal;
    }
    
    .username {
        font-size: 22px;
        font-family: 'TsunagiGothic';
    }
	
	.rank {
		font-size: 22px;
		font-family: 'Torus';
		font-weight: normal;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    .flag {
        margin-top: 5px;
    }
}

@media only screen and (min-width: 992px) {
	.maps {
		height: calc(100vh - 257.5px);
		overflow: auto;
	}
	
	.options-container {
		height: calc(100vh - 292.5px);
		overflow: auto;
	}
}