@import "https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900";
body{background-color:#fcfcfc;margin:0;padding:0;font-family:Poppins;-webkit-tap-highlight-color:transparent;
background:radial-gradient(circle at top,transparent 9%, #fcebe1 10% ,#fcebe1 15% , transparent 16%), radial-gradient(circle at bottom,transparent 19%, #fcebe1 20% ,#fcebe1 25% , transparent 26%), radial-gradient(circle at right,transparent 19%, #fcebe1 20% ,#fcebe1 25% , transparent 26%), radial-gradient(circle at left,transparent 9%, #fcebe1 10% ,#fcebe1 15% , transparent 16%);
        background-size:2em 2em;
        background-color:#f05a7f;
        opacity:1
}
*{transition:.5s}
h3{text-decoration:none;color:#f05a7f;padding:10px 0 10px 5px;margin:0;font-family:Poppins;float:left;font-size:22px;max-width:calc(100% - 0px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
h3:hover{color:#000;}
h1{display:table;margin:10px auto 50px;color:#fcebe1;background:#f05a7f;padding:10px 30px;border-radius:100px;}
a {text-decoration:none;}
.main {max-width:1200px;margin-left:auto;margin-right:auto;padding:20px;border-radius:10px;display:block;text-align:center;min-height:calc(100vh - 320px);display:flex;align-items:center;flex-wrap:wrap;flex-direction:row;justify-content:center;}
#questions.main{flex-direction:column;}
#options.main{flex-direction:column;}

.hero{display:table;max-width:1200px;margin:0 auto;width:90%;}
.hero .heroContent{}
.hero .logo{width:150px;margin:0 20px;background:#f05a7f;padding:20px 10px 10px;}
.hero .titleOne{display:inline-block;font-family:robotob;max-width:150px;font-size:16px;margin:0 0 10px 10px;display:none;}
.hero p{font-size:12px;display:none;}
.hero.hide{display:none;}
.pro{display:inline-block;position:relative;transition:all .3s ease 0s;width:calc(50% - 25px);border-radius:10px;padding:10px;background:#fcebe1;margin:2px 1px;transform:scale(.95);}
.pro.two img{aspect-ratio:3/2;object-position: center;}
.pro:hover{transform:scale(1)}
.pro:hover .ti{}
.pro:hover .de{opacity:0;transition:all .3s ease 0s}
.pro img{width:100%;border-radius:10px;aspect-ratio:3/3;object-fit:cover;object-position:top left;}
.pro.one{width:calc(100% - 20px);}
.pro.three{width:calc(33% - 23px);}
.pro.four{width:calc(25% - 28px);color:#f05a7f;font-weight:bold;font-size:44px;}
.ti{border-radius:50px;bottom:15px;color:#666;font-size:11px;padding:5px 10px;text-align:center;display:table;margin:10px 2px 0;float:right;border:1px solid;}
.ti:hover{background:#04c5b4;color:black;}
.ti.dd{bottom:45px;}
.de{top:24px;color:white;font-size:8px;left:30px;position:absolute;text-align:center;transition:all .3s ease 0s;background:rgba(0,0,0, .4);border-radius:100px;padding:3px 6px;font-family:monospace;}
.ad{margin:0 auto;position:relative;display:block;}
.footer{text-align:center;padding:20px 10px;background:#fcebe1;color:#f05a7f;border-top:1px solid #f05a7f;margin-top:100px;}
.footer span{font-weight:bold;}

.options{width:100%;}
.question {display:block;margin-top:20px;}
.question h2{color:#fcebe1;background:#f05a7f;display:table;padding:10px;margin:2px -1px -65px 8px;z-index:2;position:relative;font-size:10px;border-radius:6px 0 15px 0;}
.question p{background:#fcebe1;padding:50px 100px 50px 50px;max-width:280px;border-radius:10px 10px 100px 10px;min-height:300px;display:flex;align-items:center;font-size:24px;text-align:left;}
.backToIndex {background:#f05a7f;color:#fcebe1;border:1px solid;padding:10px 30px;margin:100px auto 20px;border-radius:100px;}
.backButton {background:#f05a7f;color:#fcebe1;border:1px solid;padding:10px 30px;margin:20px auto ;border-radius:100px;cursor:pointer;}
#questions .backButton {margin-top:-70px;}

@media only screen and (max-width:820px){
h1{font-size:22px;}
h3{display:block;max-width:100%;width:100%;padding:0;}
.main {border-radius:0;margin:0;}
.pro{width:calc(100% - 20px);text-align:center;}
.pro.two img{aspect-ratio:3/3;object-position: top left;}
.pro.three{width:calc(100% - 20px);}
.pro.four{width:calc(100% - 20px);}
.hero .logo{width:200px;display:table;margin:0 auto;}
.ti{display:inline-block;float:none;}
.ti.dd{}
.de{}
}

.fadeInEffect > * {opacity:0;}