*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;

}
body{
    min-width: 100px;
    margin: 30px;
}
.navbar{
    background-color: bisque;
    list-style: none;
    text-decoration: none;
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
    padding: 30px;
    font-family: lato;
    font-weight:bold;
    flex-wrap: wrap;
}
.navbar .list a{
    text-decoration: none;
    color: brown;
    gap: 20px;
    margin: 20px;
    align-content: flex-end;
    padding: 10px;
    transition: background-color(white) o.3s ease;

}
.navbar .list a:hover{
    background-color: black;
    border-radius: 20px;
    outline: 2px solid red;
    color: white;
}

.form{
    margin: 30px;
    width: 100%;
    display:block;
    align-content: flex-start;
    font-size: 1.2rem;
   
}
img{
    max-inline-size: 100%;
    margin-bottom: 20px;
}
.connect-btn{

    display: block;
    background-color: antiquewhite;
    font-size: 1.rem;
    justify-content: center;
    width: 100px;
    padding: 10px;
    transition: background-color(grey) 0.3s ease;
}
.connect-btn:hover{
    background-color: black;
    border-radius: 5px;
    outline: 2px solid red;
    color: white;
}
.contact-part a{
   color: brown;
    text-decoration: none;

}
.box1{
    background-color: bisque;
    width: auto;
    height: auto;
    align-items: center;
    justify-items: center;
    padding: 10px;
    border-radius: 5px;
    outline: 1px solid brown;
    transition: background-color(black) 0.3s ease;
}
.box1:hover{
    background-color: black;
    outline: 2px solid red;
    color: aliceblue;
}

.info-section{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap:10px;
    row-gap: 20px;
    flex-wrap: wrap;
    text-overflow: inherit;
}
.info-header{
    width: 100%;
    color: brown;
    align-content: center;
    justify-items: center;
    margin-bottom: 20px;

}
.logout{
    width: 100%;
    display: flex;
    align-content:flex-start;
    justify-items: center;
}
.hour{
    color: white;
    padding: 5px;
    transition: color(white) 0.3s ease;
}
.hour:hover{
    color: aliceblue;
}
.ksh{
    color: brown;
    padding: 5px;
     transition: color(white) 0.3s ease;
}
.ksh:hover{
    color:red ;
}
.device{
    padding: 5px;
}
.subscribe{
    background-color:brown;
    padding: 5px;
    color: aliceblue;
     transition: background-color(white) 0.3s ease;
}
.subscribe:hover{
    width: 100px;
    outline: 1px solid white;
    border-radius: 5px;
    color: white;
    background-color: grey;

}