/* Global */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');

html, body {
    margin: 0 auto;
    height: 100%;
    background-color: ghostwhite;
    font-family: 'Source Sans Pro', sans-serif;
}

/* start cover and button */
#cover {
    width: 100%;
    height: 100%;
    background-color: ghostwhite;
    z-index: 1;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide {
    animation: slideAway 3.5s ease-out;
}

#start {
    color: ghostwhite;
    background-color: #4287f5;
    border: none;
    padding: 15px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: xx-large;
}

#start:hover {
    background-color: #346bc4;
}
#start:focus {
    background-color: #244b88;
}

/* Pillar men Boxes */
#flex-container {
    width: auto;
    height: 99%;
    padding: 0 75px;
    display: flex;

}

.charBox {
    width: 33.9%;
    height: 101%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0% 0% 3% 3%;
    text-align: center;
}

.charBox:hover > a {
    color: ghostwhite;
    width: 100%;
    height: 58.3%;
    padding-top: 70%;
    display: block;
    border-radius: 0% 0% 3% 3%;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(253,187,45,0) 100%);
    text-align: center;
    text-decoration: none;
    font-size: 4rem;
}

.charBox:not(:last-child) {
    margin-right: 15px;
}

.charBox > a {
    display: none;
}

#wamuu {
    background-image: url('../images/wamuu.png');
}
#kars {
    background-image: url('../images/kars.png');
}
#esidisi {
    background-image: url('../images/esidisi.png');
}

/* animations */
@keyframes slideAway {
    0% {opacity: 1;}
    20% {opacity: 1;}
    100% {opacity: 0;}
}