/* style.css

Enhält Styles für die Website.

tagname: Style wird für alle tags angewendet, z.b. h1
.classname: Style wird für alle tags mit der Klasse classname angewendet, z.b. .title
#id: Style wird für das tag mit der id "id" angewendet, z.b. #title

*/

 /* kopiert von https://www.geometrydash.com/mainstyle.css um ein BG desing zu haben. */
 body {
     background: linear-gradient(to bottom, #0288D1, #003456);
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
     min-height: 100%;
     font-family: Arial, sans-serif;
     color: white;
 }

 /* formatiert den titel auf der seite */
 #title {
     font-size: 3em;
     font-weight: bold;
 }


 /* navbar */
 * {
     box-sizing: border-box;
 }

 .menu-toggle {
     display: none;
 }

 .burger {
     position: fixed;
     top: 20px;
     left: 20px;
     z-index: 1001;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 30px;
     height: 22px;
     cursor: pointer;
 }

 .burger span {
     display: block;
     height: 4px;
     background: #111;
     border-radius: 2px;
     transition: 0.3s ease;
 }

 .sidebar {
     position: fixed;
     top: 0;
     left: 0;
     width: 260px;
     height: 100vh;
     background: #111;
     padding-top: 80px;
     transform: translateX(-100%);
     transition: transform 0.3s ease;
     z-index: 1000;
 }

 .sidebar a {
     display: block;
     padding: 16px 24px;
     color: white;
     text-decoration: none;
     border-bottom: 1px solid #222;
 }

 .sidebar a:hover {
     background: #222;
 }

  .sidebar a:visited {
     color: white;
 }

 .overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.4);
     opacity: 0;
     visibility: hidden;
     transition: 0.3s ease;
     z-index: 999;
 }

 .menu-toggle:checked+.burger span:nth-child(1) {
     transform: translateY(9px) rotate(45deg);
     background: white;
 }

 .menu-toggle:checked+.burger span:nth-child(2) {
     opacity: 0;
 }

 .menu-toggle:checked+.burger span:nth-child(3) {
     transform: translateY(-9px) rotate(-45deg);
     background: white;
 }

 .menu-toggle:checked~.sidebar {
     transform: translateX(0);
 }

 .menu-toggle:checked~.overlay {
     opacity: 1;
     visibility: visible;
 }

 .content {
     padding: 67px 67px 67px;
 }

 a {
     color: #dc6464;
     text-decoration: none;
 }

 a:visited {
     color: #e11b1b;
 }