@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap');


.grid-2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

body{
    margin: 0;
    padding: 0;
	font-family: 'Roboto Mono', monospace;
    background-color: #000000;
    color: #7A7C80;

}

h2,.white{
    color: #fff;
}

a{
    color: #7A7C80;
    text-decoration: none;
	font-family: 'Roboto Mono', monospace;
}
/* section 1 */
.section-1{
    padding-top: 10vh;
    text-align: center;
    width: 100%;
	max-width:400px;
	margin-left: auto; 
	margin-right: 0;		
}


.t1-desc{
    font-size: 0.9rem;
    margin:0;
	padding-left: 0px;
	padding-right: 0px;	
	text-align: left;
	color: #ADAFB0;
	font-family: 'Roboto Mono', monospace;
}
.t1-desc-center{
    font-size: 1.1rem;
    margin:0;
	padding-left: 0px;
	padding-right: 0px;	
	text-align: center;
	font-family: 'Roboto Mono', monospace;
}

.video-box{
	padding-top: 10px;
	padding-bottom: 10px;	
	padding-left: 5px;
	padding-right: 5px;	
	align-content: center;
	text-align: center;
}
.video-box-header{
	text-align: left;
}

.text-block{
	padding-left: 20px;
	padding-right: 20px;	
}

.section-1 p{
/*    font-size: 0.5rem;*/
    padding-bottom: 10px;
    margin:0;
}

.section-1 h2{
    font-size: 1.7rem;
    margin-bottom: 10px;
}

.section-1 a{
    font-size: 1.5rem;
    padding: 10px;
}
/* section 2 */
.section-2{
    padding-top: 10vh;
    width: 100%;
	max-width:400px;
	margin-left: 0; 
	margin-right: auto;	
}

/*
@media (max-width: 479px) {
	.section-2{
		padding-top: 10vh;
		width: 100%;
		max-width:400px;
		margin-left: 0; 
	}
}
*/

.section-2 h2{
    font-size: 1.7rem;
    margin-bottom: 10px;
	font-family: 'Roboto Mono', monospace;
}

.section-2 p{
    font-size: 1.1rem;
    padding-bottom: 10px;
    margin:0;
	font-family: 'Roboto Mono', monospace;
}

.section-2 a{
    display: block;
    padding: 5px;
    font-size: 1.2rem;
    padding-left: 0;
    width: 100px;
}
/* animations / utilities */
.section-2 a:hover{
    font-size: 1.3rem;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.section-1 a:hover{
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

.white:hover{
    position: relative;
    padding-left: 10px;
}

/* media queres */
@media(max-width:780px){
    .grid-2{grid-template-columns: 1fr;
    }
    .section-1{
        padding:0;
        padding-top: 5rem;
		margin-left: 0;
		margin-right: auto;
    }
    .section-2{
        padding: 0;
        padding-left: 1.5rem;
        padding-top: 2rem;
		margin-left: 0;
		margin-right: auto;		
    }
}


/*  --------------------- SCROLLBARRR ---------------------*/
/* Hide default scrollbar */
::-webkit-scrollbar {
    width: 12px; /* Set width for vertical scrollbar */
    height: 12px; /* Set height for horizontal scrollbar */
}

/* Style the track (part the scrollbar moves along) */
::-webkit-scrollbar-track {
    background: #000000; 
    border-radius: 0; 
}

/* Style the thumb (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
    background: #6e6e6e; /* Black color for the scrollbar thumb */
    border-radius: 0; /* Square edges */
}

/* Optional: Style the thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background: #333; /* Darker black when hovering */
}
/*  --------------------- SCROLLBARRR ---------------------*/