@charset "UTF-8";
/* CSS Document */

:root {
	--color-main: #CA0100;
	--color-txt: #262626;
	--color-grey-light: #737373;
	--box-shadow: 0px 0px 30px rgba(133, 147, 159, 0.3);
	--swiper-theme-color: #CA0100 !important;
}


.plug{
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.plugin{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 60px;
}
.logo svg{
	width: 500px;
	height: 50px;
	fill: var(--color-txt);
	transition: all 0.3s ease-in-out;
}
.logo:hover svg{
	fill: var(--color-main);
}
.row{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 60px;
	padding: 0 25px 0 0;
}
.txt{
	font-family: "Roboto", sans-serif;
	font-size: 26px;
	font-weight: 300;
	color: var(--color-txt);
}
.txtmini{
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 300;
	color: var(--color-txt);
}
.txtmini span{
	color: var(--color-grey-light);
}
.txtmini a{
	text-decoration: none;
	color: var(--color-txt);
	border-bottom: 1px solid var(--color-txt);
}
.txtmini a svg{
	stroke: var(--color-txt);
}
.txtmini a:hover{
	color: var(--color-main);
	border-bottom: 1px solid var(--color-main);
}
.txtmini a:hover svg{
	stroke: var(--color-main);
}

@keyframes typingnew {
    0% { content: ">_"; }
    10% { content: "> P_"; }
    20% { content: "> Pr_"; }
    30% { content: "> Pri_"; }
    40% { content: "> Prid_"; }
	45% { content: "> Pride_"; }
    50% { content: "> Pride_m_"; }
	60% { content: "> Pride_mo_"; }
    70% { content: "> Pride_mot_"; }
    80% { content: "> Pride_moto_"; }
    90% { content: "> Pride_motor_"; }
    100% { content: "> Pride_motors"; }
}

.code-pride {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    color: var(--color-main);
    font-family: monospace;
    font-size: 16px;
    border-radius: 5px;
	border: 3px solid #e1e1e1;
    position: relative;
}

.code-pride::after {
    content: "";
    animation: typingnew 3s infinite;
}

@media screen and (max-width: 768px) {
    .logo svg{
		width: 300px;
		height: 30px;
	}
	.plugin{
		gap: 30px;
	}
	.txt{
		font-size: 16px;
	}
	.txtmini{
		font-size: 16px;
		padding: 0 30px;
	}
	.code-pride {
    	width: 20px;
    	height: 20px;
    	font-size: 12px;
		border: 2px solid #e1e1e1;
	}
	.row{
		gap: 40px;
		padding: 0 25px 0 0;
	}
}