body{
		background: linear-gradient(25deg, rgba(66, 230, 149, 1), rgba(66, 32, 149, 1));
		/*height:100vh;*/	
	}
	

	p{
		margin: 0px;
		padding: 0px;
	}


	.maindiv{
		/*background-color: #87ceeb;*/
		background-color: transparent;
		height: 350px;
		width: 450px;
		position: absolute;
		top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 2px;
	}

/*----------------------------------------------------------*/
/*MENU PORTION*/


	.menusquare{
		height: 50px;
		width: 50px;
		position: absolute;
		z-index: 999;
		background-color: transparent;
		/*box-shadow: 1px 1px 10px black;*/
	}

	.menuicon{
		color: white;
		font-size: 24px;
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.menuright{
		margin-left: 50px;
		top:100px;
		height: 50px;
		width: 400px;
		position: absolute;
		z-index:9 ;
		/*background-color: #ecf0f1;*/
		/*transform-origin:bottom;
		transform: rotateX(-90deg);*/
		text-align: right;
		vertical-align: center;
		line-height: 50px;
		animation: menuright 0.6s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
		/*box-shadow: 0px 10px 50px black;*/
	}

	@keyframes menuright{
		0%{top:100px;}
		100%{top:0px;}
	}

	.menubottom{

		position: absolute;
		margin-top: 175px;
		height: 50px;
		width: 300px;
		left: -25px;
		z-index: 10;
		transform: rotate(-90deg);	
		/*background-color: #ecf0f1;*/
		line-height: 50px;
		animation: menubottom 0.6s;
		animation-delay: 0.5s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}

	@keyframes menubottom{
		0%{left: -25px}
		100%{left: -125px}
	}





/*END OF MENU PORTION*/
/*----------------------------------------------------------*/




/*----------------------------------------------------------*/
/*CARD PORTION*/

	
	.cardcontainer{
		height: 300px;
		width: 400px;
		position: absolute;
		overflow: hidden;
		background-color: #87ceeb ;
		box-shadow: 10px 10px 50px black;
		overflow: hidden;
		margin-left: 50px ;
		margin-top:50px ; 
		z-index: 999;
	}

	.div{
			height: 300px;
			width: 400px;
			background-color: #87ceeb;
			position: absolute;
			z-index:1;
			margin-top: -1000px;
			animation: background1 2s;
			animation-fill-mode: forwards;

	}

	@keyframes background1  {
			0%{margin-top: -1000px;}
			100%{margin-top: 0px;}
	}


	.triangle-0 {
		  width: 500px;
		  height: 200px;
		  background-color: black;
		  transform: rotate(300deg);
		  margin-left: -68%;
		  z-index: 2;
		  position: absolute;
		  box-shadow: 1px 1px 10px black;
		  left: 0px;

	}

	.triangle-1 {
		  width: 500px;
		  height: 500px;
		  transform: rotate(300deg);
		  margin-left: 38%;
		  background-color: black;
		  z-index: 2;
		  position: absolute;
		  box-shadow: 1px 1px 10px black;
		}

	.yellow_d{
		font-family: Roboto;
		position: absolute;
		font-size: 150px;
		z-index: 1;
		color:yellow;
		top: 50%;
        left: 30%;
        background-color: #90ee90;
  		border-radius: 2px;
        transform: translate(-50%, -50%);
        box-shadow: 10px 10px 50px grey;
	}

	.front_text{
		font-family: Roboto;
		position: absolute;
		font-size: 50px;
		z-index: 22;
		color:white;
		top: 60%;
        left: 59%;
        transform: translate(-50%, -50%);

	}

	.righter{
		
		  width: 10px;
		  height: 10px;
		  border-bottom: solid 5px transparent;
		  border-left: solid 5px transparent;
		  border-right: solid 5px white;
		  border-top: solid 5px white;
		  top: 50%;
          left: 80%;
          transform: translate(-50%, -50%);
		  z-index: 22;
		  position: absolute;
	
		}

	.box{
		height: 30px;
 		width: 150px;
 		position: absolute;
 		z-index:22;
 		top: 73%;
        left: 60%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        /*border: 1px solid grey;*/
	}

	.box_back{
		position: absolute;
		height:120px;
		width:150px;
		/*background-color: red;*/
		animation: slideup 5s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
		animation-iteration-count: infinite;

	}

	@keyframes slideup{
		0%{top:0px;}
		10%{top:-30px;}
		20%{top:-30px;}
		30%{top:-30px;}
	
		40%{top:-60px;}
		50%{top: -60px;}
		60%{top: -60px;}
		
		70%{top: -90px;}
		80%{top: -90px;}
		90%{top: -90px;}
		100%{top: -120px;}
	}

	.box_sagment{
		height:30px;
		width: 150px;
		/*background-color: red;*/
		text-align: right;
		color: white;
		font-family: Roboto;	
	}

	.icon{

	}

	.icon:hover{
		font-size: 20px;
	}

	.icon_instagram{
		color: white;
		position: absolute;
		z-index: 22;
		font-size: 15px;
		top: 90%;
		left: 75%;
		transform: translate(-50%, -50%);
	}

	.icon_twitter{
		color: white;
		position: absolute;
		z-index: 22;
		font-size: 15px;
		top: 90%;
		left: 82%;
		transform: translate(-50%, -50%);
	}

	.icon_github{
		color: white;
		position: absolute;
		z-index: 22;
		font-size: 15px;
		top: 90%;
		left: 89%;
		transform: translate(-50%, -50%);
	}

	.icon_circle{
		color: white;
		position: absolute;
		z-index: 22;
		font-size: 5px;
		
		transform: translate(-50%, -50%);
	}
	
	.link{
		text-decoration: none;
		outline: none;
		color: white;
	}

/*END OF CARD PORTION*/
/*-----------------------------------------------------------------------*/


/*MENU CARD PORTION*/
/*-----------------------------------------------------------------------*/
.menucard{
	background-color: black;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 99;
	font-family: Roboto;
	text-align: left;
	color: white;
	padding: 15px;
	display: none;
	
	
}
.aaa{
	
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0 2 50 50'%3E%3Cpath fill='%2300330E' d='M46.125,38.868c-0.192-0.815-0.481-1.618-0.919-2.346c-0.871-1.466-2.199-2.585-3.594-3.489 c-1.409-0.901-2.916-1.624-4.458-2.219c-2.953-1.141-2.81-1.103-4.803-1.814c-4.416-1.574-6.868-3.914-7.022-6.452 c-0.074-1.229,1.126-5.234,6.074-4.282c1.175,0.226,2.287,0.543,3.382,1.037c1.009,0.456,3.954,1.884,4.986,3.917v0 c0.078,0.897,0.394,1.244,1.656,1.84c0.949,0.448,1.907,0.935,1.993,2.039c0.005,0.06,0.051,0.109,0.131,0.121 c0.052,0,0.1-0.031,0.121-0.081c0.182-0.439,0.915-0.989,1.461-0.839c0.063,0.016,0.119-0.009,0.148-0.061 c0.03-0.052,0.02-0.116-0.021-0.158l-0.863-0.854c-0.311-0.31-0.651-0.721-0.939-1.249c-0.078-0.142-0.145-0.282-0.204-0.417 c-0.038-0.094-0.076-0.187-0.114-0.281c-0.724-1.895-2.073-3.925-3.465-5.24c-0.756-0.727-1.588-1.367-2.475-1.913 c-0.891-0.538-1.819-1.016-2.833-1.302l-0.074,0.256c0.947,0.327,1.833,0.849,2.662,1.419c0.828,0.579,1.593,1.243,2.273,1.979 c0.971,1.032,1.736,2.23,2.282,3.512l-1.993-2.477l0.055,0.858l-1.633-1.841l0.101,0.862l-1.586-1.279l0.136,0.584 c-0.357-0.236-3.525-1.496-5.106-2.09s-4.705-3.524-3.804-7.232c0,0-1.477-0.574-2.535-0.965c-1.043-0.376-2.09-0.717-3.14-1.046 c-2.1-0.658-4.212-1.258-6.335-1.818c-2.123-0.557-4.26-1.062-6.409-1.508c-2.15-0.441-4.312-0.834-6.5-1.053L2.722,3.319 C4.875,3.65,7,4.152,9.109,4.701c2.108,0.555,4.202,1.166,6.279,1.829c2.076,0.665,4.139,1.37,6.177,2.128 c1.018,0.379,2.033,0.769,3.027,1.188c0.211,0.088,0.426,0.18,0.641,0.272c-1.224-0.241-2.448-0.432-3.673-0.591 c-2.211-0.281-4.424-0.458-6.639-0.558c-2.214-0.1-4.43-0.116-6.642-0.034C6.068,9.021,3.856,9.194,1.674,9.568l0.043,0.304 c2.18-0.224,4.375-0.246,6.563-0.183c2.189,0.067,4.374,0.231,6.547,0.477c2.172,0.246,4.335,0.567,6.469,0.986 c1.316,0.261,2.624,0.564,3.903,0.921c-1.011-0.101-2.017-0.127-3.014-0.115c-1.977,0.03-3.926,0.247-5.848,0.574 c-1.922,0.33-3.818,0.773-5.675,1.346c-1.851,0.579-3.681,1.267-5.361,2.249l0.116,0.208c1.72-0.828,3.568-1.358,5.426-1.779 c1.862-0.414,3.751-0.698,5.644-0.868c1.891-0.168,3.792-0.224,5.663-0.101c1.664,0.11,3.317,0.363,4.83,0.849c0,0,0,0,0,0 c0.065,0.445,0.366,1.346,0.511,1.796c0,0,0,0,0,0c-4.255,1.957-4.794,5.477-4.446,7.365c0.409,2.214,2.011,3.902,3.904,4.995 c1.567,0.891,3.168,1.459,4.726,2.047c1.555,0.583,3.095,1.143,4.467,1.918c1.352,0.747,2.476,1.901,3.391,3.21 c1.837,2.638,2.572,5.964,2.792,9.245l0.365-0.01c0.008-3.323-0.47-6.802-2.252-9.812c-0.588-0.986-1.314-1.921-2.171-2.733 c0.992,0.384,1.961,0.818,2.887,1.333c1.373,0.779,2.667,1.749,3.548,3.051c0.444,0.647,0.755,1.375,0.983,2.133 c0.202,0.767,0.295,1.565,0.329,2.371h0.312C46.337,40.522,46.291,39.69,46.125,38.868z'%3E%3C/path%3E%3C/svg%3E%0A");
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	
}

/*-----------------------------------------------------------------------*/

<!--<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 3 60 65"><path fill="#78909c" d="M46.125,38.868c-0.192-0.815-0.481-1.618-0.919-2.346c-0.871-1.466-2.199-2.585-3.594-3.489 c-1.409-0.901-2.916-1.624-4.458-2.219c-2.953-1.141-2.81-1.103-4.803-1.814c-4.416-1.574-6.868-3.914-7.022-6.452 c-0.074-1.229,1.126-5.234,6.074-4.282c1.175,0.226,2.287,0.543,3.382,1.037c1.009,0.456,3.954,1.884,4.986,3.917v0 c0.078,0.897,0.394,1.244,1.656,1.84c0.949,0.448,1.907,0.935,1.993,2.039c0.005,0.06,0.051,0.109,0.131,0.121 c0.052,0,0.1-0.031,0.121-0.081c0.182-0.439,0.915-0.989,1.461-0.839c0.063,0.016,0.119-0.009,0.148-0.061 c0.03-0.052,0.02-0.116-0.021-0.158l-0.863-0.854c-0.311-0.31-0.651-0.721-0.939-1.249c-0.078-0.142-0.145-0.282-0.204-0.417 c-0.038-0.094-0.076-0.187-0.114-0.281c-0.724-1.895-2.073-3.925-3.465-5.24c-0.756-0.727-1.588-1.367-2.475-1.913 c-0.891-0.538-1.819-1.016-2.833-1.302l-0.074,0.256c0.947,0.327,1.833,0.849,2.662,1.419c0.828,0.579,1.593,1.243,2.273,1.979 c0.971,1.032,1.736,2.23,2.282,3.512l-1.993-2.477l0.055,0.858l-1.633-1.841l0.101,0.862l-1.586-1.279l0.136,0.584 c-0.357-0.236-3.525-1.496-5.106-2.09s-4.705-3.524-3.804-7.232c0,0-1.477-0.574-2.535-0.965c-1.043-0.376-2.09-0.717-3.14-1.046 c-2.1-0.658-4.212-1.258-6.335-1.818c-2.123-0.557-4.26-1.062-6.409-1.508c-2.15-0.441-4.312-0.834-6.5-1.053L2.722,3.319 C4.875,3.65,7,4.152,9.109,4.701c2.108,0.555,4.202,1.166,6.279,1.829c2.076,0.665,4.139,1.37,6.177,2.128 c1.018,0.379,2.033,0.769,3.027,1.188c0.211,0.088,0.426,0.18,0.641,0.272c-1.224-0.241-2.448-0.432-3.673-0.591 c-2.211-0.281-4.424-0.458-6.639-0.558c-2.214-0.1-4.43-0.116-6.642-0.034C6.068,9.021,3.856,9.194,1.674,9.568l0.043,0.304 c2.18-0.224,4.375-0.246,6.563-0.183c2.189,0.067,4.374,0.231,6.547,0.477c2.172,0.246,4.335,0.567,6.469,0.986 c1.316,0.261,2.624,0.564,3.903,0.921c-1.011-0.101-2.017-0.127-3.014-0.115c-1.977,0.03-3.926,0.247-5.848,0.574 c-1.922,0.33-3.818,0.773-5.675,1.346c-1.851,0.579-3.681,1.267-5.361,2.249l0.116,0.208c1.72-0.828,3.568-1.358,5.426-1.779 c1.862-0.414,3.751-0.698,5.644-0.868c1.891-0.168,3.792-0.224,5.663-0.101c1.664,0.11,3.317,0.363,4.83,0.849c0,0,0,0,0,0 c0.065,0.445,0.366,1.346,0.511,1.796c0,0,0,0,0,0c-4.255,1.957-4.794,5.477-4.446,7.365c0.409,2.214,2.011,3.902,3.904,4.995 c1.567,0.891,3.168,1.459,4.726,2.047c1.555,0.583,3.095,1.143,4.467,1.918c1.352,0.747,2.476,1.901,3.391,3.21 c1.837,2.638,2.572,5.964,2.792,9.245l0.365-0.01c0.008-3.323-0.47-6.802-2.252-9.812c-0.588-0.986-1.314-1.921-2.171-2.733 c0.992,0.384,1.961,0.818,2.887,1.333c1.373,0.779,2.667,1.749,3.548,3.051c0.444,0.647,0.755,1.375,0.983,2.133 c0.202,0.767,0.295,1.565,0.329,2.371h0.312C46.337,40.522,46.291,39.69,46.125,38.868z"></path></svg>-->
<!--https://yoksel.github.io/url-encoder/#:~:text=We%20can%20use%20SVG%20in,it%20will%20be%20added%20automagically.-->
/*END OF MENU CARD PORTION*/