*{
 margin: 0;
 padding: 0;
}

.titlebar{
 padding: 30px 5px;
 height: 50px;
 width: 1670px;
 display: inline-flex;
 align-items: center;
 background-color: rgb(0, 28, 100);
 position: fixed;
}
   
.titlebar h1{
 color:rgb(255, 255, 255);
 font-size: 50px;
 font-family: 'Arial';
 padding: 5px;
 display:inline-flex;
}
   
.titlebar h2{
 color: rgb(255, 255, 255);
 font-size: 17px;
 font-family: 'Arial';
 padding: 15px;
 display: inline-flex;
}
   
.logo{
 width: 100px;
 height: 100px;
 margin: 0;
 cursor: pointer;
}
   
.titlebar ul li{
 list-style: none;
 display: inline-flex;
 text-align: middle;
 margin: 0 12px;
 position: relative;
}
         
.titlebar ul li a{
 text-decoration: none;
 font-family: 'Calibri';
 font-weight: bold;
 color: rgb(255, 255, 255);
 font-size: 17px;
 transition: 1.0s;
}
   
.titlebar ul li a:hover{
 text-decoration: none; 
 font-family: 'Calibri'; 
 font-weight: bold;
 color: rgb(106, 158, 255);
 font-size: 21px;
}
   
.titlebar ul li::after{
 content: '';
 height: 3px;
 width: 0;
 background: rgb(255, 255, 255);
 position: absolute;
 left: 0;
 bottom: -10px;
 transition: 1.0s;
}
         
.titlebar ul li:hover::after{
 width: 100%
}
   
.endbar{
 height: 550px;
 width: 1680px;
 background-color: rgb(0, 0, 0);
 display: flex;
 padding: 40px;
}
   
.address h1{
 font-size: 30px;
 font-family: 'Arial';
 font-weight: 200px;
 color: rgb(255, 255, 255);
 margin-left: 150px;
}
   
.address p{
 font-size: 20px;
 font-family: 'Arial';
 font-weight: 100px;
 color: rgb(161, 161, 161);
 margin-left: 150px;
}
   
.links h2{
 font-size: 30px;
 font-family:'Arial';
 font-weight: 100px;
 color: rgb(255, 255, 255);
}
   
.links li a{
 font-size: 20px;
 font-family: Arial;
 font-weight: 100px;
 color: rgb(255, 255, 255);
 text-decoration: none;
 transition: 0.8s;
}
   
.links li a:hover{
 font-size: 25px;
 font-family: Arial;
 font-weight: 100px;
 color: rgb(125, 125, 255);
 text-decoration: none;
}
   
.join h2{
 font-size: 30px;
 font-family:'Arial';
 font-weight: 100px;
 color: rgb(255, 255, 255);
}
   
.textbox{
 height: 40px;
 width: 400px;
 border-radius: 20px;
 background-color: rgb(255, 255, 255);
}
   
.subscribe{
 border-radius: 20px;
 margin-top: -41px;
 margin-left: 300px;
 color: rgb(255, 255, 255);
 text-align: center;
 font-size: 14px;
 background-color: rgba(0, 0, 255, 0.78);
 height: 40px;
 width: 100px;
 padding: 10px;
 display: block;
 cursor: pointer;
 position: static;
 border:none;
}
   
.subscribe:hover{
 border-radius: 20px;
 margin-left: 300px;
 margin-top: -41px;
 color: rgb(255, 255, 255);
 text-align: center;
 font-size: 14px;
 background-color: rgba(0, 192, 22, 0.691);
 height: 40px;
 width: 100px;
 padding: 10px;
 display: block;
 cursor: pointer;
 position: static;
 border:none;
}
   
.textarea{
 margin-top: 5px;
 margin-left: 10px;
 height: 30px;
 width: 280px
}
   
.address{
 padding: 30px;
}
   
.links{
 padding: 30px;
 margin-right: 50px;
}
   
.join{
 padding: 30px;
 margin-right: 50px;
}
   
h1{
 text-align: center;
 font-weight: bold;
 color: blue;
 font-family: 'Times New Roman';
}
   
.button {
 background-color: #4CAF50; 
 border: none;
 color: white;
 padding: 16px 32px;
 text-align: center;
 text-decoration: none;
 font-size: 16px;
 margin: 4px 2px;
 transition-duration: 0.4s;
 cursor: pointer;
 transform: translate(395%, -50%);
 -ms-transform: translate(-50%, -50%);
 display: grid;
}
   
.button2 {
 background-color: white; 
 color: black; 
 border: 2px solid blue;
}
   
.button2:hover {
 background-color: blue;
 color: white;
}