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

html, body {
    background-color: rgb(255, 255, 255); /*Sets the background color of the website*/
    font-family: Jost, sans-serif; /*Sets the whole site to use the font Jost, if it can't find it, it'll use a sans-serif font provided by the browser instead*/
    color: rgb(0, 0, 0); /*Sets the text color of the website to black*/
}

h1 {
    text-align: center; /*Use center aligned text*/
    font-weight: 600; /*Make the text bold*/
}

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: black;
    background-color: rgb(218, 218, 218);
    border-radius: 8px; /*Makes the buttons round*/
    text-align: center; /*Aligns text to the center. Avoid center aligned text for paragraphs. They're mainly used for buttons*/
    padding: 8px; /*Add 8 pixels of padding between the corners of the element and the content of it to make it feel less cramped*/
    margin: 4px; /*Adds 4 pixels of margin, as in, blank space around the element to space other items apart*/
    text-decoration: none; /*Removes the underline from the link now that they look like buttons*/
    transition: 0.2s linear background-color; /*Adds a transition when someone hovers over the button*/
    border:none;
    font-family: Jost, sans-serif;
    font-size: 1em;
}

#emailButton:hover { 
    cursor:pointer;
    background-color: rgb(178, 178, 178); /*When someone hovers over the link, make the background color darker*/
    transition: 0.2s linear all;
    color: black;
}

h4 {
    font-weight: 500; /*Make the text bold*/
}

body {
    display: flex; /*Set the body element as a flexable container*/
    align-items: center; /*Align the items toward the center*/
    justify-content: center; /*Justify the content toward the center, as in, horizontal centering*/
    flex-direction: column; /*Display the items in a column*/
    width: 50vw; /*Set the width of the site to 50 percent of the screens 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: black;
    background-color: rgb(218, 218, 218);
    border-radius: 8px; /*Makes the buttons round*/
    text-align: center; /*Aligns text to the ceneter. Avoid center aligned text for paragraphs. They're mainly used for buttons*/
    padding: 8px; /*Add 8 pixels of padding between the corners of the element and the content of it to make it feel less cramped*/
    margin: 4px; /*Adds 4 pixels of margin, as in, blank space around the element to space other items apart*/
    text-decoration: none; /*Removes the underline from the link now that they look like buttons*/
    transition: 0.2s linear background-color; /*Adds a transition when someone hovers over the button*/
}

a:hover {
    background-color: rgb(178, 178, 178); /*When someone hovers over the link, make the background color darker*/
    transition: 0.2s linear all;
    color: black;
}

#announcementBanner {
  width: 27vw; /*A value of 50 aligns the width with the blurb*/
  height: 21.5vh;
  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(237,237,237);
  display: none;
}

/* Uncomment this to hide the announcement banner's link by default
#announcementActionButton {
    display: none;
}
*/

h2 {
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

h5 {
    font-weight: 400;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#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: black;
    background-color: rgb(218, 218, 218);
    border-radius: 8px; /*Makes the buttons round*/
    text-align: center; /*Aligns text to the ceneter. Avoid center aligned text for paragraphs. They're mainly used for buttons*/
    padding: 8px; /*Add 8 pixels of padding between the corners of the element and the content of it to make it feel less cramped*/
    margin: 4px; /*Adds 4 pixels of margin, as in, blank space around the element to space other items apart*/
    text-decoration: none; /*Removes the underline from the link now that they look like buttons*/
    transition: 0.2s linear background-color; /*Adds a transition when someone hovers over the button*/
    border:none;
    font-family: Jost, sans-serif;
    font-size: 1em;
}

#announcementDismissButton:hover { 
    cursor:pointer;
    background-color: rgb(178, 178, 178); /*When someone hovers over the link, make the background color darker*/
    transition: 0.2s linear all;
    color: black;
}

@media only screen and (max-width: 600px) { /*When the users screen is smaller than 600px (as in, for phones), make the width of the site 80% of the sceeens width*/
    body {
      width: 80vw;
    }

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

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

    #emailButton {
        display: none;
    }
  }