@import '../../_common/_modules/css/_reset.css';
@import '../../_common/_modules/css/_root-colors.css';
@import '../../_common/_modules/css/_globe.css';

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: var(--background-color);
    font-family: 'Inter', sans-serif;

    main {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 100px;
        row-gap: 50px;
        padding: 1rem;

        a {
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        a:hover {
            transform: scale(1.5);
        }

        a::after {
            content: attr(data-label);
            position: absolute;
            bottom: 105%;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--title-color);
            color: #fff;
            border-radius: 0.25rem;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s ease;
            font-size: 0.8rem;
            padding: 0.2rem;
        }

        a:hover::after {
            opacity: 1;
        }
    }
}