@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Mono:wght@400;700&display=swap');

/* Shared */
* {
    font-family: 'Space Mono', monospace;
    color: rgb(173, 173, 173);
}

body {
	background-image: url("chad.png");
	text-align: center;
	margin: 0;
}

.title {
	font-family: 'Major Mono Display', monospace;
	font-size: 9vh;
}

.subtitle {
	font-weight: 400;
    font-size: 2.5vh;

}

nav {
	font-size: 4vh;
	padding: 3vh;
}

#main {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#header {
	height: 30%;
}


/* Index.html unique */
#content-i {
	height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
	margin-right: 5%;
	margin-left: 5%;
}


/* Softwares.html unique */
#content-s {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
	width: 80%;
	margin: 0 auto;

}

.otherimg {
    object-fit: scale-down;
    height: 200px;
    max-width: 100%;
    max-height: 200px;
}


@media screen and (max-width: 768px) {
    #content-s {
        grid-template-columns: 1fr;
    }

	.title {
		font-size: 6vh;
		word-wrap: break-word;
	}
}


/* Network.html unique */
#content-n {
	display: flex;
	flex: 1;
	align-self: center;
	justify-content: center;
	align-items: center;
	width: 70%;
	gap: 2%;
}

#rack {
	width:55%;
}

#netlist {
	font-size: 2.5vh;
	width: 45%;
}

#networkimg {
    width: 90%;
}

@media screen and (max-width: 768px) {
    #content-n {
        flex-direction: column;
		width: 100%;
    }
	#rack {
		width:100%;
	}
	#netlist {
		width:100%;
	}
	.title {
		font-size: 6vh;
		word-wrap: break-word;
	}
}