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

h1{

    font-family:"Press Start 2P", system-ui;
    color: black;
    margin-right:auto !important;
    margin-left:auto !important;

}



.row{
    display:flex;
    flex-direction:row;
    margin-top:30px;
    max-width:900px;
    width:100%;
}

.card{
    display:flex;
    flex-direction:column;
    margin-right:10px;
    transition: background-color 0.2s , color 0.2s ;
    border-left : 2px solid grey;
    max-width:450px;
    width:100%;
}

.card:hover{
    box-shadow : 3px 3px 3px grey , 
		 -3px -3px 3px grey , 
		 3px -3px 3px grey , 
		 -3px 3px 3px grey ; 

    background-color : #1C2635;
    color :#E3D9CA  ;
}

.stack-title{
    padding: 5px 0px 3px 5px;
    border-bottom:2px solid grey;
    font-weight:900;
    width:99%;
}

.stack-content{
    width:100%;
}

.card p {
    font-size :14px;
    display: flex;
    flex-direction:row;
    align-items:center;
    padding : 5px;
}



p i {
    font-size:20px;
    margin-right : 7px;
}
.locked{
    height:14px;
    margin-left :6px;
    margin-top:-1px;
}
.english-icon{
    height:20px;
    margin-right : 7px;
    font-size:20px;
}



@media (max-width:440px){


    .row{
    
	flex-direction:column;
	margin-bottom:-30px !important;
    }


     h1{
    
	font-size:30px !important;
    }

    .card{
    
	margin-bottom:30px;
    }

    .stack-title{
	width:98.5%;
    }

   
}