@charset "utf-8";

body,ul,li,h2,h3,p{

	margin:0px;

	padding:0px;

	font-family:'Oswald', sans-serif;

	font-size:1.2rem;

	color:#e3d6c3;

}





* { box-sizing: border-box; }





body{

   

    background-color: #262966;

    background-image: linear-gradient(43deg, #262966 44%, #f54784 100%);

    width:100vw;

    height:3700px;

 



    

}



#container {

    margin:50px auto;

    width:60%;

    height: fit-content;

    display:block;

    position: relative;



}



#CTA{

    position: fixed;

    top:20px;

    left:1vw;

}

#CTA li {

    background-color:#9febf96a; 

    border-radius:6px;

    padding: 10px;

    width:200px;

    margin: 30px;

    list-style-type: none;

    color: #081116;

    text-align: center;

    font-size:1.5rem;

}



#CTA a{

   text-decoration: none;

   

}

   

#CTA a:hover{

   color:#081116;

   text-decoration:underline;

}



/**************flip card***************/



.flip-container { perspective: 1000px; }

	

.flip-container.hover .back {

	transform: rotateY(0deg);

}



.flip-container.hover .front {

    transform: rotateY(180deg);

}



.flip-container, .front, .back {

	width:100%;

    height:auto;

}



.flipper {

	transition: 0.6s;

	transform-style: preserve-3d;



	position: relative;

	height: 0;

	padding-top:100%;

}



.front, .back {

	-webkit-backface-visibility: hidden; /*still needed for safari & android*/

	backface-visibility: hidden;

	transition: 0.6s;

	transform-style: preserve-3d;



	position: absolute;

	top: 0;

	left: 0;

	height: auto;

}



.front { transform: rotateY(0deg); z-index: 2; }



.back {

	transform: rotateY(-180deg);

	padding:0px;

	box-sizing: border-box;

	margin-top:-18px;

}



img {

	display:block;

	margin: 0px;

    width: 100%;

    height:auto;

}