body {
    font-family: Arial, Helvetica, sans-serif;
    
    background-image: url(/public/tile_background.png);
	background-color: #E4E4ED;
}

@media (min-width: 1024px) {
    .box {
        margin: 10vw 10vh 10vw 10vh;
        
    }
    .header {
        font-size: 4vw !important;
    }
    .current {
        font-size: 4vw !important;
    }
    .next {
        font-size: 2vw !important;
    }
    
    
}

.header {
    text-align: center;
    font-size: 10vw;
    width: fit-content;
    background-color: #f8f5f2;
    border-style: solid;
    border-color: #232323;
    padding: 2rem;
    justify-content: center;
    border-radius: 15px;
}
.current {
    background-color: #078080;
    font-size: 10vw;
    padding: 1rem;
    color: #f8f5f2;
    margin-top: 0;
    border-radius: 0px 15px 15px 15px;
    

}

.currentTop{
    background-color: #232323;
    font-size: 1rem;
    padding: 1rem;
    margin: 0rem;
    color:#f8f5f2;
    margin-right: 1rem;
    font-weight: bold;
    border-radius: 15px 15px 0px 0px;
    width: fit-content;

}

.next {
    font-size: 7vw;
    background-color: #f45d48;
    color: #f8f5f2;
    padding: 1rem;
    margin-top: 0;
    border-radius: 0px 15px 15px 15px;
}

.topContainer {
    margin-left: 0;
    display: flex;
}

.container {
    width: fit-content;
}