html {
    background-color:  #7248B9;
    font-family: "Share Tech Mono", monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
}

#title{
    color: white;
    text-align: center;
    font-family: "Galada", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 2em;
}

h1{
    font-size: 2em;
}

h2{
    font-family: "Galada", cursive;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 1.5em;
}

h3{
    font-size: 1.1em;
    color:#7248B9;
}

p{
    border-bottom-style: solid;
    border-color: #7248B9;
    padding: 8px;
    font-size: 1.2em;
}

a{
    color: #f7edffff;
}

#credit{
    color: white;
    text-align: center;
}

img{
    width: 100px;
    height: 100px;
}

#center{
    display: flex; /*Creates a flex container — children (#dd, #main) are now flex items*/
    align-items: flex-start; /*Makes sure both items align at the top (instead of stretching to same height)*/
    justify-content: center; /*Centers both #dd and #main horizontally inside the container*/
    margin: auto; /*Horizontally centers the whole layout*/  
    max-width: 1000px; /*limits how wide it gets on large screens*/
    width: 100%;
    height: 100%;
    flex-wrap: wrap; 
    gap: 20px;
}

#dd{ 
    background-color: #f7edffff;
    border-radius: 10px;
    padding: 20px;
    height: auto;
    flex-shrink: 0;
}

#main{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 20px;
}

#today, #tmr{
    background-color: #f7edffff;
    border-radius: 10px;
    padding: 20px;
}

#container-sr-ss{
    display: flex;
    justify-content: space-around;
}