* {
    font-family: 'Outfit';
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

:root {
    --color-red: #FC4747;           
    --color-dark-blue: #10141E;     
    --color-light-blue: #5A698F;    
    --color-white: #FFFFFF;         
    --color-dark: #161D2F;          
}

:root {
    --font-size-heading-l: 2rem;  
    --font-size-heading-m: 1.5rem;  
    --font-size-heading-s: 1.5rem;  
    --font-size-heading-xs: 1.125rem; 
    --font-size-body-s: 0.9375rem;     
    --font-size-body-m: 0.9375rem;     
}

p, h2 {
    color: white;
}

body {
    background-color: #10141E;
}

.hover, 
.generalContainer, 
.headerContainer, 
.bookmarkActive,
.signGeneralContainer,  
header {
    display: none;
}

.mainContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 48px 24px 115px 24px;
}

.generalContainer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 1.5rem 1rem;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 3.5rem;
    padding: 1.125rem 1rem;
    background-color: #161D2F;
}

.logoContainer {
    cursor: pointer;
}

.headerContainer {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.25rem;
}

.menuContainer {
    display: flex;
    width: 8.3462rem;
    height: auto;
    justify-content: space-between;
}

.menuContainer svg path {
    cursor: pointer;
    fill: #5A698F;
}

.menuContainer svg path:hover {
    fill: var(--color-red);
}

.avatarContainer {
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    outline: 0.0625rem solid white;
    border-radius: 50%;
    cursor: pointer;
}

/*--------------------------------------------------------Search Bar----------------------------------------------------------*/

.searchBarContainer {
    display: flex;
    align-items: center;
    width: 16.875rem;
    height: 1.5rem;
    align-self: flex-start;
    margin-bottom: 1.5rem;
}

form {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

form img {
    margin-right: 1rem;
    width: 1.5rem;
    height: 1.5rem;
}

form input {
    display: flex;
    all: unset;
    width: 100%;
    color: white;
}

form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/*--------------------------------------------------------Trending----------------------------------------------------------*/

.trendingContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.5rem;
}

.titleContainer {
    display: flex;
    font-size: 1.25rem;
    letter-spacing: -0.0194rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

.trendingImagesContainer {
    display: flex;
    width: 100%;
    height: auto;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.tCard {
    position: relative;
    width: 15rem;
    height: 8.75rem;
    border-radius: 0.5rem;
    scroll-snap-align: start;
    flex-shrink: 0;
}

.tCardImage img {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}

.tBookmarkContainer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #979797;
    top: 7%;
    right: 5%;
    cursor: pointer;
}

.tBookmarkContainer .bookmarkInactive {
    width: 0.7294rem;
    height: 0.875rem;
}

.tCardTextContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 8.25rem;
    height: 2.375rem;
    bottom: 1rem;
    left: 1rem;
}

.topContainer {
    display: flex;
    align-items: center;
}

.topContainer img {
    width: 0.625rem;
    margin-right: 0.375rem;
}

.spacer {
    width: 0.1875rem;
    height: 0.1875rem;
    background-color: #979797;
    border-radius: 50%;
    margin-left: 0.5rem;
    margin-right: 0.375rem;
}

.smText {
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 300;
}

.tBottomContainer {
    width: 5.6875rem;
    height: 1.1875rem;
}

.midText {
    display: inline;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 400;
    color: white;
}

/*--------------------------------------------------------Recommended----------------------------------------------------------*/

.recommendedForYouContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
}

h2 {
    font-size: 1.25rem;
    font-weight: 300;
}

.recommendedTitleContainer {
    margin-bottom: 1.5rem;
}

.recommendedCardsContainer {
    display: flex;
    gap: 0.9375rem;
}

.cardsContainer {
    display: flex;
    justify-content: center;
    gap: 0.9375rem;
    flex-wrap: wrap;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 10.25rem;
    height: 9.625rem;
    border-radius: 0.5rem;
}

.cardContainer {
    width: 100%;
    height: 100%;
}

.cardImage {
    width: 10.25rem;
    height: 6.875rem;
}

.cardImage img {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}

.cardTextContainer {
    position: absolute;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.bookmarkContainer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #979797;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
}

.bookmarkContainer .bookmarkInactive {
    width: 0.7294rem;
    height: 0.875rem;
}

.cardTextContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 8.25rem;
    height: 2.375rem;
    bottom: 0rem;
    left: 0rem;
}

.rateText {
    font-size: 0.6875rem;
    font-weight: 300;
}

/*-------------------------------------------------------------------------Login and Sign Up-----------------------------------------------*/


.loginGeneralContainer {
    display: flex;
}

.loginGeneralContainer, 
.signGeneralContainer {
    flex-direction: column;
    align-items: center;
    gap: 58.4px;
    width: 100%;
    height: 100%;
}

.loginContentContainer, 
.signUpContentContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 24px;
    border-radius: 10px;
    gap: 40px;
    background-color: #161D2F;
}

.lgText {
    color: white;
    font-weight: 300;
}

fieldset {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: none;
    gap: 24px;
}

fieldset input {
    all: unset;
    width: 100%;
    color: white;
}

fieldset input::placeholder {
    font-weight: 300;
    font-size: 15px;
    padding-left: 16px;
}

.spacerSignAndLogin {
    width: 100%;
    height: 1px;
    background-color: #5A698F;
}

.buttonContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.mainButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border-radius: 6px;
    background-color: var(--color-red);
    color: var(--color-white);
    border: none;
    font-size: 15px;
    font-weight: 300;
    cursor: pointer;
}

.alreadyContainer {
    display: flex;
    gap: 9px;
}

.alreadyContainer strong {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-white);
}

.alreadyContainer p {
    color: var(--color-red);
    cursor: pointer;
}

/*--------------------------------------------------------Desktop----------------------------------------------------------*/

@media (min-width: 1024px) {

    .mainContainer {
        display: grid;
        grid-template-areas: 
        'menu general';
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(1, auto);
    }

    .generalContainer {
        display: grid;
        grid-template-areas: 
        'search'
        'trend'
        'cards';
        grid-template-rows: repeat(2, auto);
        margin-top: 65px;
    }

    header {
        width: 96px;
        height: 960px;
        grid-area: menu;
        margin-left: 32px;
        border-radius: 20px;
        padding: 35.41px 28px 32px 28px;
        align-items: start;
        margin-top: -65px;
    }

    .headerContainer {
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: start;
        justify-content: unset;
    }

    .logoContainer {
        margin-bottom: 75px;
    }

    .menuContainer {
        flex-direction: column;
        width: 100%;
        height: 200px;
        margin-bottom: auto;
        align-items: center;
        justify-content: space-between;
    }

    .avatarContainer {
        width: 40px;
        height: 40px;
    }

    .avatarContainer img {
        width: 100%;
    }

    .searchBarContainer {
        grid-area: search;
        width: 100%;
    }

    #searchBarLanding::placeholder {
        font-weight: 300;
        font-size: 24px;
        padding-left: 16px;
    }

    .trendingContainer {
        grid-area: trend;
    }

    .recommendedCardsContainer {
        grid-area: cards;
    }
    
    .loginGeneralContainer {
        display: flex;
    }
    
    .loginGeneralContainer, 
    .signGeneralContainer {
        gap: 82.99px;
    }
    
    .loginContentContainer, 
    .signUpContentContainer {
        width: 400px;
        padding: 32px;
        border-radius: 20px;
    }
}