@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

body {
    color: white;
    background-color: #201f22;
}
/* Index styles */
.index {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    .button {
        display: block;
        margin-top: 1em;
        padding: 1em 6em;
        border-radius: 1em;
        background-color: #333;
        color: white;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

    .button:hover {
        background-color: #444;
    }
}

/* Meet styles */
.meet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    .header {
        font-weight: 700;
        flex-direction: row;
        position: fixed;
        top: 0em;
        display: flex;
        width: 100%;
        justify-content: space-around;
        z-index: 1;
        background-color: #201f22;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .navbar {
        background-color: #201f22;
        border-top: white 4px solid;
        border-radius: 3em;
        flex-direction: row;
        position: fixed;
        bottom: 0em;
        display: flex;
        width: 100%;
        justify-content: space-around;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .content {
        padding-top: 30em;
        padding-bottom: 10em;
        margin-left: 2em;
        margin-right: 2em;

        .profile {
            display: flex;
            flex-direction: column;
            padding: 1em;
            min-height: 28em;
            min-width: 24em;
            border-radius: 3em;

            background: rgb(251, 193, 60);
            background: -moz-linear-gradient(
                180deg,
                rgba(251, 193, 60, 1) 41%,
                rgba(255, 157, 35, 1) 100%
            );
            background: -webkit-linear-gradient(
                180deg,
                rgba(251, 193, 60, 1) 41%,
                rgba(255, 157, 35, 1) 100%
            );
            background: linear-gradient(
                180deg,
                rgba(251, 193, 60, 1) 41%,
                rgba(255, 157, 35, 1) 100%
            );
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbc13c",endColorstr="#ff9d23",GradientType=1);

            .picture {
                width: 340px;
                height: 340px;
                overflow: hidden;
                position: relative;
                border-radius: 3em;
            }

            .picture img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .about {
            display: flex;
            flex-direction: column;
            padding: 1em;
            min-height: 10em;
            min-width: 24em;
            border-radius: 3em;
            margin-top: 2em;

            background: rgb(236, 78, 102);
            background: -moz-linear-gradient(
                180deg,
                rgba(236, 78, 102, 1) 41%,
                rgba(199, 37, 62, 1) 100%
            );
            background: -webkit-linear-gradient(
                180deg,
                rgba(236, 78, 102, 1) 41%,
                rgba(199, 37, 62, 1) 100%
            );
            background: linear-gradient(
                180deg,
                rgba(236, 78, 102, 1) 41%,
                rgba(199, 37, 62, 1) 100%
            );
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ec4e66",endColorstr="#c7253e",GradientType=1);
        }

        .interests {
            margin-top: 2em;

            span {
                border: 3px solid #fabc3f;
                border-radius: 3em;
                color: #fabc3f;
            }
        }

        .cta {
            margin-top: 3em;
            text-align: center;

            .button {
                border: none;
                border-radius: 3em;
                padding: 1em 2em;
                font-size: 1em;
                font-weight: bold;
                cursor: pointer;
                display: flex;
                justify-content: center;
            }

            .skip {
                background-color: white;
                color: #201f22;
            }

            .like {
                background: rgb(240, 106, 144);
                background: -moz-linear-gradient(
                    54deg,
                    rgba(240, 106, 144, 1) 41%,
                    rgba(130, 17, 49, 1) 100%
                );
                background: -webkit-linear-gradient(
                    54deg,
                    rgba(240, 106, 144, 1) 41%,
                    rgba(130, 17, 49, 1) 100%
                );
                background: linear-gradient(
                    54deg,
                    rgba(240, 106, 144, 1) 41%,
                    rgba(130, 17, 49, 1) 100%
                );
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f06a90",endColorstr="#821131",GradientType=1);
                color: white;
            }
        }
    }
}

/* Fonts */
.raleway-100 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.raleway-200 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.raleway-300 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.raleway-400 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.raleway-500 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.raleway-600 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.raleway-700 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.raleway-800 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.raleway-900 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.wave-text span {
    display: inline-block;
    animation: wave 1.2s ease-in-out infinite;
}

.wave-text span:nth-child(1) {
    animation-delay: 0s;
}
.wave-text span:nth-child(2) {
    animation-delay: 0.05s;
}
.wave-text span:nth-child(3) {
    animation-delay: 0.1s;
}
.wave-text span:nth-child(4) {
    animation-delay: 0.15s;
}
.wave-text span:nth-child(5) {
    animation-delay: 0.2s;
}
.wave-text span:nth-child(6) {
    animation-delay: 0.25s;
}
.wave-text span:nth-child(7) {
    animation-delay: 0.3s;
}
.wave-text span:nth-child(8) {
    animation-delay: 0.35s;
}
.wave-text span:nth-child(9) {
    animation-delay: 0.4s;
}
.wave-text span:nth-child(10) {
    animation-delay: 0.45s;
}
.wave-text span:nth-child(11) {
    animation-delay: 0.5s;
}
.wave-text span:nth-child(12) {
    animation-delay: 0.55s;
}
.wave-text span:nth-child(13) {
    animation-delay: 0.6s;
}
.wave-text span:nth-child(14) {
    animation-delay: 0.65s;
}
.wave-text span:nth-child(15) {
    animation-delay: 0.7s;
}
.wave-text span:nth-child(16) {
    animation-delay: 0.75s;
}
.wave-text span:nth-child(17) {
    animation-delay: 0.8s;
}
.wave-text span:nth-child(18) {
    animation-delay: 0.85s;
}
.wave-text span:nth-child(19) {
    animation-delay: 0.9s;
}
.wave-text span:nth-child(20) {
    animation-delay: 0.95s;
}
.wave-text span:nth-child(21) {
    animation-delay: 1s;
}
.wave-text span:nth-child(22) {
    animation-delay: 1.05s;
}
.wave-text span:nth-child(23) {
    animation-delay: 1.1s;
}
.wave-text span:nth-child(24) {
    animation-delay: 1.15s;
}
.wave-text span:nth-child(25) {
    animation-delay: 1.2s;
}
.wave-text span:nth-child(26) {
    animation-delay: 1.25s;
}
.wave-text span:nth-child(27) {
    animation-delay: 1.3s;
}

@keyframes wave {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}