/*
    Enjoy the pleasure of looking at my incredibly messy stylesheet!
    This is the cleaned up version too, I used to have 2 stylesheets for light and dark mode.
 */

* {
    /*box-sizing: border-box; */
    font-family: "Microsoft Sans Serif", Arial, Helvetica, sans-serif;
    line-height: 1.6;
  }

@font-face {
  font-family: "Microsoft Sans Serif";
  src: url("/fonts/mssans.woff") format("woff"),
       url("/fonts/mssans.woff2") format("woff2"),
       url("/fonts/mssans.ttf") format("truetype");
       font-weight: normal;
       font-style: normal;
       font-display: swap;
}

@font-face {
  font-family: "Microsoft Sans Serif Bold";
  src: url("/fonts/mssansbold.woff") format("woff"),
       url("/fonts/mssansbold.woff2") format("woff2"),
       url("/fonts/mssansbold.ttf") format("truetype");
       font-weight: normal;
       font-style: normal;
       font-display: swap;
}

  body {
    margin: 0;
    font-family: "Microsoft Sans Serif", Arial, Helvetica, sans-serif;
  }
  
  h1 {
    text-align: center;
    color: #f5a9b8;
  }
  
  :root .topnav{
    overflow: hidden;
    border-width: 3px;
    border-style: solid;
    padding-top: -2px;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  [data-theme="light"] .topnav {
    background-color: #c3c3c3;
    /* Firefox is stupid and has weird inset and outset border colours, so i have to do this instead :/ */
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-right-color: #818181;
    border-bottom-color: #818181;
  }

  [data-theme="dark"] .topnav {
    background-color: #414141;
    border-top-color: #5c5c5c;
    border-left-color: #5c5c5c;
    border-right-color: black;
    border-bottom-color: black;
  }

  :root .navButton{
    border-width: 3px;
    border-style: solid;
    width: 236px;
    height: 44px;
    overflow: hidden;
  }
  [data-theme="light"] .navButton {
    background-color: #c3c3c3;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-right-color: #2a2a2a;
    border-bottom-color: #2a2a2a;
  }
    [data-theme="dark"] .navButton {
    background-color: #414141;
    border-top-color: #5c5c5c;
    border-left-color: #5c5c5c;
    border-right-color: black;
    border-bottom-color:black;
  }
  
  
/* This seems like an unnecessary way of having a button appear clicked but firefox borders are stupid */
  :root .navButton_clicked{
    width: 236px;
    height: 44px;
    overflow: hidden;
    border-width: 3px;
    border-style: solid;
  }
  [data-theme="light"] .navButton_clicked {
    background-color: #c3c3c3;
    border-bottom-color: #ffffff;
    border-right-color: #ffffff;
    border-left-color: #2a2a2a;
    border-top-color:#2a2a2a;
  }
    [data-theme="dark"] .navButton_clicked {
    background-color: #414141;
    border-bottom-color: #5c5c5c;
    border-right-color: #5c5c5c;
    border-left-color: black;
    border-top-color:black;
  }

   .navButton img, .navButton_clicked img {
    display: block;
    float: left;
    padding-right: 7px;
    margin-top:4px;
    margin-left: 4px;
  }

  :root .navButton p{
    display: block;
    float: left;
    margin-top: 6px;
    font-size: 20px;
  }
    :root .navButton_clicked p {
    font-family: "Microsoft Sans Serif Bold";
    display: block;
    float: left;
    margin-top: 13px;
    font-size: 9px;
  }
  
   [data-theme="light"] .navButton_clicked p {
        color: black;
    }
    [data-theme="dark"] .navButton_clicked p {
        color: white;
    }

   [data-theme="light"] .navButton p {
        color: black;
    }
    [data-theme="dark"] .navButton p {
        color: white;
    }

  .topnav a {
    float: left;
    display: block;
    padding-left: 4px;
    padding-right:4px;
    padding-top: 8px;
  }
  .topnavPages a{
    padding-bottom: 8px;
  }
  .topnav .icon {
    display: none;
  }


    a:link {
        color:#5bcefa
    }
    a:visited {
        color:#f5a9b8
    }
  
    [data-theme="light"] body{
        background-color: #008080;
    }
    [data-theme="dark"] body{
        background-color: #004040;
    }

    :root .content  {
        padding: 12px;
        margin: 40px;
        margin-bottom: 100px;
        max-width: 1000px;
        margin-inline: auto;
    }

    [data-theme="light"] .content {
        background-color: #3636369c;
        border: 5px outset #ffffff;
        color: white;
    }
    [data-theme="dark"] .content {
        background-color: #3636369c;
        border-style: solid;
        border-width: 5px;
        border-top-color: #5c5c5c;
        border-left-color: #5c5c5c;
        border-right-color: #000000;
        border-bottom-color: #000000;
        color: #ffffff;
    }

  :root .profileLinksContainer{
    border-width: 5px;
    border-style: solid;
    max-width: 650px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;  
}
    [data-theme="light"] .profileLinksContainer {
        border-top-color: #ffffff;
        border-left-color: #ffffff;
        border-right-color: #818181;
        border-bottom-color: #818181;
        background-color: #202020;
        color: #ffffff;
    }
    [data-theme="dark"] .profileLinksContainer {
        border-top-color: #5c5c5c;
        border-left-color: #5c5c5c;
        border-right-color: #000000;
        border-bottom-color: #000000;
        background-color: #202020;
        color: #ffffff;
    }
  
  .social_links{
    overflow: hidden;
    margin: auto;
    display: block;
    border-style: none;
    padding-left: 10px;
    padding-bottom: 10px;
  }

  .social_links a{
    float: left;
    display: block;
    padding-left: 8px;
    padding-right:4px;
    padding-top: 6px;
    margin: auto;
  }
  
  .profileBox {
    overflow: hidden;
    margin: auto;
    border-style: none;
  }
    .profileBox img {
    display: block;
    float: left;
    margin-right: 15px;
    margin-top:20px;
    margin-bottom: 10px;
    margin-left: 20px;
    }

    .profileBox h2{
      color: #f5a9b8;
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .profileBox p{
      margin-top: -10px;
    }

  .blogcontainer li  {
    line-height: 300%;
  }


  .container {
    margin: 10px
  }


  /* Gallery stuff (again ripped from w3schools */
  [data-theme="light"] .gallery {
    border: 4px outset #c3c3c3;
    background-color: #c3c3c3;
    color: #000000;
  }
  [data-theme="dark"] .gallery{
    border-width: 4px;
    border-style: solid;
    border-top-color: #5c5c5c;
    border-left-color: #5c5c5c;
    border-right-color: #000000;
    border-bottom-color: #000000;
    background-color: #414141;
    color: white;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 10px;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 5px;
    float: left;
    width: 24.99999%;
  }
  
  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }

  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  

 /* When the screen is less than [width of all topnav elements] pixels wide, collapse view */
 @media screen and (max-width: 1280px) {
  .topnavPages  {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1280px) {
  .topnavPages.responsive {position: relative;}
  .topnavPages.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnavPages.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} 

:root .mc-status-root {
  border-width: 5px;
  border-style: solid;
}
[data-theme="light"] .mc-status-root {
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-right-color: #818181;
    border-bottom-color: #818181;
    color: #ffffff;
}
[data-theme="dark"] .mc-status-root { 
    color: #ffffff;
    border-top-color: #5c5c5c;
    border-left-color: #5c5c5c;
    border-right-color: #1a1a1a;
    border-bottom-color: #1a1a1a;
}

.mc-status {
  margin: auto;
  max-width: fit-content;
  color:#ffffff
}

.mc-status-header {
  display: none;
}

.mc-players-list {
  display: none;
}

.mc-players {
  background-color: #000000;
  color: #ffffff;
}

.mc-players-count {
  color: #ffffff;
}