* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
    min-width: 100%;
    min-height:100%;
    cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1159.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1159.png), auto;
}

.ubuntu-mono-regular {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-mono-bold {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-mono-regular-italic {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-mono-bold-italic {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 700;
  font-style: italic;
}


body {
  margin: 0 auto;
  padding: 0;
  font-family: "Ubuntu Mono", monospace;
  background: #000;
  font-size: 20px;
  line-height: 28px;
  font-weight: lighter;
  letter-spacing: 0.1rem;
  color: #F8F8F2;
  cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1159.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1159.png), default;
}

a:hover, a:active, a:visited {
    cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1161.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1161.png), auto;
}

/* Styling the headings */
h1, h2 {
  font-size: 25px;
  line-height: 30px;
  padding-top: 20px;
  font-weight: bolder;
  text-transform: uppercase;
  color: #0fc0fc;
  
}

h3,
h4, 
h5,
h6 {
    font-size: 18px;
    line-height: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bolder;
    text-transform: uppercase;
    color: #0fc0fc;
}

p {
  color:#0fc0fc;
    margin-bottom: 20px;
}

a {
  color:#0fc0fc;
}

a:link{
    cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1161.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1161.png), auto;

}

strong {
    color: #0fc0fc;
    font-weight: normal;
}

i {
    text-decoration: none;
    border-bottom: 1px dashed;
}

hr {
    margin-top: 28px;
    margin-bottom: 30px;
}

ul {
    margin-top: 10px;
    margin-bottom: 15px;
}

ul li {
    list-style-type: none;
    padding-left: 50px;
}

ul li::before {
    content: ' ';
    color: #F1F275;
    margin-left: -15px;
}


img {
    display: inline-block;
    margin: 0 auto; 
    width: auto;
    max-width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

btn img:hover {
  transform: scale(1.1, 1.1);

}

btn img:active {
   transform: scale(.9, .9);
 
}
button {
    padding: 5px 10px 5px 10px;
    border-radius: 0;
    background-color: #006699;
    border: 1px solid #0fc0fc;
    margin-bottom: 20px;
}

button a:link {
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: uppercase;

}

.profilepic {
    background-color: #1C1E26;
    border: 2px dashed #41E46C;
    display: inline;
    margin-left: 2rem;
    border-radius: 15px; /* Rounded corners */

}

.steckbrief {
    color: #41E46C;
    margin: 2rem;
}

#container {
    height: 100%;
    max-width: 900px;
    margin: 0 auto; /* this centers the entire page */
}

#container a {
    color: #0fc0fc;
    font-weight: bold;
}

#header {
    width: 100%;
    background-color: #282A36;
    /*background-size:contain;*/
    background-repeat: no-repeat;
    height: 150px;
    background-size: 100%;
}


h1.sitetitle {
    padding-top: 60px;
    text-align: center;
    text-transform: lowercase;
    letter-spacing: 10px;
    color: #41E46C;
    font-weight: bold;
    font-size: xx-large;
    text-shadow: 1px 1px 30px #41E46C;
}

h1.sitetitle:hoover {
  text-shadow: 2px 2px 60px #41E46C;
}

h5.subtitle  {
    text-align: center;
    margin: 0;
    letter-spacing: 5px;
    color: #0fc0fc;
    font-weight: bold;
    text-shadow: 1px 1px 10px #0fc0fc;
}

/* navigation section!! */
#navbar {
    height: 40px;
    background-color: #1C1E26;
    width: 100%;
    border-bottom: 3px inset #F8F8F2;
    border-top: 3px inset #F8F8F2;
    padding-bottom: 10px
}

#navbar ol {
    display: flex;
    padding: 0;
    margin: 0;
    overflow:auto;
    justify-content: space-evenly;
    color: #6272A4;
    z-index:100
}

#navbar li {
    padding-top: 10px;
}

/* navigation links*/
#navbar li a {
    color: #41E46C;
    font-weight: 800;
    text-decoration: none;
}

#navbar li a:hover {
    color: #0fc0fc;
    text-decoration: underline;
    cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1161.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1161.png), auto;
}

#flex {
  display: flex;
}

aside {
  background-color: #1C1E26;
  width: 250px;
  padding: 20px;
  font-family: "Ubuntu Monospace", monospace; 
  font-size: smaller;
  border-radius: 15px; 
  white-space: normal;
  word-break: break-word;
  z-index: 50;
  border: 5px ridge #6272A4;

}

aside img {
    max-width: 200px;
    padding: 20px;
    display: block;
}
.icon {
  transform: scale(1.5, 1.5);

}

ul.profile li {
    list-style-type: none;
    color: #fff;
    line-height: 15px;
}

ul.profile li::before {
    content: ' ';
    color: #0fc0fc;
}

ul.likes li {
    list-style-type: none;
    color: #fff;
}

ul.likes li::before {
    content: ' ';
    color: #0fc0fc;
    margin-right: 10px;
}

/* this is the color of the main content area,
between the sidebars! */
main {
  background-color: #282A36;
  flex: 1;
  border-radius: 15px; /* Rounded corners */
  padding: 20px;
  order: 2;
  z-index: 100;
  border: 5px ridge #6272A4;
}

main p {
    margin-top: 20px;
    color: #0fc0fc;
}

main h1 {
  color: #0fc0fc;
}

main a {
  color: #41E46C;
}

main a:hover {
  color: #0fc0fc;
}

#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

#rightSidebar img {
    width: 100px;
    padding: 5px;
    background-color: transparent;
}

section.sidebar-links {
    padding-bottom: 30px;
    padding-top: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid #6272A4;
    cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1161.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1161.png), auto;
   
}

section.sidebar-links img {
    min-width: 150px
}

marquee {
  font-family: Verdana;
  background-color: #000;
  color: #41E46C;
  padding: 5px;
  border-top: 5px inset #6272A4;
  border-bottom: 5px inset #6272A4;
}

/* Footer */
footer {
  background-color: #1C1E26;
  border-top: 1px dashed #F8F8F2;
  width: 100%;
  height: 40px;
  padding: 0;
  text-align: center;
  font-size: smaller;
  color: #6272A4;
}

footer p {
    margin: 0;
}

.box {
    background-color: #1d2d42;
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 15px;
    z-index: 50;
    border: 5px inset #6272A4;

}

.box p {
    line-height: 15px;
    color: #0fc0fc;
}

sub {
    color: #0fc0fc;
    font-size: small;
}

.avatar {
    width: 100%;
    padding: 2.5px;
    background-color: #001530;
    border-radius: 15px; /* Rounded corners */
}

/* CSS for extras */

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: small;
    background-color: #13092D;
}


/* MEDIA QUERY */

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

    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    aside .avatar {
        display:inline;
        padding: 5px;
    }

    /* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }

    #footer {
        height: 80px;
    }

    h1.sitetitle {
        padding-top: 10px;
        background-color: #000;
    }

    h5.subtitle {
        font-size: smaller;
        background-color: #000;
    }

    ol li {
        list-style-type: none;
    }

}



/* HANGAR + iFRAMES */

.sketchfab-embed-wrapper {
    margin-top: 50px;
    margin-bottom: 10px;
}

iframe {
    width: 100%;
    height:100%;
    margin: 0 auto;

}

@font-face {
  font-family: 'Pixeled';
  src: url('Pixeled.ttf') format('truetype');
}

.container > h1 {
  font-family: 'VT323', monospace;
  font-size: 500%;
  text-align: center;
  position: absolute;
  top: 50%;
  /*width: 100%;*/
  z-index: 10;
  color: #74E895;
}


@keyframes shine {
  from {color: white;}
  to {background-color: #0fc0fc;}
}

#oneko,
#cursors {
    z-index: 100000 !important;
}

#cursors {
    position: fixed;
    top: 0;
    left: 0;
}

#cursors span {
    position: absolute;
}

/* Cursors */

.cursor, #selfcursor {
    user-select: none;
    position: absolute;
    transition: 0.1s;
    pointer-events: none;
    z-index: 1000;
}
.cursor img {
    opacity: 0.5;
}