@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
:root{
    --main-bg-color:#bdc3c7;
    --color:black;
    
}

    #wrapper{
    display:grid;
}
html, body{
    font-family: 'Montserrat', sans-serif !important;
}

#particles-js{
    font-size: 40px;
    background: #bdc3c7;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  
    background: linear-gradient(to right, #2c3e50, #bdc3c7); 
    text-align:center;   
}
h1{
    font-size: 40px;
    background: #bdc3c7;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  
    background: linear-gradient(to right, #2c3e50, #bdc3c7); 
    text-align:center;   
}

header{
    background-color:var(--main-bg-color)
}
/* nav */
nav ul li{
display:inline;
list-style-type: none;
padding:20px;

}
nav ul li a{
    color:var(--color);
 
}
nav{
     text-align:center;
     padding-top:0;
     display:flex;
     color:black;
     background-color: white;
     display:flex;
}

h2{
    padding-top:20px;
    padding-left:5%;
}
.trend ul li{
    margin:20px;
    
}
/* Container */
.container{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    color:var(--color);
}
.container .line1 a{
    color:var(--color);
}
/* LINE */
.line1{
    padding-top:0;
    padding-bottom:0;
    padding-left:10px;
}


/* box 1 */
.Box1{
  display:grid;
  grid-template-columns:  1fr 1fr;
  padding-top:25px;
 padding-left:55px;
 padding-right: 55px;
 
}


li{
 list-style-type: square type b;
    padding:15px;
}
.Box1 li a{
    color:var(--color);
}
/* Grid Margins */
.weather li a h3{
    margin-bottom:30px;
}
.trend li a h3{
    margin-bottom:30px;
}
/* hover */
.trend>ul>li>a>img:hover{
    filter: blur(2px) brightness(80%);
    box-shadow: 05px 05px rgba(0,0,0,0.25), 05px 5px rgba(0,0,0,0.22);
    cursor: pointer;
}
.weather>ul>li>a>img:hover{
    filter: blur(2px) brightness(60%);
    box-shadow: 05px 05px rgba(0,0,0,0.25), 05px 5px rgba(0,0,0,0.22);
    cursor: pointer;
}
.container>.line1>a>img:hover{
     filter: blur(2px) brightness(60%);
    box-shadow: 05px 05px rgba(0,0,0,0.25), 05px 5px rgba(0,0,0,0.22);
    cursor: pointer;}
.wall1>img:hover{
    filter: blur(2px) brightness(60%);
    box-shadow: 05px 05px rgba(0,0,0,0.25), 05px 5px rgba(0,0,0,0.22);
    cursor: pointer;  
}
hr{
    color:var(--color);
}
/* wall */
.wall1{
    padding-top:30px;
    padding-left:30px;
    display:grid;
    grid-template-columns: 1fr 1fr;
}
.wall2{
    padding-top:30px;
    padding-left: 30px;
    display:grid;
    grid-template-columns: 1fr 1fr;
}
.wall1>h3{
    color:var(--color);
}

/* Slideshow */
.slideshow{
    width: 300px;
    height: 300px;
    position: relative;
    margin-bottom: 100px;
    display:grid;
    grid-template-rows: 1fr 1fr;
  
}

.slide{
    width: 100%;
    height:100%;
    position: relative;
    overflow: hidden;
}
.slide img{
    width: 100%;
    background-size: contain;
    height:100%;
}
#next{
    left:0;
    top:100px;
    position: relative;
    z-index: 100;
}
/* form */


#button:hover{
    color:var(--main-bg-color);
}
/* Footer */
footer{
    display:grid;
    background-color:var(--main-bg-color);
}
.footer{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin: 0 0 40px 40px;
}
.f1{
    margin: 30px;
    

}
footer .f1 ul li a{
    color:var(--color);
}
input{
width:40%;
}
.form{
    padding-right:50%;
    width:100%;
}
input{
    width:90%;
}
footer footer .f1 ul li a{
    color:#FFF;
}