output.css

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  background-color: #22344E;
  color: #fff;
  overflow-x: hidden;
}

.test{
    font-size: 69px;
}

.bog{
    font-family: 'Courier New', Courier, monospace;
}

.bog-2{
    font-weight: 400;
}

.test-2{
    font-size: 44px;
}

.p-40\%{
    padding: 40%;
}

.p-50\%{
    padding: 50%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/************* Inserted from input file /Users/patrick.tannoury/Documents/Private_Coding/style/input.css [Above] *************/
.group_2{
    color: aliceblue;
}

@keyframes test {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

div:hover > .my-10.hover\:\[div\ >\]\:color-\[\#fff\]{
    color: green !important;
}

.group:hover .\(div\:hover\_\>\)\:py\-20{
	color: #fff;
}

.confirmed[style-dark="(&.confirmed):color-[green] (&.confirmed):brd-color-[green] py-20"]{
    color: green;
}
/************* Inserted from input file /Users/patrick.tannoury/Documents/Private_Coding/style/input2.css [Above] *************/
.text-center{
	text-align: center;
}
.fs-60{
	font-size: 60px;
}
.mt-40{
	margin-top: 40px;
}
.hover\:cursor-pointer:hover{
	cursor: pointer;
}
.gap\-\[406px\]{
	gap: 406px;
}
.brd\-color\-\[\#f4f4f4\]{
	border-color: #f4f4f4;
}
.hover\:bg\-\[\#fff\]:hover{
	background-color: #fff;
}
.bg\-\[\#000\]{
	background-color: #000;
}
.not\-\[strong\]\:fw-800:not(strong){
	font-weight: 800;
}
.p-60{
	padding: 60px;
}
.bg\-\[\#123123\]{
	background-color: #123123;
}
.h\-\[max\(60vh\,800px\)\]{
	height: max(60vh,800px);
}
.w-100{
	width: 100px !important;
}
.h-100{
	height: 100px !important;
}
.mt-60{
	margin-top: 60px;
}
.ml-60{
	margin-left: 60px;
}
.flex-col{
	display: flex;
	flex-direction: column;
}
.hover\:bg\-\[\#101010\]:hover{
	background-color: #101010;
}
.p-40{
	padding: 40px;
}
.my-10{
	margin-top: 10px;
	margin-bottom: 10px;
}
.py-20{
	padding-top: 20px;
	padding-bottom: 20px;
}
.absolute{
	position: absolute;
}
.bottom\-\[calc\(100vh\_\-\_10\%\)\]{
	bottom: calc(100vh - 10%);
}
.bg\-\[\#f4f4f4\]{
	background-color: #f4f4f4;
}
.h\-\[20vw\]{
	height: 20vw;
}
.w\-\[20vw\]{
	width: 20vw;
}
.bg\-\[url\(https\:\/\/encrypted\-tbn0\.gstatic\.com\/images\?q\=tbn\:ANd9GcTRfXv9FjRI6Z\_Ap9ZjvdFdYId5Qs9MSeqbxPQk0XfCoBKnS9KHEr8U6PQu\_IVZW7b1CcA\&usqp\=CAU\)\]{
	background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRfXv9FjRI6Z_Ap9ZjvdFdYId5Qs9MSeqbxPQk0XfCoBKnS9KHEr8U6PQu_IVZW7b1CcA&usqp=CAU);
}
.bg-cover{
	background-size: cover;
}
.grid{
	display: grid;
}
.gap-10{
	gap: 10px;
}
.grid\-cols\-\[repeat\(3\,1fr\)\]{
	grid-template-columns: repeat(3,1fr);
}
.mb-40{
	margin-bottom: 40px;
}
.color\-\[\$green\]{
	color: #0ce42c;
}
.hover\:py-20:hover{
	padding-top: 20px;
	padding-bottom: 20px;
}
.mr-20{
	margin-right: 20px;
}
.flex-row{
	display: flex;
	flex-direction: row;
}
.ml-10{
	margin-left: 10px;
}
.py-69{
	padding-top: 69px;
	padding-bottom: 69px;
}
.opacity-80{
	opacity: 0.8;
}
.selection\:\:cursor-pointer::selection{
	cursor: pointer;
}
.hover\:bg\-\[\#000\]:hover{
	background-color: #000;
}
div:hover > .\(div\:hover\_\>\)\:color\-\[\#090909\]{
	color: #090909;
}
div:hover > .\(div\:hover\_\>\)\:py\-20{
	padding-top: 20px;
	padding-bottom: 20px;
}
.group:hover .\(\.group\:hover\)\:color\-\[\#fff\]{
	color: #fff;
}
.confirmed.\(\&\.confirmed\)\:color\-\[green\]{
	color: green;
}
.not-confirmed.\(\&\.not\-confirmed\)\:color\-\[red\]{
	color: red;
}

dark.dark, body.dark {
	[style-dark="not-[.fs-60]:fs-40"]:not(.fs-60) {
		font-size: 40px;
	}
	[style-dark="hover:cursor-pointer hover:color-[#f4f4f4] hover:cursor-pointer checked:color-[#49e31b]"]:hover {
		cursor: pointer;
		color: #f4f4f4;
	}
	[style-dark="hover:cursor-pointer hover:color-[#f4f4f4] hover:cursor-pointer checked:color-[#49e31b]"]:checked {
		color: #49e31b;
	}
	[style-dark="color-[#fff] hover:color-[#f4f4f4] hover:cursor-pointer"]:hover {
		color: #f4f4f4;
		cursor: pointer;
	}
	[style-dark="color-[#fff] hover:color-[#f4f4f4] hover:cursor-pointer"] {
		color: #fff;
	}
	[style-dark="color-[#fff]"] {
		color: #fff;
	}
	.group:hover [style-dark="(.group:hover):color-[blue]"] {
		color: blue;
	}
	[style-dark="(&.confirmed):color-[green] (&.confirmed):brd-color-[green] py-20"] {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.confirmed[style-dark="(&.confirmed):color-[green] (&.confirmed):brd-color-[green] py-20"] {
		color: green;
		border-color: green;
	}
}

light.light, body.light {
	[style-light="color-[#000]"] {
		color: #000;
	}
}

/************* style-sd *************/
@media screen and (max-width: 600px){
	[style-sd="w-100 h-40 not-[.py-20]:py-40"]:not(.py-20){
		padding-top: 40px;
		padding-bottom: 40px;
	}
	[style-sd="w-100 h-40 not-[.py-20]:py-40"]{
		width: 100px !important;
		height: 40px !important;
	}
	[style-sd="hover:py-10 mr-20 color-[#f4f4f4]"]:hover{
		padding-top: 10px;
		padding-bottom: 10px;
	}
	[style-sd="hover:py-10 mr-20 color-[#f4f4f4]"]{
		margin-right: 20px;
		color: #f4f4f4;
	}
}

/************* style-md *************/
@media screen and (min-width: 600px) and (max-width: 1200px){
	[style-md="w-[min(calc(80vw),calc(90%_-_32px))]"]{
		width: min(calc(80vw),calc(90% - 32px));
	}
	.confirmed[style-md="(&.confirmed):color-[green]"]{
		color: green;
	}
	[style-md="hover:py-20 mr-40 hover:cursor-pointer hover:color-[#acacac]"]:hover{
		padding-top: 20px;
		padding-bottom: 20px;
		cursor: pointer;
		color: #acacac;
	}
	[style-md="hover:py-20 mr-40 hover:cursor-pointer hover:color-[#acacac]"]{
		margin-right: 40px;
	}
}

/************* style-ld *************/
@media screen and (min-width: 1200px){
	[style-ld="nth-child-[3n]:fw-500 test"]:nth-child(3n){
		font-weight: 500;
	}
	[style-ld="nth-child-[2n]:color-[#565656] not-[:first-child]:mx-[5vw] test"]:nth-child(2n){
		color: #565656;
	}
	[style-ld="nth-child-[n+2]:color-[#565656] nth-child-[2n]:mx-[5vw] test"]:nth-child(n+2){
		color: #565656;
	}
	[style-ld="nth-child-[n+2]:color-[#565656] nth-child-[2n]:mx-[5vw] test"]:nth-child(2n){
		margin-left: 5vw;
margin-right: 5vw;
	}
	.confirmed:hover > [style-ld="(.confirmed:hover_>):cursor-pointer"]{
		cursor: pointer;
	}
	[style-ld="max-w-100"]{
		max-width: 100px;
	}
}