@import url("./stylesheet/imagebanner.css");
@import url("./stylesheet/content.css");

:root{

    /* vars here */
    --blue-gray: rgb(37, 42, 58);
    --font-blue-gray: rgb(129, 133, 150);
    --dark-blue: #0D0F11;
    --font-white: rgba(255, 255, 255, 0.818);
    --sharp-orange: #FF3D00;
    --opaque-orange: rgba(255, 60, 0, 0.307);

    
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--font-white);
    font-family: 'Poppins', sans-serif;
}


body{
    background-color: var(--blue-gray);
}

main{
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    
}

.container{
    display: flex;
    flex-direction: row;

    width: 94%;
    padding: 0.5rem;
    
    border-radius: 15px;
    background-color: var(--dark-blue);
}

.noneselectedtab{
    opacity: 1;
}

@media (max-width: 780px){
    .container{
        flex-direction: column;
        width: 90%;
    }
}

@media (max-width: 480px){
    main{
        padding: 0;
    }
    .container{
        width: 100%;
        border-radius: 0;
    }
    .content{
        padding: 0;
    }
}

@media (max-width: 430px){
    .noneselectedtab{
        opacity: 0;
    }
}