.proceed {
    display: none;
    background-color: white;
    width: 200px;
    border-radius: 5px ;
    padding: 5px;
    display:flex;
    justify-content: center;
    text-align: center;
    position: fixed;
    top: 10%;
    margin-left: 20%;
    font-family:sans-serif;
}

input[type="checkbox"] {
    transition: transform 2s ease;
}

input[type="checkbox"]:active {
    transform: translateX(40px);
}

body {
    background-color: rgb(255, 255, 255);
    background-image: linear-gradient(to left, rgb(255, 255, 255),rgba(0, 0, 255, 0.082),rgba(255, 166, 0, 0.087),rgba(128, 0, 128, 0.146));
    background-size:cover;
    background-position:fixed;
}
.maincontent p{
    font-size: 600%;
    position: fixed;
    top: -10%;
    font-display:block;
}
.maincontent b{
    background-color: rgba(255, 255, 255, 0.365);
    padding: 10px;
    position: fixed;
    margin-left: 24%;
    border-radius: 10px;
    box-shadow: -7px 5px 10px black;
    animation:zoomIn 5s ease-in-out forwards;
    transform: scale(0);
}
.contenttext{
    background-image: linear-gradient(to left, rgba(0, 0, 255, 0.434), rgba(107, 21, 107, 0.247));
    margin: -6px;
    background-size: cover;
    text-align: center;
}

.container {
    display:grid;
    justify-content: center;
}

.question {
    font-weight:bold;
    margin-top: 100%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    background-color: rgba(128, 0, 128, 0.151);
    padding: 10px;
    border-radius: 10px;
    border: 0.2em solid rgba(128, 0, 128, 0.527);
}

.question p {
    animation: typing 0.1s steps(17, end);
}

input[type="text"],
input[type="number"]{
    background-image: linear-gradient(to left, white, rgba(128, 0, 128, 0.142),rgba(0, 0, 255, 0.073),rgba(255, 166, 0, 0.169),rgba(255, 255, 0, 0.11),rgba(255, 0, 0, 0.192));
    border-radius: 10px;
    border: 2px solid purple;
    box-sizing: border-box;
    width: 100%;
}
.question a {
    text-decoration: none;
    display: grid;
    grid-auto-flow:dense;
    justify-content:right;
    color: PURPLE;
    background-color: rgba(255, 255, 255, 0.756);
    background-image: linear-gradient(to left, rgba(255, 166, 0, 0.347),rgba(0, 0, 255, 0.098),rgba(255, 166, 0, 0.301));
    padding: 3px;
    border-radius: 10px;
    margin-top: 5%;
    margin-left: 100px;
    transition: transform 1s ease;
}

.question a:active {
    transform: translateX(20px);
}

.otherquestion {
    font-weight:bold;
    margin-top: 80%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    display:none;
    background-color: rgba(128, 0, 128, 0.151);
    padding: 10px;
    border-radius: 10px;
    border: 0.2em solid rgba(128, 0, 128, 0.527);
}

.otherquestion a {
    text-decoration: none;
    display: flex;
    flex-wrap:wrap;
    justify-content:right;
    color: PURPLE;
    background-color: rgba(255, 255, 255, 0.756);
    background-image: linear-gradient(to left, rgba(255, 166, 0, 0.347),rgba(0, 0, 255, 0.098),rgba(255, 166, 0, 0.301));
    padding: 3px;
    border-radius: 10px;
    margin-top: 5%;
    margin-left: 100px;
    transition: transform 1s ease;
}

.otherquestion a:active {
    transform: translateX(20px);
}

.otherquestion p {
    animation: typing 0.1s steps(15, end);
}

.congratulations {
    color: purple;
    font-weight:bold;
    margin-top: 50%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    display:none ;
    background-color: rgba(128, 0, 128, 0.151);
    padding: 10px;
    border-radius: 10px;
    border: 0.2em solid rgba(128, 0, 128, 0.527);
}
.howcome {
    color:purple;
    font-weight:bold;
    margin-top: 50%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    display: none;
    background-color: rgba(128, 0, 128, 0.151);
    padding: 10px;
    border-radius: 10px;
    border: 0.2em solid rgba(128, 0, 128, 0.527);
    animation: typing 1s steps(40,end),blink 1s step-end infinite;
}
.tip {
    color:purple;
    font-weight:bold;
    margin-top: 50%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    display:none;
    background-color: rgba(128, 0, 128, 0.151);
    padding: 10px;
    border-radius: 10px;
    border: 0.2em solid rgba(128, 0, 128, 0.527);
    animation: typing 1s steps(40,end),blink 1s step-end infinite;
}

.tip span {
    font-size: 50px;
}

.tip a {
    text-decoration: none;
    background-color: rgba(128, 0, 128, 0.29);
    padding: 4px;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
}

.fool {
    color: white;
    font-weight:bold;
    margin-top: 50%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    display: none;
    background-color: rgba(128, 0, 128, 0.151);
    padding: 10px;
    border-radius: 10px;
    border: 0.2em solid rgba(128, 0, 128, 0.527);
}
.marriedornot {
    background-color: rgba(255, 255, 255, 0.32);
    display: none;
    animation: typing 1s steps(49,end),blink 0.5s step-end infinite;
    border-radius: 10px;
    margin-top: 2%;
    font-family:sans-serif;
    border: 0.2em solid rgba(255, 255, 0, 0.429);
}
.gaybriel{
    background-color: rgba(255, 255, 255, 0.32);
    display: none;
    animation: typing 1s steps(49,end),blink 1s step-end infinite;
    border-radius: 10px;
    margin-top: 2%;
    font-family:sans-serif;
    border: 0.2em solid rgba(255, 255, 0, 0.429);
}
.strongproblem{
    background-color: rgba(255, 255, 255, 0.32);
    display: none;
    animation: typing 1s steps(49,end),blink 1s step-end infinite;
    border-radius: 10px;
    margin-top: 2%;
    font-family:sans-serif;
    border: 0.2em solid rgba(255, 255, 0, 0.429);
}
.eyepain{
    background-color: rgba(255, 255, 255, 0.32);
    display: none;
    animation: typing 1s steps(40,end),blink 1s step-end infinite;
    border-radius: 10px;
    margin-top: 2%;
    font-family:sans-serif;
    border: 0.2em solid rgba(255, 255, 0, 0.429);
}
.smoker{
    background-color: rgba(255, 255, 255, 0.32);
    display: none;
    animation:typing 1s steps(40, end),blink 1s step-end infinite;
    border-radius: 10px;
    margin-top: 2%;
    font-family:sans-serif;
    border: 0.2em solid rgba(255, 255, 0, 0.429);
}

.funmargin {
    margin-top: 200px;

}
.fun {
    display: flex;
    justify-content: inline-block;
    margin-left: 200px;
    
}
.fun1 {
    font-size: 40px;
    animation: bounce 1s infinite;
    transform: scale(1);
}

.fun1:hover {
    animation: rollAcross 1s linear infinite;
    transform: scale(0);
}
.fun2 {
    font-size: 40px;
    animation: bounce 1.5s infinite;
    transform: scale(0);
}

.ads{
    font-weight:bolder;
    width: 50px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.146);;
    margin-top: -200px;
    margin-left:90%;
    animation: waveFlag 1s ease-in-out infinite, zoomIn 1s ease-in-out infinite;
    transform-origin:bottom center;
    text-align: center;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 0 2px 3px green;
}

.ads a {
    text-decoration: none;
    color:darkslategray;
    font-size: 13px;
}
.ground {
    background-color: black;
    width: 100%;
    height: 5px;
    border-top: 0.23em solid green;
}
.groundpost{
    content: "";
    position:absolute;
    width: 80px;
    height: 80px;
    background-color: rgba(252, 250, 250, 0.852);
    margin-top: -92px;
    border-top-left-radius: 100px;
    border-right: 0.5em solid rgba(128, 128, 128, 0.482);
    border-top: 0.23em solid grey;
}

.goal {
    font-size: 20px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin-top: -130px;
    text-align: center;
    animation: zoomIn 1s ease-in-out forwards;
    transform: scale(0);
}
@keyframes typing {
    from{width: 0;}
    to{width:100%;}
}
@keyframes blink {
    10% {border-color:blueviolet;}
    20% {border-color:transparent;}
    30% {border-color:orange;}
    40% {border-color:transparent;}
    50% {border-color:blue;}
    06% {border-color:white;}
    70% {border-color:purple;}
    80% {border-color:cornflowerblue;}
    90% {border-color:chartreuse;}
    100% {border-color:darkgreen;}
}

@keyframes zoomIn {
    to {
        transform:scale(0.8);
        opacity: 1;
        background: linear-gradient(180deg,rgba(255, 0, 0, 0.158),rgba(255, 166, 0, 0.235),rgba(255, 255, 0, 0.381),rgba(0, 255, 0, 0.304),rgba(0, 255, 255, 0.313),rgba(0, 0, 255, 0.199),rgba(238, 130, 238, 0.4),rgba(255, 0, 0, 0.251));
    }
}

@keyframes rotate {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

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

@keyframes rollAcross {
    100% {
        transform: translateX(-250px) rotate(360deg);
    }
    0% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes waveFlag {
    0%{transform: rotate(0deg);}
    25%{transform: rotate(3deg);}
    50%{transform: rotate(0deg);}
    75%{transform: rotate(-3deg);}
    100%{transform: rotate(0deg);}
}

@media all and (min-width:600px) {
    .maincontent b {
        margin-left: 7%;
    }
}

@media (min-width:300px) and  (max-width:599px) {
    .maincontent b {
        margin-left: 15%;
    }
}

::-webkit-scrollbar {
    display: none;
}