/* ---------------------- FONTS -------------------------- */
@font-face {
    font-family: arcade;
    src: url(fonts/arcade.ttf);
}
@font-face {
    font-family: circularStd-Book;
    src: url(fonts/CircularStd-Book.otf);
}
@font-face {
    font-family: circularStd-Black;
    src: url(fonts/CircularStd-Black.otf);
}
@font-face {
    font-family: circularStd-Bold;
    src: url(fonts/CircularStd-Bold.otf);
}



/* ----------------------- VARS --------------------------- */
:root {
  
  --boston-blue: #005CFF;
}

/* ----------------------- GLOBAL ------------------------- */
html{
	
}
body{
	
	font-family: circularStd-Book;
	margin: 20px;
}

a{
    color: black !important;
    text-decoration: none !important;
}

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

    border: 3px solid transparent;
    background-clip: padding-box;
    -webkit-border-radius: 10px;
		background-color: black;
}
::-webkit-scrollbar-thumb:hover{
	cursor: grab;
}

/* ----------------------- Header ------------------------- */
header{
	
	position: relative;
	margin-bottom: 10px;
}
.logo{
	
	width: 15%;
	cursor: pointer;
}
.contact{
	
	display: inline-block;
	position: absolute;
	transform: translateY(-50%);
	right: 0;
	top: 50%;
	margin: 0;
	cursor: pointer;
	font-size: 20px;
}


/* ----------------------- Footer ------------------------- */
footer{
	
	text-align: right;
}
footer>a{
	
	text-decoration: none;
}

footer svg{
    
    width: 70px;
}



/* ----------------------------------- MOBILE ----------------------------------- */
@media (pointer:none), (pointer:coarse){ 

    header .logo{
        
        width: 35%;
    }   
    header .contact{
        
        font-size: 38px;
    }
}