.main-container{
    display:flex;
    flex-direction:column;
    max-width:900px;
    width:100%;
    margin-top:130px !important;


}
#title-pr-top{


    font-family:"Press Start 2P", system-ui;
    color:black;
    margin-bottom:30px;
    margin-right:auto;
    margin-left:auto;
}


.project-container{
    display:flex;
    flex-direction:row;
    border-top : 2px solid grey;
    border-bottom : 2px solid grey;
    max-width:900px;
    width:100%;
    height:240px;
    transition : background-color 0.3s , color 0.3s ; 
}


.project-container:hover{
    background-color:#1C2635;
    color:#E3D9CA;
    box-shadow : 3px 3px 3px grey , 
		 -3px -3px 3px grey , 
		 3px -3px 3px grey , 
		 -3px 3px 3px grey ; 
    border-top : 2px solid grey;
    border-bottom : 2px solid grey;
}

.project-container:hover a{

        color:#E3D9CA;

}
.project-container:hover .pr-links2:hover , .project-container:hover .pr-links1:hover{
    opacity:0.5;
}


.project-title{

    align-items:center;
    display:flex;
    flex-direction:column;
    flex:2.4;
    padding:5px
}



.project-title h2{

    flex : 1;
    font-size:22px;
    margin-top:86px;
    text-align:center;
}

.stack-used {
    display: flex;
    justify-content:space-between;
    font-size:18px;
    padding-bottom:7px
}
.stack-used i{
    padding-right : 5px;
}

.project-description{
    display:flex;
    flex:4;
    font-size:13px;
    border-left : 1px solid grey;
    height:130px;
    margin-top:65px;
    padding : 7px 0px 0px 7px;
}
.project-links {
    flex:0.8;
    display : flex;
    justify-content:space-between;
    align-items : center;
    flex-direction : column;
    font-size:10px;
    color:#403F48;
    padding-right:5px;
    padding-bottom:5px
}


.pr-links1 ,.pr-links2 , .pr-links2:visited{
    text-decoration:underline;
    font-weight:bold;
    color:#403F48;
}


.pr-links1:hover{
    cursor: not-allowed;
}

.pr-links1{

    padding-top:55px;
}
.pr-links2{

    padding-bottom:35px;
}
#pr2{
    position: relative;
}

.locked{

    position: absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    z-index:100;
    transition: background-color 0.3s;
}

.lock-img{
    z-index:101;
    max-height:5px;
    position:relative;
    left:49.4%;
    top:25%;
    max-width:100px;

}
.lock-img img{
    height:60px;
    opacity:1;
}


.locked:hover .lock-message{
    opacity:1;

}
.lock-message{
    position:relative;
    left:40.9%;
    top:55%;
    width:185px;
    opacity:0;
    background-color:white;
    border-radius:5px;
    padding:4px 8px 4px 8px;
    box-shadow: 3px 3px 3px grey , 
		 -3px -3px 3px grey , 
		 3px -3px 3px grey , 
		 -3px 3px 3px grey ; 
    transition: opacity 0.3s;
    color: black;
}

.lock-message p {

    font-size:16px !important;
}

.locked:hover .locked-message p {
    color : grey;
    opacity:1;
}




#pr2 .project-description{
    overflow-wrap: break-word;
}



#pr2 .project-links .pr-links2{

    margin-bottom:40px;
}


#pr2 .project-title ,#pr2  .project-description ,#pr2  .project-links{

    
    filter :blur(3px);
}


.pr-msg{

    position:absolute;
    z-index:100;
    max-height:200px;
    top:-50%;
    left:25%;

}

.pr-msg p {


    font-size:10px !important;

}


@media (max-width:432px){
 
     .lock-img{
     
	  left:42%;
          top:25%;

	 
     }
     
     .lock-message {
     
	  left:20.1%;
          top:49%;


     }


     .pr-msg{


	top:-70%;
	left:0%;
	text-align:center;

    }

    #title-pr-top{


	font-size:30px;
    }




}




@media (min-width:432px) and (max-width:534px){ 

     .lock-img{
     
	  left:45%;
          top:25%;

	 
     }
     
     .lock-message {
     
	  left:28%;
          top:50%;


     }



    .pr-msg{


	top:-70%;
	left:5%;
	text-align:center;

    }

    #title-pr-top{


	font-size:30px;
    }

}



@media (min-width:534px) and (max-width:640px){
     .lock-img{
     
	  left:48%;
          top:25%;

	 
     }
     
     .lock-message {
     
	  left:35.5%;
          top:53.5%;


     } 

 .pr-msg{



	top:-50%;
	left:9.5%;

    }



}

@media (max-width:750px){

    .project-container{
    
	flex-direction:column;
	border:none;
	height:auto !important;
	border-bottom:2px solid grey;
	border-top:2px solid grey;
    }

    .project-title{
    
	height:100% !important;
    }


    .project-title h2{
	margin:0;
	text-align:center;
	padding:12px;
	flex:5
	
    }

    .project-description{
    
	border:none;
	height:auto !important;
	margin:0 !important;
	padding:15px;
	border-top:2px solid grey;
    }

    .project-links{
	flex-direction:row !important;
	height:auto !important;
	margin:0 !important;
	justify-content:space-evenly;
	padding:15px;

    }

    .pr-links1{

	padding-top:0px;
     }
    .pr-links2{

	padding-bottom:0px;
     }


     .stack-used{
     
	 padding:15px 15px 0px 15px;
	 flex:0.3;
	 align-items:center;
	 gap: 5px;
	 
     }


    
     #pr2 .project-description{
	height:auto;
    }

    #pr2 .project-links .pr-links2{

	margin-bottom:0px;
    }


   


}


@media (min-width:640px) and (max-width:949px){


     .lock-img{
     
	  left:50%;
          top:25%;

	 
     }
     
     .lock-message {
     
	  left:39.7%;
          top:55%;


     }


     .pr-msg{

	top:-50%;
	left:19%;

    }




}