*{
    font-family: 'Poppins';
}


@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-15px);
    }
    60% {
        transform: translateX(-50%) translateY(-7px);
    }
}

b{
    color: #00b3ff;
}
body{
    margin: 0;
    border: 0;

    color: white;
    background-color: #121212;
    display: flex;
    flex-direction: column;
}
#start{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 95vh;
}
#startContent{
    display: flex;
    gap: 1.5rem;
    width: 55rem;;

    padding: 1rem;
}
#backgroundVideo{
    position: absolute; 
    inset: 0;
    width: 100%; 
    height: 95vh;
    object-fit: cover; 
    object-position: center; 
    filter: blur(4px) brightness(.06); 
    z-index: -1; 
    pointer-events: none;
}
#startIcon{
    height: 15rem;
    width: 15rem;

    border-radius: 1rem;
}
.verticalLine{
    width: 3px;

    background-color: white;
}
#startTitleAndDescription{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#startTitle{
    margin: 0;
}
#startDescription{
   text-align: justify;
}
#startBuyButton{
    font-size: medium;
    font-weight: bold;

    width: 10rem;

    padding: .8rem;
    border: none;
    border-radius: 1rem;

    cursor: pointer;

    background-color: #003F99;
    color: white;

    transition: all 0.3s ease;
}
#buyLink{
    text-decoration: none;
    align-self: center;
}
#startBuyButton:hover{
    background-color: #0090CC;

    transform: scale(1.05);
}


#tiktokTipsContainer{
    position: relative;

    display: flex;

    width: 100%;
    height: 100vh;

    background-color: #000407;
    z-index: -2;

}
#mainTiktokTipsTitle{
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
}
.divBackground{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: -1;

    filter: blur(10px) brightness(0.07);
}
#midiasonsBackground{
    background-image: url("https://midiasons.com/assets/midiaSonsLogo.png");
    background-size: cover;
    background-position: center;
}
#midiasonsContainer{
    width: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tiktokTipTitle{
    font-size: 1.9rem;
    font-weight: 300;

    margin: 0;
}
.tiktokTipList{
    font-size: 1.4rem;
    font-weight: 200;
}
.tiktokTipList li{
    margin-bottom: 1rem;
    text-align: center;
}
.channelCredits{
    display: flex;
    align-items: center;

    font-size: 1.2rem;
}
.channelMiniIcon{
    height: 2.5rem;
    width: 2.5rem;

    border-radius: 50%;

    margin-right: .5rem;
}


#videoShowcase{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 95vh;

    background-color: #000407;
}
#videoShowcaseContent{
    display: flex;
    gap: 1.5rem;
    width: 55rem;;

    padding: 1rem;
}
#videoShowcaseStats{
    margin: 0;
    margin-bottom: 1rem;
    font-size: .8rem;
    color: rgb(189, 189, 189);
}
#showcaseVideo{
    height: 30rem;
    width: 50%;

    border-radius: 1rem;

    background-color: black;
}
#videoDescription{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#bonus{
    margin: 0;
    color: #0090CC;
    font-weight: 300;
    font-size: 1.5rem;
}
#videoDescription h1{
    margin: 0;
}

#channelDescription{
    font-size: 1.4rem;
    font-weight: 200;
    width: 60%;
    text-align: justify;
}

#results{
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 4rem 1rem;
}
#results h1{
    font-size: 1.7rem;
    margin: 0;
}
#results img{
    width: 60%;
    border-radius: 1rem;
}

#buyNow{
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 4rem 1rem;
}
#buyNowContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 40%;
    
}
#buyNowDescription{
    text-align: justify;
    font-size: 1.2rem;
    margin: 0;
}
#price{
    font-weight: bold;
    margin: 0;
}
#originalPrice{
    text-decoration: line-through;
    color: #ff4d4d;
    font-size: 1.2rem;
    margin: 0;

    text-align: center;
}
#discountedPrice{
    color: #00cc66;
    font-size: 1.6rem;
    margin: 0;

    text-align: center;
}


@media (max-width: 1280px) {
    #startContent{
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 90%;
    }
    .verticalLine{
        display: none;
    }
    #tiktokTipsContainer{
        flex-direction: column;
        height: 100%;
        padding: 100px 0;
    }
    #midiasonsContainer{
        width: 100%;
        height: auto;
        padding: 2rem 0;
        text-align: center;
    }
    .tiktokTipList li{
        font-size: 1.2rem;
    }
    #channelDescription{
        width: 90%;        
    }
}

@media (max-width: 1000px) {
    body {
        font-size: 0.9rem;
    }
    #startTitle {
        font-size: 1.3rem;
    }
    #startDescription {
        font-size: 1rem;
    }
    #startBuyButton {
        font-size: 0.95rem;
        width: 8rem;
        padding: 0.6rem;
    }
    .tiktokTipTitle {
        font-size: 1.2rem;
    }
    .tiktokTipList {
        font-size: 1rem;
    }
    .tiktokTipList li {
        font-size: 1rem;
    }
    .channelCredits {
        font-size: 1rem;
    }
    #videoShowcase{     
        height: auto;
    }
    #bonus{
        font-size: 1rem;
    }
    #videoShowcaseTitle{
        font-size: 1.4rem; 
    }
    #videoShowcaseDescription{
        display: none;
    }
    #videoShowcaseStats{
        font-size: .7rem;
    }
    #videoShowcaseContent{
        flex-direction: column-reverse;
        align-items: center;
        text-align: justify;
        width: 90%;
    }
    #showcaseVideo{
        width: 100%;
        height: 25rem;
    }
    .tiktokTipTitle{
        font-size: 1rem;
    }
    #channelDescription{
        font-size: 0.8rem;
    }
    .channelCredits{
        font-size: 0.8rem;
    }
    .channelMiniIcon{
        height: 2rem;
        width: 2rem;
    }
    #mainTiktokTipsTitle{
        font-size: 1.5rem;
    }
    #results h1{
        font-size: 1.2rem;
    }
    #results img{
        width: 95%;
        border-radius: 5px;
    }
    #buyNowContent{
        width: 90%; 
    }
    #backgroundVideo{
        filter: blur(4px) brightness(0.15); 
    }

}