* {
    box-sizing: border-box;
    margin: 0;
    font-family: libre, 'inter';
    list-style: none;

    h1, h2, h3, h4 {
        color:var(--accent-color);
    }

    height: 100%;
}

/* Custom properties */
:root {
    --primary-background: hsl(32, 48%, 74%);
    --secondary-background: hsl(33, 55%, 85%);
    --accent-color: hsl(348, 79%, 30%);
    --light-accent: hsl(0, 0%, 100%);

    /* MARK: Typografie */
    --heading-size-l: 2rem;
    --heading-size-m: 1.6rem;
    --heading-size-s: 1.4rem;
    --heading-size-xs: 1rem;

    --font-size-l: 1.4rem;
    --font-size-m: 1.1rem;
    --font-size-s: 1rem;
    --font-size-xs: 0.75rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
}

/* MARK: Font */
@font-face {
    font-family: libre;
    src: url(/LibreCaslonText-Regular.ttf);
}

body {
    main {
        background-color: var(--primary-background);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;

        .card {
            width: 350px;
            height: 500px;
            perspective: 1000px;

            &:hover > .inner-card {
                transform: rotateY(180deg) rotateZ(180deg);
            }
        }

        .inner-card {
            display: flex;
            justify-content: center;
            height: 100%;
            width: 100%;
            position: relative;
            transition: transform 1s;
            transform-style: preserve-3d;
        }

        .front-card, .back-card {
            height: 100%;
            width: 100%;
            position: absolute;
            backface-visibility: hidden;
        }

        .front-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 20rem;
            height: 30rem;
            padding-top: 2rem;
            background-color: var(--secondary-background);
            border-radius: 25px 25px 0px 0px;
            box-shadow: -8px 8px 10px 0px rgba(0 0 0 / 25%);            
            
            h1 {
                font-weight: var(--font-weight-bold);
                padding-top: 1rem;
            }

            .front-heading {
                font-weight: var(--font-weight-medium);
                font-size: var(--heading-size-m);
                color: var(--accent-color);
            }

            .school {
                padding-bottom: 4rem;
                color: var(--accent-color);
                text-decoration: underline;
                text-underline-offset: -2em;
            }
        }

        .back-card {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                width: 20rem;
                height: 30rem;
                padding-top: 1rem;
                padding-bottom: 1.5rem;
                background-color: var(--secondary-background);
                border-radius: 25px 25px 0px 0px;
                box-shadow: -8px 8px 10px 0px rgba(0 0 0 / 25%);
                gap: 1rem;
                transform: rotateY(180deg) rotateZ(180deg);

                h2 {
                    font-size: var(--heading-size-l);
                }

                .about-me, .hobby {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    background-color: var(--accent-color);
                    border-radius: 50px 0px 50px 0px;
                    width: 15rem;

                    h3 {
                        font-size: var(--font-size-m);
                        color: var(--light-accent);
                        display: flex;
                        justify-content: center;
                        padding-top: 0.5rem;
                        padding-bottom: 0.5rem;
                    }

                    h4 {
                        font-size: var(--font-size-m);
                        color: var(--light-accent);
                        display: flex;
                        justify-content: center;
                        padding-top: 0.5rem;
                        padding-bottom: 0.5rem;
                    }

                    .about-list {
                        display: grid;
                        justify-content: center;
                        grid-template-columns: repeat(2, auto);
                        gap: 1rem;
                        padding: 0;
                        padding-bottom: 1rem;

                        button {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 50px;
                            color: var(--accent-color);
                            background-color: var(--light-accent);
                            border: none;
                            width: 100%;

                            img {
                                width: 25px;
                            }
                        }
                    }

                    .hobby-list {
                        display: grid;
                        grid-template-columns: repeat(1fr, auto);
                        gap: 0.5rem;
                        justify-content: center;
                        align-items: center;
                        padding: 0;
                        padding-bottom: 0.5rem;

                        button {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 50px;
                            color: var(--accent-color);
                            background-color: var(--light-accent);
                            border: none;
                            width: 100%;
                            
                            img {
                                width: 25px;
                            }
                        }
                    }
                }
            }

            .socials-list {
                display: flex;  
                justify-content: center;
                gap: 1.5rem;
                padding: 0;
                margin-bottom: 1.5rem;
                
                li {
                    width: 4rem;
                    height: 2.5rem;
                    background-color: var(--accent-color);
                    border-radius: 50px 0 50px 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 50px;
                        height: 50px;
                    }

                    a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
    }
}