LMartinezEXEX/prueba

1:root {2	--card-bg: white;3	--main-btn-primary: black;4	--main-btn-secundary: white;5}6 7body {8	padding: 1rem;9	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;10	background-image: url("images/background.png");11}12 13p {14	color: rgb(24, 24, 24);15	font-size: 15px;16	margin-bottom: 10px;17	margin-top: 5px;18	text-align: justify;19	line-height: 1.7;20}21 22button {23	border: 0;24	border-radius: 0.25rem;25	font-size: 1rem;26	line-height: 1.2;27	padding: 0.25rem 0.5rem;28	margin: 0.25rem;29	cursor: pointer;30}31 32a.button {33	display: block;34	border: 0;35	border-radius: 0.25rem;36	font-size: 1rem;37	line-height: 1.2;38	padding: 0.25rem 0.5rem;39	margin: 0.25rem;40	cursor: pointer;41	text-decoration: none;42	text-align: center;43	color: black;44}45 46#head-flex-container {47	margin-bottom: 2rem;48	display: flex;49	flex-direction: row;50	flex-wrap: wrap-reverse;51	justify-content: space-between;52	align-items: flex-end;53	gap: 1rem;54}55 56#head-flex-container > #title-container {57	flex-grow: 3;58}59 60#title-container > #name {61	margin: 0;62	font-size: 42px;63}64 65#title-container > #subname {66	margin: 0;67	color: white;68	font-size: 18px;69}70 71#main-buttons-flex-container {72	margin-top: 1.5rem;73	display: flex;74	flex-direction: row;75	flex-wrap: wrap;76	justify-content: space-evenly;77	align-items: baseline;78}79 80#main-buttons-flex-container > .button {81	flex: 1;82	white-space: nowrap;83	min-width: 230px;84}85 86#cards-container {87	padding: 0.5rem 0;88}89 90.card {91	min-width: 230px;92	margin: 1rem auto;93	padding: 16px;94	border: 1px solid var(--card-bg);95	border-radius: 16px;96	background-color: var(--card-bg);97	transition: transform .5s, box-shadow 1s;98}99 100.card:hover {101	transform: scale(1.02) perspective(0px);102	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);103}104 105.card > h3 {106	margin: 0.25rem;107}108 109.card p {110	color: rgb(92, 93, 97);111}112 113.card-description-flex-container {114	display: flex;115	flex-direction: row;116	flex-wrap: wrap;117	justify-content: space-between;118	align-items: flex-start;119	column-gap: 20px;120	min-width: 100%;121}122 123.card-description-flex-container p:first-child {124	flex: 2 1 780px;125}126 127.card-description-flex-container div:nth-child(2) {128	flex: 55 1 0;129}130 131.card-description-flex-container > p {132	display: block;133	text-align: justify;134}135 136.buttons-flex-container {137	display: flex;138	flex-direction: column;139	gap: 7px 5px;140	flex: 1;141    max-width: 500px;142}143 144.divided-buttons-flex-container {145	display: flex;146	flex-direction: row;147	gap: 0 5px;148}149 150.divided-buttons-flex-container > .button {151	flex: 1;152}153 154footer > p {155	color: rgb(136, 138, 142);156	font-size: 10px;157}158 159/* Buttons Styling */160 161button#translate {162	padding: 0.5rem 0.75rem;163	margin: 5px 0 0 0;164	background-color: #58A6FF;165	color: white;166	transition: background-color 0.6s;167}168 169button#translate:hover {170	background-color: #4080c9;171}172 173button#translate > img {174	vertical-align:bottom;175	width: 20px;176}177 178#main-buttons-flex-container > .button {179	padding: 0.5rem 0.75rem;180}181 182#main-buttons-flex-container > .button:hover {183	box-shadow: -7px -7px 20px 0px #fff9,184				-4px -4px 5px 0px #fff9,185				7px 7px 20px 0px #0002,186				4px 4px 5px 0px #0001;187}188 189#main-buttons-flex-container > .button#hf {190	border-radius: 0;191	background-color: var(--main-btn-primary);192	border: 1px solid var(--main-btn-primary);193	color: var(--main-btn-secundary);194	transition: 0.4s;195}196 197#main-buttons-flex-container > .button#ccad {198	border-radius: 0;199	background-color: var(--main-btn-primary);200	border: 1px solid var(--main-btn-primary);201	color: var(--main-btn-secundary);202	transition: 0.4s;203}204 205#main-buttons-flex-container > .button#hf:hover,206#main-buttons-flex-container > .button#ccad:hover {207	background: var(--main-btn-secundary);208	color: var(--main-btn-primary);209	border: none;210}211 212#main-buttons-flex-container > .button#tutorial {213	border-radius: 0;214	background-color: var(--main-btn-secundary);215	border: 1px solid var(--main-btn-primary);216	transition: 0.4s;217}218 219.buttons-flex-container .button.demo {220	border-radius: 0;221	background: linear-gradient(45deg, purple 0%, rgb(242, 202, 242) 60%, white 100%);222	background-size: 200% 200%;223    background-position: right bottom;224	transition: 0.5s;225}226 227.buttons-flex-container .button.demo:hover {228	background-position: left bottom;229	color: white;230}231 232.buttons-flex-container .button.tuto {233	border-radius: 0;234	background: linear-gradient(45deg, green 0%, rgb(189, 223, 189) 60%, white 100%);235	background-size: 200% 200%;236    background-position: right bottom;237	transition: 0.5s;238}239 240.buttons-flex-container .button.tuto:hover {241	background-position: left bottom;242	color: white;243}244 245.buttons-flex-container .button.manual {246	border-radius: 0;247	background: linear-gradient(45deg, orange 0%,rgb(225, 219, 208) 60%, white 100%);248	background-size: 200% 200%;249    background-position: right bottom;250	transition: 0.5s;251}252 253.buttons-flex-container .button.manual:hover {254	background-position: left bottom;255	color: white;256}257 258/* Media queries */259 260@media only screen and (max-width: 769px) {261    button#translate  {262        width: 100%;263    }264}