/*

    font-family: 'Open Sans', sans-serif;
*/

:root {
	--bg: #240907;
	--border: #39211c;
	--title: #eba566;
	--text: #eba566;
  	--primary: #96160b;
  	--secondary: #cc1b07;
	--third: #da3c14;
	--fourth: #550f0a;
}

@font-face {
    font-family: "Binary";
    src: url("binxchr.ttf");
}

.sourcecode{
	font-family: 'Source Code Pro', monospace;
}

html {
    scroll-behavior: smooth;
}

body{
    min-height: 100vh;
    width: 100%;

background-color: #030205;
background: radial-gradient(circle, transparent 20%, #030205 20%, #030205 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #030205 20%, #030205 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#240907 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #240907 2px, #030205 2px) -1px 0;
background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;

    padding-top: 60px;
    padding-bottom: 55px;
}

.avatar{
  width: 150px;
  border-radius: 24px;
  border: 3px solid var(--border);
}

h1{
	color: var(--title) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Overpass', sans-serif;
  color: var(--text);
}

p, span {
  font-family: 'Source Code Pro', monospace;
  color: var(--text) !important;
}

.uk-card{
  background-color: var(--bg);
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.container{
  	max-width:70vw;
	}

h1 { font-size: 61pt !important; font-family: 'Permanent Marker'; }
h2 {  font-size: 26pt !important; font-family: 'Open Sans', sans-serif; }
h4 { font-size: 22pt !important; font-weight: 800; font-family: 'Permanent Marker';  }

.uk-badge{
  font-size: 12pt !important;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 4px;
  padding-bottom: 4px;
  height: auto;
  margin-right: 9px;
  margin-bottom: 12px;

  box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 8px;
}

.uk-badge-c1{
  background-color: var(--primary);
  color: #FFF !important;
}
.uk-badge-c2{
  background-color: var(--secondary);
  color: #FFF !important;
}
.uk-badge-c3{
  background-color: var(--third);
  color: #FFF !important;
}
.uk-badge-c4{
  background-color: var(--fourth);
  color: #FFF !important;
}

.uk-badge-alt{
  background-color: transparent;
  color: #4EA8DE !important;
  border: 1px solid #F3F1F1;
}

.uk-button-1{
  font-family: 'Source Code Pro', monospace;
  border-radius: 10px;
  font-weight: bold;
  padding-top: 2px;
  padding-bottom: 2px;
  transition: 95ms ease-in-out;
  color: #BED1FC !important;
  background-color: transparent;
  border: 1px solid #F3F1F1;
}

.uk-button-1:hover{
  border: 2px solid transparent;
  text-decoration: none;
  color: #FFF;
}

.uk-button-social{
  font-size: 32pt;
  color: #F3F1F1;
}

.uk-button-social:hover{
  color: #939393;
}


@media (min-width:480px) and (max-width:1000px)  {
	.container{
		max-width: 85vw;
		min-width: 85vw;
	}
}

@media (max-width:480px)  {
	body{
		padding-top: 0;
		padding-bottom: 0;
	}
	.uk-card{ margin-bottom: 0; }
    .container{
      max-width: 100vw;
      min-width: 100vw;
    }

    h1 { font-size: 42pt !important; font-family: 'Permanent Marker'; }
    h2 {  font-size: 16pt !important; font-family: 'Open Sans', sans-serif; }
    h4 { font-size: 18pt !important; font-weight: 800; font-family: 'Permanent Marker';  }


    .border-left{
      border-left: none;
    }
}