* {
    font-family: consolas;
    margin: 0;
    padding: 0;
}

.trans-flag {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    height: 100vh;
    width: 100vw;
}

.bar {
    width: 100%;
}

.blue {
    background-color: #55CDFC;
}

.blue.top {
    
    cursor: pointer;
}

.pink {
    background-color: #F7A8B8;
    cursor: pointer;
}

.white {
    background-color: #fff;
}

.dark-mode .white {
    background-color: #565656;
}

.dark-mode .pink {
    background-color: #4F3D48;
}

.dark-mode .blue {
    background-color: #23384C;
}

.section-button {
    user-select: none; 
}

.center-text {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #222;
}

.dark-mode .center-text {
    color: #ddd;
}

.author-link {
    color: #222;
}

.dark-mode .author-link  {
    color: #ddd;
}