body {
margin: 0;
padding: 0;
}
.top-nav {
padding: 10px 20px;
background-color: #2c2c2c;
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
.navbar img {
width: 50px;
height: 60px;
display: inline-block;
.top-nav ul {
list-style: none;
.top-nav li {
font-size: 14px;
.top-nav ul li:not(:last-child) {
margin-right: 40px;
.top-nav a {
text-decoration: none;
color: #f5f5f5;
transition: color 0.3s ease-in-out;
.top-nav a:hover {
color: #ff6600;
.side-bar {
width: 200px;
height: 100%;
background-color: #f1f1f1;
margin-top: 0;
.side-bar ul {
list-style-type: none;
.side-bar li {
display: block;
color: #000;
padding: 8px 10px;
.side-bar li:hover {
background-color: #555;
color: white;
.side-bar-container {
flex-direction: column;
height: 100vh;
.container {
flex-direction: row;
gap: 20px;
.fsfw-desc {
margin-top: 60px;
#fsfw-content, #sat-rs-content {
justify-content: flex-start;
padding-right: 170px;
padding-left: 170px;
transform: translateY(90px);
#fsfw-links, #sat-rs-links {
.develop a,
.master a,
.links a {
.develop li,
.master li,
.links li {
border: 2px solid #000;
margin: 20px;
padding-left: 0;
padding-right: 0;
width: 160px;
justify-content: center;
line-height: 60px;
transition: color 0.3s;
.develop li:hover,
.master li:hover {
background-color: #00beff;
.develop li {
margin-right: 60px;
#sat-rs-content {
display:none;
#sat-rs-content.hidden {
display: none;
#sat-rs-content.visible {
#fsfw-content.visable {
display:flex;
#fsfw-content.hidden {
display:none