/* Basic stuff, common between light and dark mode */
*{
    font-size: 1.4rem;
    font-family: Georgia, serif;
}

body{
    margin: 0px;
}

.title {
    width: 50vw;
    margin: 2vw;
}

.centered {
    display: flex;
    justify-content: center;
}

nav{
    display: flex;
    justify-content: center;
    border: 0.25rem;
    border-style: groove none;
    border-color: #ff7800;
    margin: 0px;
    width: 100vw;
}

button{
    background: none;
    border: none;
    font-size: 1.8rem;
    margin: 0.7rem;
    color: #ff7800;
    text-align: left;
}

.downwards{
    display: flex;
    flex-direction: column;
}

.optionsDropdown {
  display: none;
  overflow: hidden;
  position: absolute;
  border: 0.25rem groove #ff7800;
}

.phoneShown{
    display: none;
}

p{
    margin: 1.25rem;
}

.bright{
    color: #ffffff;
}

.leftbuffer{
    margin-left: 1vw;
}

a{
    text-decoration: none;
}

a:hover, button:hover{
	color: #A9A8A9;
}

.logo{
    width: 5vw;
    height: 5vw;
    margin: 0.4vw;
}

footer p, footer a{
  color: #ff7800;
  text-align: center;
}

/* The rules for displaying the calendar */

.sideLoaded{
    display: flex;
}

.day{
    width: 4vw;
    height: 4vw;
    margin: 0px;
    border: solid;
    padding: 0.25rem;
    text-align: center;
}

.old {
  border-color: #666666;
  color: #666666;
}

.currentDates{
    border-color: #ffffff;
    color: #ffffff;
}

.eventDay{
    background-color: #666666;
    color: #000000;
}

.currentDates.eventDay{
    background-color: #bbbbbb;
}

.verticalCentered {
  display: flex;
  flex-direction: column;
  margin: 4rem;
  justify-content: center;
}

.bubble {
  background-color: #002144;
}

.bubble button {
  background-color: #002144;
  color: #ffffff;
  text-align: left;
  font-size: 1.4rem;
  margin: 1.25rem;
  padding: 0rem;
}

.bubble a {
    color: #ffffff;
    margin: 1.25rem;
}

.bubble a:hover, .buttonLink:hover{
    color: #A9A8A9;;
}

/* Changes between light and dark mode */

@media (prefers-color-scheme: dark){

	*{
		background-color: #000000;
        color: #A9A8A9;
	}

    .blankDay{
        border-color: #000000;
    }

    .bubble {
        background-color: #303030;
    }

      .bubble button {
        background-color: #303030;
    }

}

@media (prefers-color-scheme: light){
    *{
        background-color:  #003874;
        color: #ffffff;
    }

    .blankDay{
        border-color: #003874;
        color: #A9A8A9;
    }

    .eventDay{
        color: #003874;
    }
}

/* Changes for smaller screen sizes */

/* Tablet sized modifications */
@media (width <= 1080px){
    .title {
        width: 70vw;
        height: 22vw;
    }

    .phoneHidden{
        display: none;
    }

    .phoneShown{
        display: block;
    }

    .logo{
        width: 15vw;
        height: 15vw;
        margin: 1.5vw;
    }

    .CenterOnMobile {
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

    .CalenderDates{
        flex-direction: column;
    }

    .sideLoaded {
        padding: 0rem 15vw;
    }

    h2 {
        display: grid;
        justify-content: center;
    }

    .day {
        width: 8vw;
        height: 8vw;
    }

    .sideLoaded.bubble {
        padding: 0rem 4rem;
    }

    .bubble a, .bubble button {
        height: 9rem;
    }

    .bubble button{
        display: inline-flex;
        align-items: flex-start;
    }

    .downContents{
        position: relative;
    }

    .downwards {
        width: 10rem;
    }

    .optionsDropdown{
        position: absolute;
        float: right;
        right: 0px;
    }
}

/* Phone sized modifications */
@media (width <= 500px){
    *{
        font-size: 1.2rem;
    }

    nav button {
        margin: 0.2rem;
        font-size: 1.4rem;
        text-align: left;
    }

    .logo{
        width: 20vw;
        height: 20vw;
    }

    .sideLoaded {
        padding: 0vw 2vw 0vw;
    }

    .day {
        width: 10vw;
        height: 10vw;
        font-size: 1rem;
    }

    .widerOnMobile {
        margin: 2rem 0px;
    }

    .downwards {
        width: 7rem;
    }

    .sideLoaded.bubble {
        padding: 0rem;
    }

    .bubble button, .bubble a, .bubble p{
        font-size: 1rem;
    }
}