div[section-divider] {
    width:100%;
    height:50px;      
}

div[section-divider][cta] {
    background:linear-gradient(
                                135deg, 
                                #5c36a9cc 50%,
                                #8C2DADcc 50%, 
                                #8C2DADcc 100%
                                );
}

div[section-divider][presentation] {
    background:linear-gradient(
                                45deg, 
                                #8a51fecc 50%,
                                #8C2DADcc 50%, 
                                #8C2DADcc 100%
                                );
}

fort {
    margin:5px;
    color:#FE924A;
    letter-spacing: 1px;
}

.strong-text {
    font-family: "Anton";
    color:white;
    text-shadow: 0 2px 3px black;
}

.bubble {
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-size:30px;
    border-radius:50%;
    width:500px;
    height:500px;
    background:#FFDE59;
    padding:50px;
    margin-bottom: 50px;
}

.bubble div#text-box {
    max-width:400px;
}

.bubble div#text-box fort {
    font-size:35px;
}

div.hexagon-item[yellow] {
    --bkg-color: #FFDE59;
}

div.hexagon-item[orange] {
    --bkg-color: #FE924A;
}

div.hexagon-item {
    z-index:11;        
    background:var(--bkg-color);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
    width:275px;
    height:225px;
    margin:15px;
    padding:0px 40px;
    clip-path: polygon(0% 50%, 22.5% 0%, 77.5% 0%, 100% 50%, 77.5% 100%, 22.5% 100%, 0% 50%);
    transition: 1s background-color, 1s transform;
}

div.hexagon-item:hover {
    cursor:default;
    transform:translateY(-10px);
    background-color:#8C2DAD;
}

div.hexagon-item i {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-size:48px;
    text-shadow:0 1px 2px black;
    padding-top:25px;
}

div.hexagon-item div[description] {    
    width:100%;
    text-align:center;
    font-size:23px;
    text-shadow:0 1px 2px black;
}

div#shadow-container[hexagon-item] {
    position:absolute; 
    top:50px;
    left:25px;   
    z-index:10;
    width:100%;
    height:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items: center;
    padding:15px;
}

div#shadow-container[hexagon-item] div[shadow] {    
    z-index:9;      
    background:#8C2DAD55;
    width:275px;
    height:225px;
    margin:15px;
    transform:scale(0.9,0.9);
    clip-path: polygon(0% 50%, 22.5% 0%, 77.5% 0%, 100% 50%, 77.5% 100%, 22.5% 100%, 0% 50%);
}