/* this will apply to whole the page body */
body{
    background-color: black;
    height: 90vh;
    color: aliceblue;
}

/* Navbar css code starts from here */
/* navbar */
.navbar{
    display: flex; /* to make the display flex */
    justify-content: space-between; /* give space to easetyping logo and usericon logo */
}

/* Left top / easetyping logo */
.left-top{
    display: flex;
    width: 300px;
    height: 50px;
    transition: all 0.3s ease;
}

.left-top:hover{
    transform: scale(1.02);
    cursor: pointer;
}

/* the logo text E & T */
.logo-text{
    height: 30px;
    width: 30px;
    background-color: black;
    color: yellow;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin: 4px;
}

/* individually E & T */
#first{
    color: black;
    background-color: #f9c10d;
    border: 2px #ffd22e solid;
    box-shadow: 2px 2px #a07000;
}

.light #first{
    color: #ffffff;
    background-color: #3295DB;
    border: 2px #EEF2F5 solid;
    box-shadow: 2px 2px #3295DB;
}

#second{
    color: #f5f5f5;
    background-color: #1a1a1a;
    border: 2px #e5e5e5 solid;
    box-shadow: 2px 2px #333333;
}

/* logo name easetyping text */
.logo-name{
    margin: 5px;
    font-size: 30px;
}

/*  for typing word */
.typing-text{
    color: #f9c10d;
}

.light .typing-text{
    color: #3295DB;
}

/* User logo icon or profile icon */
/* will implement later when will implement the sign-in/login feature
#user-logo{
    width: 25px;
    height: 25px;
    margin: 10px;
    transition: all 0.2s ease-in;
}

#user-logo:hover{
    transform: scale(1.08);
    cursor: pointer;
    color: #f9c10d;
}

*/

/* theme switch section starts from here */
#theme-switch{
    color: white;
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}


/*Light mode logo icon starts from here */
#light-mode-icon{
    width: 25px;
    height: 25px;
    margin: 10px;
    transition: all 0.2s ease-in;
}

#light-mode-icon:hover{
    transform: scale(1.08);
    cursor: pointer;
    color: #f9c10d;
}

/* light mode icon ends here */


/* Dark mode logo icon starts from here */
#dark-mode-icon{
    width: 25px;
    height: 25px;
    margin: 10px;
    transition: all 0.2s ease-in;
}

#dark-mode-icon:hover{
    transform: scale(1.08);
    cursor: pointer;
    color: #f9c10d;
}

/* dark mode logo icon ends here */

/* changing the icon according to the theme */
#dark-mode-icon{
    display: none;
}

.light #dark-mode-icon{
    display: block;
}

.light #dark-mode-icon:hover{
    color: #000;
}

.light #light-mode-icon{
    display: none;
}

/* color for light mode */
.light{
    background-color: white;
    color: black;
}

/* changing the button color on light mode */
.light #theme-switch{
    color: black;
}

/* Theme switch section ends here */

/* navbar ends here */

/* Welcome texts starts here */
.welcome{
    margin-top: 120px;
    display: flex;
    justify-content: center;
    height: 100px;
}

.welcome-text{
    font-size: 50px;
}

.welcome-text > span{
    color: #f9c10d;
}

.light .welcome-text > span{ 
    color: #3295DB;;
}
/* welcome texts ends here */

/* slogn starts from here */
.slogn-text{
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.header-text{
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
}

/* Making it responsive for smaller devices */

@media (max-width: 530px){
    .welcome-text{
        font-size: 30px;
    }
    .slogn-text{
        margin-top: 20px;
    }
    .header-text{
        font-size: 15px;
    }
}

/* slogn ends here */


/* Start button start from here */
.start{
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#start-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 40px;
    color: #000;
    background-color: #f9c10d;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease-in;
}

.light #start-button{
    background-color: #3295DB;
    color: #ffffff;
}

.light #start-button:hover{
    background-color: #237CC2;
}

#start-button:hover{
    cursor: pointer;
    transform: scale(1.03);
}
/* Start button ends here */