@font-face {
  font-family: 'def';
  src: url('../assets/fonts/overpass/overpass_regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}
@font-face {
  font-family: 'def';
  src: url('../assets/fonts/overpass/overpass_medium.ttf') format('truetype');
  font-weight: medium;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: 'def';
  src: url('../assets/fonts/overpass/overpass_bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap; 
}
html{
    font-family:def;
    font-weight:normal;
    margin:0;
    padding:0;
    font-size:18px;
}
a{
    margin:0;
    padding:0;
}
.justified-main{
    display:block;
    max-width:1200px;
    margin:auto;

}

h1,h2,h3{
    font-weight:normal;
    margin:0;
    padding:0;
}

h1{
    font-size:2rem;
}
h2{
    font-size:1.5rem;
}
h3{
    font-size:1.25rem;
}
p{
    font-size:1rem;
    margin:0;padding:0;
}



header{
    color:rgb(60,60,60);
    
    margin:50px auto;
    padding:0 20px;

    h1{
	font-weight:bold;
    }
    .subtitle{

    }
}

.project-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;

    @media(max-width:1100px){
	grid-template-columns:1fr;
	gap:20px;

    }


}

main{
    color:rgb(60,60,60);
    padding:0 20px;
}
.project-frame{


    width:100%;
    margin:20px auto;

    background-color:rgb(25,25,25);
    border:0px rgb(100,100,100) solid;
    box-shadow:8px 8px 0px rgba(0,0,0,0.15);

    display:flex;
    
    flex-direction:column;
    
    color:rgb(200,200,200);


    .left-section{
	width:100%;


	@media(max-width:1100px){
	    
	}
	margin-right:10px;

    }
    .right-section{
	width:100%;
	padding:20px;
	box-sizing:border-box;

	.subtitle{
	
	    font-size:.9rem;
	    margin:5px 0px;
	}
	p.subtitle{
	    color: rgb(150,150,150);
	    b{
		color: rgb(180,180,180);
	    }
	}
	a{
	    color:rgb(50,150,255);
	}

	ul{
	    li{
		font-size:0.9rem;
	    }
	}

    }
    .imgs{
	width:100%;

	img{
	    width:100%;

	    display:block;
	}
    }
    .title{
	font-weight:bold;
	width:100%;
    }

}

.project-section{

}



.margin-top-50px{
    margin-top:50px;
}

.margin-vertical-10px{
    margin-top:10px;
}

.margin-vertical-15px{
    margin-top:15px;
}

.margin-vertical-50px{
    margin-top:50px;
}

ul{
    padding:5px 25px;
    margin:0;
    li{
	padding:0;
	margin:5px 0;
    }
}