sor-it-web/src/resources/style.css

body {
  margin: auto;
	border: none;

  text-align: center;

	min-height: calc(100% - 200px);
  max-width: 1280px;

  color: #4b423c;
  background-color: #e9e8e9;

  font-family: "din", -apple-system, system, sans-serif;
  font-size: 0.8em;
	font-weight: 200;

  line-height: 1.6;
}

a {
  text-decoration: none;
  color: #4b423c;
}

.sleeping {
  display: none;
}

/* <--- Header ---> */

header{
  text-decoration: none;
  text-transform: uppercase;
  line-height: 60px;
}

.topBar{
	display: flex;
  flex-direction: row;
}

ul.shapeShiftBar li{
  line-height: 60px;
  display: inline-block;
  position: relative;
  padding-left: 2em;
  padding-right: 2em;
}

ul.shapeShiftBar li:hover{
  background-color:#FFA500;
  color:#fff;
  transform: scale(1.1);
}

ul.shapeShiftBar li:hover > a{
  color:#fff;
}

.dropdownContent{
  display: none;
  position:absolute;
  left: 0px;
}

.dropdownContent li{
  background-color:#FFA500;
  width: 100%;  
}

.dropdown:hover .dropdownContent {
  display: block;
}

.mobileBar {
  display: none;
  line-height: 60px;
  position: relative;
  padding: 2em;
}

ul.mobileBar li:hover > a{
  color:#fff;
}

/* <--- Headlines ---> */

h1 {
  font-size: 1.9em;
  margin: auto;
}

h2 {
  border-bottom: 1px dashed;
  font-size: 1.7em;
  margin: 2% 0 0 0;
}

h3 {
  font-size: 1.2em;
  margin: 2% 0 2% 0;
}

/* <--- Unordered List, List items ---> */

ul {
  line-height: 1.6em;
  list-style: none;
  text-align: left;
  padding: 0;
}


/* <--- Main Wrap ---> */

.mainContent {
  float: left;
  margin: 2% 0 2% 0;
  width: 64%;
  text-align: left;
  font-size: medium;
  padding: 2%;
}


aside {
  float: right;
  width: 28%;
  margin: 2% 0 2% 0;
  text-align: left;
  font-size: medium;
  padding: 2%;
}

/* <--- Footer ---> */

footer {
  line-height: 1.2em;
  clear: both;
}

.bottomBar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bottomNav{
  border-left: 1px solid #4b423c;
  padding-left: 40px;
}

.pri{
  padding-right: 40px;
}


 /* <--- Misc ---> */

a[href^="mailto"] {
  text-transform: lowercase;
}

.bottomLink{
  text-transform: uppercase;
}

.bottomLink:hover{
  color: #FFA500;
}

 /* <--- Show logo ---> */

.card .img-top {
  display: none;
}
.card:hover .img-top {
  display: inline;
}

.card:hover .img-bot {
  display: none;
}

 /* <--- Spin logo ---> */

@media (prefers-reduced-motion: no-preference) {
  .SpinLogo:hover {
    animation: SpinLogo-spin infinite 20s linear;
  }
}

@keyframes SpinLogo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



 /* <--- Responsive ---> */

@media only screen and (max-width: 830px) {

  .mainContent{
    width: 96%;
  }

  aside {
    width: 96%;
    float: left;
  } 

  .shapeShiftBar {display: none;}
  .pri {display: none;}
  .logoCuni {display: none;}

  .topBar {justify-content: space-between;}
  .mobileBar {display: inline-block;}


  .dropdownContent{
  display: none;
  position: fixed;
  width: 100%;
  line-height: 60px;
  text-align: center;
  }

  .dropdownContent li{
  background-color:#FFA500;
  width: 100%;  
  }

  .sleeping {
    display: block;
  }

  .SpinLogo {
    padding: 20px;
  }
}

@media print {
  .mainContent {background-color: transparent; padding: 0; margin: 0; width: 96%;}
  .topNavBar {display: none;}
  aside {display:none;}
  .bottomBar {display: none;}
}