@font-face { /*Import a font from a file.*/
    font-family: RobotoMono; /*Refer to the font as RobotoMono*/
    src: url(/src/styles/fonts/RobotoMono-VariableFont_wght.ttf); /*Get the font from here*/
}

html, body{
    background-color: rgb(10, 10, 10); /*Dark background inspired by the banner*/
    font-family: RobotoMono, sans-serif; /*Sets the whole site to use the font RobotoMono*/
    color: rgb(240, 240, 240); /*Light text for readability*/
}

h1{
    text-align: center; /*Use center aligned text*/
    font-weight: 600; /*Make the text bold*/
    color: rgb(255, 255, 255); /*Ensure headers stand out*/
}

h2 {
    margin: 0; /* Remove the default margin around h2 */
    text-align: center; /* Make sure the text is centered */
}

main>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap; /*Tells the browser to wrap the content*/
}

.statuslol {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    background: #1b1b1b; /* Match the dark theme of the website */
    color: rgb(240, 240, 240); /* Light text for readability */
    border-radius: 0.5em;
    padding: 1em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
  }
  
  .statuslol_emoji_container {
    min-width: 94px;
    flex: 0 0 1em;
    font-size: 3em;
    padding-right: 0;
    color: rgb(240, 240, 240); /* Ensure emoji color matches text */
  }
  
  .statuslol_content {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    margin: -0.5em 0 0 0;
    text-align: left;
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    font-family: RobotoMono, sans-serif; /* Ensure consistency with the rest of the site */
  } 

.profile-picture {
    display: block;
    margin: 0 auto; /* Center the image */
    width: 150px; /* Adjust size */
    height: 150px; /* Same value as width for a circle */
    border-radius: 50%; /* Makes it a circle */
    border: 4px solid #1b1b1b; /* Optional: Adds a border for styling */
    object-fit: cover; /* Ensures the image scales properly within the circle */
}


.emailButton {
    color: rgb(240, 240, 240);
    background-color: #1b1b1b; /*Dark button background*/
    border-radius: 8px; /*Makes the buttons round*/
    text-align: center; /*Aligns text to the center*/
    padding: 8px; /*Add 8 pixels of padding*/
    margin: 4px; /*Adds 4 pixels of margin*/
    text-decoration: none; /*Removes the underline from links*/
    transition: 0.2s linear background-color; /*Add a transition for hover*/
    border: none;
    font-family: RobotoMono, sans-serif;
    font-size: 1em;
}

.emailButton:hover { 
    cursor: pointer;
    background-color: rgb(255, 77, 77); /*Chill red shade for hover*/
    transition: 0.2s linear all;
    color: rgb(240, 240, 240);
}

h4{
    font-weight: 500; /*Make the text bold*/
    color: rgb(200, 200, 200);
}

body{
    display: flex; /*Set the body element as a flexible container*/
    align-items: center; /*Align the items towards the center*/
    justify-content: center; /*Justify the content towards the center*/
    flex-direction: column; /*Display the items in a column*/
    width: 50vw; /*Set the width of the site to 50 percent of the screen width*/
    margin: auto;
}

main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.intro-text {@font-face { /*Import a font from a file.*/
    font-family: RobotoMono; /*Refer to the font as RobotoMono*/
    src: url(/src/styles/fonts/RobotoMono-VariableFont_wght.ttf); /*Get the font from here*/
}

html, body{
    background-color: rgb(10, 10, 10); /*Dark background inspired by the banner*/
    font-family: RobotoMono, sans-serif; /*Sets the whole site to use the font RobotoMono*/
    color: rgb(240, 240, 240); /*Light text for readability*/
}

h1{
    text-align: center; /*Use center aligned text*/
    font-weight: 600; /*Make the text bold*/
    color: rgb(255, 255, 255); /*Ensure headers stand out*/
}

main>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap; /*Tells the browser to wrap the content*/
}

.emailButton {
    color: rgb(240, 240, 240);
    background-color: #1b1b1b; /*Dark button background*/
    border-radius: 8px; /*Makes the buttons round*/
    text-align: center; /*Aligns text to the center*/
    padding: 8px; /*Add 8 pixels of padding*/
    margin: 4px; /*Adds 4 pixels of margin*/
    text-decoration: none; /*Removes the underline from links*/
    transition: 0.2s linear background-color; /*Add a transition for hover*/
    border: none;
    font-family: RobotoMono, sans-serif;
    font-size: 1em;
}

.emailButton:hover { 
    cursor: pointer;
    background-color: rgb(255, 77, 77); /*Chill red shade for hover*/
    transition: 0.2s linear all;
    color: rgb(240, 240, 240);
}

.emailButton:hover {
    animation: wiggle 0.3s ease-in-out;
    transform: translateY(-5px); /* Move up a bit */
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

h4{
    font-weight: 500; /*Make the text bold*/
    color: rgb(200, 200, 200);
}

body{
    display: flex; /*Set the body element as a flexible container*/
    align-items: center; /*Align the items towards the center*/
    justify-content: center; /*Justify the content towards the center*/
    flex-direction: column; /*Display the items in a column*/
    width: 50vw; /*Set the width of the site to 50 percent of the screen width*/
    margin: auto;
}

main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

footer{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

footer>div{ /*Adds styles for the links in the footer*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap; /*Tells the browser to wrap the content*/
}

a{
    color: rgb(240, 240, 240);
    background-color: #1b1b1b; /*Dark button background*/
    border-radius: 8px; /*Makes the buttons round*/
    text-align: center; /*Aligns text to the center*/
    padding: 8px; /*Add 8 pixels of padding*/
    margin: 4px; /*Adds 4 pixels of margin*/
    text-decoration: none; /*Removes the underline from links*/
    transition: 0.2s linear background-color; /*Add a transition for hover*/
}

a:hover{
    background-color: rgb(255, 77, 77); /*Chill red shade for hover*/
    transition: 0.2s linear all;
    color: rgb(240, 240, 240);
}

.announcementBanner {
  width: 30vw; /*Width aligns with the blurb*/
  height: 23vh;
  border: none;
  padding: 8px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin: 10px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap; /*Tells the browser to wrap the content*/
  border-radius: 8px;
  background-color: rgb(20, 20, 20); /*Slightly lighter than the background*/
  color: rgb(220, 220, 220); /*Readable text color*/
}

h2 {
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: rgb(240, 240, 240);
}

h5 {
    font-weight: 400;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: rgb(200, 200, 200);
}

.announcementContent {
    display: block;
    margin-block-start: 0.2em;
    margin-block-end: 0.7em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

.announcementBanner>div {
    display: flex;
}

.announcementDismissButton {
    color: rgb(240, 240, 240);
    background-color: #1b1b1b; /*Dark button background*/
    border-radius: 8px; /*Makes the buttons round*/
    text-align: center; /*Aligns text to the center*/
    padding: 8px; /*Add 8 pixels of padding*/
    margin: 4px; /*Adds 4 pixels of margin*/
    text-decoration: none; /*Removes the underline from links*/
    transition: 0.2s linear background-color; /*Add a transition for hover*/
    border: none;
    font-family: RobotoMono, sans-serif;
    font-size: 1em;
}

.announcementDismissButton:hover { 
    cursor: pointer;
    background-color: rgb(255, 77, 77); /*Chill red shade for hover*/
    transition: 0.2s linear all;
    color: rgb(240, 240, 240);
}

.twitter{
    background-color: #1DA1F2;
    color: white;
}

.instagram{
    background-color: #E1306C;
    color: white;
}

.substack{
    background-color: #FF6719;
    color: white;
}

.airchat{
    background-color: #3170e7;
    color: white;
}

.youtube{
    background-color: #FF0000;
    color: white;
}

.twitch{
    background-color: #6441a5;
    color: white;
}

@media only screen and (max-width: 600px) { /*Responsive design for small screens*/
    body {
      width: 80vw;
    }

    .announcementBanner {
        width: 80vw; /*A value of 80 aligns the width with the blurb*/
        height: 37vh;
    }

    .announcementContent {
        margin-block-start: .3em;
        margin-block-end: .5em;
    }

    .emailButton {
        display: none;
    }
}

    width: 80%; /* Scales with the site's width */
    max-width: 50vw; /* Limits the maximum width to fit larger screens */
    text-align: center; /* Centers the text horizontally */
    margin: auto; /* Centers the container within its parent */
    word-wrap: break-word; /* Ensures long words don't overflow */
}


footer{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

footer>div{ /*Adds styles for the links in the footer*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap; /*Tells the browser to wrap the content*/
}

a{
    color: rgb(240, 240, 240);
    background-color: #1b1b1b; /*Dark button background*/
    border-radius: 8px; /*Makes the buttons round*/
    text-align: center; /*Aligns text to the center*/
    padding: 8px; /*Add 8 pixels of padding*/
    margin: 4px; /*Adds 4 pixels of margin*/
    text-decoration: none; /*Removes the underline from links*/
    transition: 0.2s linear background-color; /*Add a transition for hover*/
}

a:hover{
    background-color: rgb(255, 77, 77); /*Chill red shade for hover*/
    transition: 0.2s linear all;
    color: rgb(240, 240, 240);
}

.announcementBanner {
  width: 30vw; /*Width aligns with the blurb*/
  height: 23vh;
  border: none;
  padding: 8px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin: 10px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap; /*Tells the browser to wrap the content*/
  border-radius: 8px;
  background-color: rgb(20, 20, 20); /*Slightly lighter than the background*/
  color: rgb(220, 220, 220); /*Readable text color*/
}

h2 {
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: rgb(240, 240, 240);
}

h5 {
    font-weight: 400;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: rgb(200, 200, 200);
}

.announcementContent {
    display: block;
    margin-block-start: 0.2em;
    margin-block-end: 0.7em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

.announcementBanner>div {
    display: flex;
}

.announcementDismissButton {
    color: rgb(240, 240, 240);
    background-color: #1b1b1b; /*Dark button background*/
    border-radius: 8px; /*Makes the buttons round*/
    text-align: center; /*Aligns text to the center*/
    padding: 8px; /*Add 8 pixels of padding*/
    margin: 4px; /*Adds 4 pixels of margin*/
    text-decoration: none; /*Removes the underline from links*/
    transition: 0.2s linear background-color; /*Add a transition for hover*/
    border: none;
    font-family: RobotoMono, sans-serif;
    font-size: 1em;
}

.announcementDismissButton:hover { 
    cursor: pointer;
    background-color: rgb(255, 77, 77); /*Chill red shade for hover*/
    transition: 0.2s linear all;
    color: rgb(240, 240, 240);
}

.twitter{
    background-color: #1DA1F2;
    color: white;
}

.instagram{
    background-color: #E1306C;
    color: white;
}

.substack{
    background-color: #FF6719;
    color: white;
}

.airchat{
    background-color: #3170e7;
    color: white;
}

.youtube{
    background-color: #FF0000;
    color: white;
}

.twitch{
    background-color: #6441a5;
    color: white;
}

@media only screen and (max-width: 600px) { /*Responsive design for small screens*/
    body {
      width: 80vw;
    }

    .announcementBanner {
        width: 80vw; /*A value of 80 aligns the width with the blurb*/
        height: 37vh;
    }

    .announcementContent {
        margin-block-start: .3em;
        margin-block-end: .5em;
    }

    .emailButton {
        display: none;
    }
}