html {
    height: 100%;
}
body {
    height: 100%;
}
.flex-row {
    display:flex;
    flex-flow: row wrap;
}
.flex-column {
    display: flex;
    flex-flow: column wrap;
}
.flex-centered {
    display:flex;
    justify-content: center;
    align-items: center;
}
.space-evenly {
    display:flex;
    justify-content: space-evenly;
}
.maincontainer {
    width: 60%;
    gap: 1%;
}
.border-box {
    box-sizing:border-box;
}
#full {
    width:100%;
    padding-bottom: 15vh;
}
#header {
    aspect-ratio: 960 / 347;
    min-width: 40%;
    margin: 1vh;
    border-radius: 20px;
    border: 5px rgb(147, 193, 220) double;
}
#nav {
    width: 29%;
    flex-grow: 1;
    order: 1;
    padding:1%;
    margin:  0.5vh 0; 
    border-radius: 20px;
    border: 5px rgb(147, 193, 220) double;
    height: fit-content;
}
#main {
    flex-grow: 15;
    width: 70%;
    min-width: 29vh;
    order: 2;
    padding:1%;
    margin: 0.5vh 0; 
    border-radius: 20px;
    border: 5px rgb(147, 193, 220) double;
    min-height: fit-content;
}
#alldecks {
    width:100%;
    overflow: visible;
}
.deckcontainer {
    width: 45%;
    border-radius: 10px;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 2%;
    margin: 5px;
    gap:3px;
}
.deckname {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.deckname > img {
    width: 15%;
    margin: 0 5%;
}

.deck {
    display: flex;
    flex-flow: row wrap;
    margin: 3px 0;
}
.deck img {
    width:20%;
    height:25%;
}






