:root {
    --header-image: '../images/michaelk_logo_header.jpg';
    --body-bg-image: '../images/stars_background.gif';

    /* colors */
    --content: #43256E;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    background-color: #333333;
    background-size: 65px;
    color: #ff1987;
    background-image: url( '../images/stars_background.gif' );
}

* {
    box-sizing: border-box;
}
           
#header {
    width: 100%;
    background-color: #5e4e8c;
    height: 250px;
    /* this is only for a background image! */
    background: url( '../images/michaelk_logo_header.jpg' ) no-repeat center;
    background-size: 100%;
}

/* navigation styles */
#navbar {
    height: 40px;
    background-color: #13092D;
    /* navbar color */
    width: 100%;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

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

/* navigation links*/
#navbar li a {
    color: #21d6ff;
    /* navbar text color */
    font-weight: bolder;
    text-decoration: none;
    /* this removes the underline */
}

#navbar li a:hover {
    color: #a49cba;
    font-weight: bold;
    text-decoration: underline;
}

#flex {
    display: flex;
}

aside {
    background-color: #241445;
    width: 200px;
    padding: 20px;
    font-size: smaller;
    /* this makes the sidebar text slightly smaller */
}

main {
    background-color: #241445;
    flex: 1;
    padding: 20px;
    order: 2;
}

#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

footer {
    background-color: #13092D;
    width: 100%;
    height: 56px;
    padding: 10px;
    text-align: center;
}

.footer-icon {
    margin-left: 10px;
    margin-right: 10px;
    height: 100%;
}

h1,
h2,
h3 {
    color: #ff1987;
}

h1 {
    font-size: 25px;
}

strong {
    /* this styles bold text */
    color: #ED64F5;
}

.klabot-command-header {
    padding-top: 10px;
}

.klabot-command {
    color: #21d6ff;
    font-weight: bolder;
}

.klabot-command-description {
    padding-bottom: 10px;
}

.klabot-command-subtext {
    font-size: 0.9em; /* Adjust the size as needed */
    font-style: italic;
}

.code {
    font-family: monospace;
    background-color: #000000;
    padding: 10px;
    border: 1px solid #ccc;
    display: block;
    overflow-x: auto;
    white-space: pre-wrap;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* floating box styles */
.box {
    background-color: #13092D;
    border: 1px solid #ff1987;
    padding: 25px;
    margin-bottom: 20px;
}

/* Icon styles */
.link-icon {
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.subscribe-icon {
    margin-left: 5px;
    margin-top: 7px;
    height: 100%;
}

.section-header {
    display: flex;
    align-items: center;
}

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

.divider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-bottom: 20px;
}


/* YouTube embed scaling */
.youtube-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-bottom: 25px;
}

/* Then style the iframe to fit in the container div with full height and width */
.youtube-video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* Link List page image */
.link-list-youtube-video {
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    right: 20px;
    width: 100%;
    height: 100%;
}

.link-list-header-img-container {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.link-list-header-img-container img {
    max-width: 100%;
    height: auto;
}

/* Link List page divs */
.link-list-container {
    display: flex;
    flex-wrap: wrap;
}

.link-list-box {
    flex: 1 1 auto;
    box-sizing: border-box;
}

.link-list-left {
    width: 50%;
}

.link-list-right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Link List */
.link-list {
    list-style: none; /* Remove default bullets */
    width: 100%;
    padding: 0 20px;
    margin: 0;
}

.link-list li {
    display: block;
    padding: 0px;
    margin-bottom: 10px;
    border: 1px solid #ff1987; /* Hot pink outline */
    border-radius: 5px;
    background-color: #13092D;
    text-align: center;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

.link-list li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none !important;
    width: 100%;
    height: 100%;
}

.link-list li:hover a {
    text-decoration: none !important;
    background-color: #ff1987;
}

/* Floating Avatar divs */
.avatar-container {
  display: flex;
  flex-wrap: wrap;
}

.avatar-box {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 20px;
}

.avatar-left {
    width: 50%;
}

.avatar-right {
    width: 50%;
}

.avatar {
    max-width: 100%;
}

.about-text {
    display: block;
}


/* Floating Social Media divs */
.social-container {
  display: flex;
  flex-wrap: wrap;
}

.social-box {
  flex: 1 1 auto;
  box-sizing: border-box;
}

.social-left {
    width: 50%;
}

.social-right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* Floating Music divs */
.my-music-container {
  display: flex;
  flex-wrap: wrap;
}

.my-music-box {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 20px;
}

.my-music-left {
    width: 30%;
}

.my-music-center {
    width: 30%;
}

.my-music-right {
    width: 30%;
}

.my-music-spacer {
    width: 33%;
}

.my-music-artist {
    max-width: 100%;
}


/* Container Styles */
#container {
    max-width: 900px;
    margin: 0 auto;
}

#container a {
    color: #21d6ff;
    font-weight: bolder;
    text-decoration: none;
}

#container a:hover {
    color: #a49cba;
    font-weight: bold;
    text-decoration: underline;
}


/*
    The "max-width" value below should always be overall
    width (currently 900px) subtracted by 100 to keep
    the layout responsive.
*/
@media only screen and (max-width: 800px) {
    #flex {
        flex-wrap: wrap;
    }

    .social-box {
        flex-basis: 100%;
    }

    .avatar-box {
        flex-basis: 100%;
    }

    .my-music-box {
        flex-basis: 100%;
    }

    .link-list-box {
        flex-basis: 100%;
    }

    aside {
        width: 100%;
    }

    /*
        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;
    }
}