@font-face {
   font-family: 'Runtime';
   src: url('font-logo.otf') format('opentype');
}@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Edu+SA+Hand:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Quicksand:wght@300..700&family=Raleway:ital,wght@0,816;1,816&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wdth,wght@0,77.3,100..900;1,77.3,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');


body {
   height: 100vh;
   margin: 0px;
   padding: 0px;
   background-color: #E5F8FF;
   font-family: 'Runtime', sans-serif;
}

nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 30px;
   background-color: white;

}

.nav-link {
   list-style: none;
   display: flex;
   gap: 20px;
   margin: 0;
   padding: 0;
}

.nav-list {
   list-style: none;
   display: flex;
   gap: 20px;
   margin: 0;
   padding: 0;
}

.nav-link li a {
   text-decoration: none;
   color: #333;
   font-weight: bold;
}

li a:hover {
   color: #ff0000;
   transition: color 0.3s ease;

}

.logo-image {
   width: 50px;
   height: 60px;
}

.logo-stor {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: larger;
   gap: 5px;
}

.container {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-around;
   align-items: flex-end;
   margin: 15px;

}

.subleft-container {}

.login {
   border: solid 1px white;
   border-radius: 5px;
   width: 350px;
   height: 470px;
   padding: 10px;
   background-color: white;

   font-family: "Roboto Condensed", sans-serif;
   box-shadow:0px 5px 5px rgba(0, 0, 0, 0.258);
   margin-bottom: 15px;


}

.logo-login-img {
   width: 35px;
   height: 35px;
}

.dell-login-logo {
   color: rgb(6, 6, 255);

   font-size: x-large;
   margin-top: 3px;

}

.text-login {
   display: flex;
   justify-content: center;

}

.discrition {
   display: flex;
   justify-content: center;
}


.top-login {}

.logo-design {
   display: flex;
   justify-content: center;
   gap: 10px;
}

.input {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.container-input-email {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.input-email {
   width: 350px;
   height: 30px;
   border: solid 1px black;
   border-radius: 5px;
}

.container-input-passward {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.input-passward {
   width: 350px;
   height: 30px;
   border: solid 1px black;
   border-radius: 5px;
}

.checkbox-forgotpassward {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0px;
   padding: 0px;
}

.checkbox {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 3px;
   
}

.submit {
   width: 350px;
   height: 30px;
   background-color: #2563EB;
   border: none;
   border-radius: 5px;
   color: white;
}

.submit:hover {
   background-color: #4e70b9
}

.image-left {
   width: 500px;

}
.forgot-password{
   color: #2563EB;
   text-decoration: none;
   
}
.forgot-password:hover{
   color: #2564eb75;
   text-decoration: underline;
}
#rememberMe{
   width: 20px;
   height: 20px;
   
   
}
.line-login{
   height: 1px;
   width: 200px;
   background-color: rgba(0, 0, 0, 0.336);
}

.container-line-login{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
}
.container-line-login > p{
   color:rgba(0, 0, 0, 0.336) ;
}
.button-new-account{
   width: 350px;
   height: 30px;
   color: black;
   border: solid 1px black;
   background-color: white;
   border-radius: 3px;
}
.button-new-account:hover{
   background-color: rgb(238, 233, 233)
}


footer{
   background-color:#000000dd;
   color: white;
   padding: 30px;
}
.image-playstor{
   width: 150px;
   height: 50px;
}
.image-app-stor{
   
    width: 150px;
   height: 80px;
}
.footer-stor{
   display: flex;
   align-items: center;
}
.footer-logo-dell{
   width: 400px;
   height: 80px;

}
.footer-container-logo{
   display: flex;
   justify-content: center;
   align-items: center;
}
.container-footer{
   display: flex;
   justify-content: space-around;
   align-items: center;
}
#footer-span{
    color: #808080;
}
.footer-line{
   width: 1200px;
   height: 1px;
   background-color: #f4f3f3;
   display: flex;
   gap: 10px;
}
.footer-last{
   display: flex;
   justify-content: center;
   align-items: center;
}
ul{
   list-style-type: none;
}