.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.right {
    display: flex;
    justify-content: right;
    width: 100%;
}

.split {
    display: flex;
    width: 90vw;
}

#title {
    font-weight: 100;
    font-size: 100px;
}

.small-title {
    display: inline-block;
    font-weight: 100;
    font-size: 50px;
    line-height: 50px;
    width: 100%;
    text-align: center;
}

.small-title.left {
    text-align: left;
}

.small-title.right {
    text-align: right;
    flex: content;
}

.small-title.button:hover {
    background-color: rgb(213, 213, 213);
}

.active-switch-clicked {
    background-color: rgb(237, 237, 237);
}

.text {
    font-weight: 100;
    font-size: 30px;
    line-height: 20px;
}

.text.define {
    display: none;
}

.text.combined:hover .text.define {
    display: inline-block;
    position: relative;
    color: pink;
    z-index: 1;
}

ul {
    margin: 0.2em;
}

.holder {
    display: flex;
    height: fit-content;
    box-sizing: border-box;
    align-items: center;
}

.internal {
    width: 100%;
}

.holder.big {
    width: 90%;
    background-color: blueviolet;
}

.holder.package {
    background-color: lightblue;
    margin: 2.5%;
    flex: 1;
    padding: 2.5%;
    min-width: 0;
    flex-grow: 0;
}

.holder.bar {
    margin: 2.5%;
    flex: content;
    padding-left: 2.5%;
    padding-right: 2.5%;
    width: 100%;
    justify-content: center;
}

.holder.item {
    background-color: lightseagreen;
    margin: 2.5%;
    flex: content;
    padding-left: 2.5%;
    padding-right: 2.5%;
    width: 100%;
    justify-content: center;
}

.holder.package:hover {
    background-color: rgb(191, 219, 228);
}

.holder.item:hover {
    background-color: rgb(53, 207, 199);
}

span {
    text-align: center;
    font-family: "Dongle";
}

#icon {
    font-size: 4vw;
}

.visual-box {
    background-color: pink;
    margin: 2.5%;
    padding-top: 0.5%;
    padding-bottom : 0.5%;
}

.visual-box:hover {
    background-color: rgb(236, 177, 187);
}

a {
    color: black;
}