.main-container  h1{


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

}
.main-container p{

    line-height:1.6;
}

#ak-title{

    margin-top:-23px !important;
}

#fs-title{

    margin-top:30px;
}

.timeline{

    position:relative;
    max-width:900px;
    width:100%;
    display:flex;
    flex-direction:column;
    opacity: 0;

    animation: appear 1s linear forwards;
    animation-timeline: view();
    animation-range: entry;

}

.timeline-row{

    display:flex;
    flex-direction:row;



}


.timeline-content {

    flex:1;
    margin:30px;
    padding:30px;
    position:relative;
}

.timeline-content {
    transition: transform .3s ease , background-color 0.2s , color 0.2s;
}

.timeline-content:hover {
    transform: translateY(-5px);
}


.full{


    border:grey 2px solid;
    border-radius:12px;
   
}

.full:hover{

    background-color: #1C2635;
    color: #E3D9CA;
        box-shadow : 3px 3px 3px grey , 
		 -3px -3px 3px grey , 
		 3px -3px 3px grey , 
		 -3px 3px 3px grey ; 



}




.timeline-content h3{

    padding:5px 5px 5px 5px;
    border:solid 1px grey;
    border-radius:10px;
    width:fit-content;
    margin-top:5px;
    margin-bottom:10px;
}


.vertical-line{

    position:absolute;
    background:grey;
    left:50%;
    width:4px;
    height:100%;
    border-radius:10px;

}


.horizontal-line{

    position:absolute;

}

.odd {

    right:-25px;

    top:14px;
}

.even{

    left:-20px;

}

.odd img{

    width:23px;
}

.even img{

    width:20px;
}

.dot {

    position:absolute;
}


.odd-dot {

    right:-40px;
    top:13px;
    background:#E3D9CA; 

    padding-top:3px;
    padding-bottom:2px;
}


.even-dot{

    left:-36px;
    top:28px;
    background:#E3D9CA; 

    padding-top:3px;
    padding-bottom:2px;

}


.temp{

    display:none;
}


@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}






@media (max-width:612px){

    .timeline-row{
    
	display:flex;
        flex-direction:column;


    }


    .full{

	flex:1;

    }
    .empty{
    
	display:none;
	
    }


    .vertical-line{
    
	left:0px;
    }

    .even-dot {

	left:-38px;
	top:29px;
	background:#E3D9CA; 

	padding-top:3px;
	padding-bottom:2px;

    }
    .even img {
    
	width:23px;

    }

    .even{
    
	left:-23px;

    }

    .odd , .odd-dot{
	display:none;
    }


    .temp{
    
	display:block
    }


    #ak-title{

	font-size:25px;
	margin-top:5px !important;
    }

    #fs-title{

	font-size:30px;
    }

    


}