*
{
    box-sizing: border-box;
    font-family: "Silkscreen", sans-serif;
    font-style: normal;
    font-weight: 400;
    margin: 0;
    padding: 0;
}
body
{
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "navbar" "main" "footer";
    align-items: center;
    background-color: rgba(199, 231, 245, 0.662);
}
html
{
    font-family: "Lucida Sans", sans-serif;
}
nav
{
    z-index: 9999;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "a title time"
    "menu menu menu";
    grid-area: navbar;
    align-content: center;
    position: sticky;
    top: 0;
    padding: 0.1rem 0px; 
    min-width: 760px;
    color: #ffffff;
    background-color: #111bde;
}
nav .empty
{
    grid-area: a;
}
nav .title
{
    font-size: 28px;
    grid-area: title;
    text-align: center;
    padding: 0.4rem
}
nav .kellotaulu
{
    font-size: 16px;
    grid-area: time;
    text-align: end;
    padding: 0.4rem 0.1rem;
}
nav ul
{
    display: flex;
    text-align: center; 
    justify-content: center;
    list-style-type: none;
    align-items: stretch;
    grid-area: menu;
}
nav ul li a
{
    display: block;
    flex-grow:1;
    padding: 0.1rem 2rem 0.3rem;
    margin: 0.5rem;
    font-size: 16px;
    color: #ffffff;
    background-color :#04085d;
    box-shadow: 0.3rem 0.3rem 0.3rem GRAY;
    text-decoration: none;
}
nav ul li a:hover
{
    background-color: #090791;
    box-shadow: 0.4rem 0.4rem 0.4rem rgb(248, 248, 1);     
}
nav ul li a:active
{
    background-color: #090791;
    box-shadow: 0.4rem 0.4rem 0.4rem rgb(232, 248, 1);     
}  
main
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-area: main;
    padding: 1rem;
}
.page_header
{
    font-size: 1.5rem;
}
main .box
{
    display: flex;
    width: 60%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    color: #ffffff;
    background-color: #090791;
}
main .box2
{
    display: flex;
    width: 90%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    color: #ffffff;
    background-color: #5e5bed;
}
main .box img
{
    width: 100%;
}
main .box p
{
    font-size: 0.9rem;
}
.carousel
{
    margin: 1rem auto;
    width: 90%;
    max-width: 60rem;
    border: 5px solid #ffffff;
    border-radius: .7em;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    cursor: pointer;
}
.carousel::-webkit-scrollbar
{
    display:none;
}
.carousel.active
{
    background-color: hsl(241, 37%, 45%);
    cursor: move;
}
.carousel > * > *
{
    scroll-snap-align: start;
}
.group
{
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 2em;
    height: auto;
    margin-left: 2em;
    margin-right: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
}
.card
{
    flex: 0 0 20em;
    height:  auto;
    width: 60em;
    padding: 4em;
    background: cornflowerblue;
    font-size: 1rem;
    border-radius: .7em;
    text-align: center;
    align-content: top;
}
footer
{
    text-align: center;
    grid-area: footer;
    font-size: 12px;
    padding: 2rem;
    color: #ffffff;
    background-color: #04085d;
}