:root{
    --bright-red: #FD4556;
    --crimson: #BD3944;
    --maroon: #53212B;
    --white: #FFFBF5;
    --black: #0f1923;
    --blue: #364966;
    --motto: 45px;
    --head: 65px;
    --txt: 60px;
}
*{
    margin: 0;
    color: var(--white);
}

/*---------Custom Scrollbar Styling---------*/
::-webkit-scrollbar {
    width: 0.5vw;
    /* background: var(--maroon); */
  }
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--maroon);
    /* border: 0.5px solid var(--dark-red); */
    background-clip: padding-box;
  }
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--maroon);
  }


@font-face {
    font-family: Force Commander Expanded;
    src: url(forcecommanderexpand.ttf);
}
@font-face {
    font-family: Force Commander;
    src: url(forcecommander.ttf);
}
@font-face {
    font-family: valorant;
    src: url(Valorant.ttf);
}
body{
    background-color: var(--black);
}

/* -----HEADER STYLING------ */
.header{
    height: 70px;
    background: var(--bright-red);
    border: 2px solid black;
}
.header h1{
    padding: 5px;
    font-size: var(--head);
    font-family: 'VALORANT';
    color: black;
    margin-left: 30%;                                             
}
.header img{
    padding: 1px;
    width: 80px;
    float: left;
    margin: 3px 0 0 4%;
    border: 4px solid var(--black);
    border-radius: 5px;
}

/* -------INSTRUCTIONS DIV STYLING--------- */
.instruction{
    margin: 0 auto;
    margin-top: 5%;
    padding: 10px;
}
.instruction h1{
    color: var(--crimson);
    letter-spacing: 5px;
    font-size: var(--motto);
    font-family: 'Force Commander Expanded';
    text-align: center;
}
.info{
    width: 98%;
    padding: 10px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 4%;
    justify-content: center;
}
.info h2{
    color: var(--white);
    font-size: 38px;
    padding: 10px;
}
.info p{
    padding: 5px;
    font-size: 23px;
    letter-spacing: 1.5px;
}
.info-2{
    padding: 10px;
    width: 70%;
    font-family: 'Bebas Neue', cursive;
    font-family: 'Oswald', sans-serif;
}
.info-2 p{
    font-family: 'Roboto Slab', serif;
}
.img{
    
    border-radius: 7px;
    float: right;
}
.img img{
    height: 100%;
    width: 100%;
}

/* -------CHOOSING DIV STYLING------- */
.choose{
    margin-top: 5%;
    padding: 10px;
}
.choose h1{
    color: var(--crimson);
    letter-spacing: 5px;
    font-size: var(--motto);
    font-family: 'Force Commander Expanded';
    text-align: center;
}
.buttons{
    display: flex;
    justify-content: center;
    margin-top: 2%;
    padding: 40px;
}
.buttons button{
    font-family: valorant;
    color: black;
    border: 0px;
    width: 150px;
    height: 80px;
    margin-right: 5%;
    font-size: 25px;
    border-radius: 10px;
    border: 3px solid var(--bright-red);
}

.buttons button:hover{
    background: var(--crimson);
    color: black;
    border: 3px solid white;
}


#display-1{
    text-align: center;
}
#a-msg{
    font-size: 40px;
    letter-spacing: 5px;
    -webkit-text-stroke: 1.2px var(--crimson);
    font-family: 'Force Commander';
}
#container{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
    margin-top: 2%;
}
.a-img{
    padding: 15px;
}
.agentcard{
    border: 3px solid rgb(250, 250, 250);
    border-radius: 10px;
    background: var(--crimson);
    text-align: center;
    padding: 5px;
    margin-top: 2%;
}
.agentcard h1{
    color: black;
}


/* ---------TASK BODY STYLING----------- */
#container2{
    margin-top: 4%;
    text-align: center;
    padding: 10px;
}
.taskcard{
    height: max-content;
    width: 90%;
    margin: 0 auto;
    border: 2px solid gainsboro;
    background: var(--crimson);
    border-radius: 20px;
}
.t-msg{
    font-size: var(--head);
    color: black;
    margin: 3%;
}
.ttask{
    font-size: var(--txt);
    color: black;
    margin: 4%;
}

.go{
    text-align: center;
    font-size: var(--head);
    letter-spacing: 5px;
    font-family: 'Force Commander Expanded';
    color: transparent;
    -webkit-text-stroke: 1px var(--crimson);
    background: url(back.png);
    -webkit-background-clip: text;
    background-position: 0 0;
    animation: back 20s linear infinite;
}
@keyframes back{
    100%{
        background-position: 2000px 0;
    }
}

.end{
    width: 98%;
    margin: 0 auto;
    margin-top: 1%;
}
.end-img{
    margin-top: 2%;
    width: 70%;
    margin-left: 15%;
    border: 10px solid var(--bright-red);
}
/* -------FOOTER STYLING-------- */
.footer{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background: var(--bright-red);
    margin-top: 5%;
    font-size: 25px;
}
.footer p{
    color: black;
    padding: 2px;
}
.footer a{
    text-decoration: none;
    color: black;

}
.pp3{
    text-align: center;
    font-size: 18px;
}
strong{
    color: black;
}


/* -------MEDIA QUERRIES------- */
@media screen and (min-device-width: 1000px) {
    :root{
        --motto: 40px;
        --head: 60px;
        --txt: 55px;
    }
}
@media screen and (min-device-width: 800px) and (max-device-width: 1000px) {
     :root{
        --motto: 35px;
        --head: 55px;
        --txt: 50px;
    }   
    .header h1{
    margin-left: 20%;
    }
    .info-2{
        width: 90%;
    }
    #container{
        width: 95%;
    }
}
@media screen and (min-device-width: 600px) and (max-device-width: 799px){
    :root{
        --motto: 27px;
        --head: 45px;
        --txt: 40px;
    }   
    .header h1{
    margin-left: 22%;
    margin-top: 2%;
    }
    .info-2{
        width: 90%;
    }
    .img img{
        margin-top: 2%;
    }
    #container{
        width: 95%;
    }
}
@media screen and (min-device-width: 405px) and (max-device-width: 599px){
    :root{
        --motto: 25px;
        --head: 33px;
        --txt: 30px;
    }   
    .header{
        height: 60px;
    }
    .header h1{
    margin-left: 22%;
    margin-top: 2%;
    }
    .info-2{
        width: 95%;
    }
    .img img{
        margin-top: 2%;
    }
    #container{
        width: 95%;
    }
    .header img{
        width: 60px;
    }
    .a-img{
        width: 40%;
        height: 60%;
        padding: 2px;
    }
    .agentcard{
        width: 40%;
        height: 63%;
        padding: 5px;
    }
    .footer{
        font-size: 15px;
    }
    .pp3{
        font-size: 10px;
    }
    .agentcard h1{
        font-size: var(--motto);
    }
}

@media screen and (max-device-width: 408px){
    .header{
        height: 50px;
    }
    .header img{
        width: 45px;
    }
}
@media screen and (min-device-width: 300px) and (max-device-width: 404px){
    :root{
        --motto: 20px;
        --head: 28px;
        --txt: 25px;
    }  
    .header{
        height: 45px;
    } 
    .header h1{
    margin-left: 17%;
    margin-top: 2%;
    }
    .info-2{
        width: 95%;
    }
    .img img{
        margin-top: 2%;
    }
    #container{
        width: 95%;
    }
    .header img{
        width: 45px;
    }
    .a-img{
        width: 40%;
        height: 60%;
        padding: 2px;
    }
    .agentcard{
        width: 40%;
        height: 63%;
        padding: 5px;
    }
    .footer{
        font-size: 12px;
    }
    .pp3{
        font-size: 10px;
    }
    .agentcard h1{
        font-size: var(--motto);
    }
}
@media screen and (max-device-width: 299px){
    :root{
        --motto: 18px;
        --head: 25px;
        --txt: 22px;
    }   
    .header h1{
    margin-left: 13%;
    margin-top: 2%;
    }
    .info-2{
        width: 97%;
    }
    .img img{
        margin-top: 2%;
    }
    #container{
        width: 98%;
    }
    .header img{
        width: 35px;
    }
    .a-img{
        width: 40%;
        height: 60%;
        padding: 2px;
    }
    .agentcard{
        width: 40%;
        height: 63%;
        padding: 5px;
    }
    .footer{
        font-size: 10px;
    }
    .pp3{
        font-size: 8px;
    }
    .agentcard h1{
        font-size: var(--motto);
    }

}