@import url('https://fonts.googleapis.com/css?family=Rajdhani:500');

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

html, body {
    height:100%;
    background-image:url(../assets/collapsiblebg.jpg)
    
    
}

header {
    
   font-family: 'Rajdhani', sans-serif;
    color:white;
    font-size:128px;
    text-align:center;
    transition: all 0.3s ease-in;
      text-decoration:none;
}

header:hover {
      text-shadow: 2px 0px 20px #3ab3ff;
     
}

h1 {
    font-family: 'Rajdhani', sans-serif;
    color:white;
    font-size:48px;
}

nav {
    
    font-family: 'Rajdhani', sans-serif;
    font-size: 36px;
    text-align:center;
    color:white;
}

img {
    max-width: 100%;
    max-height: 100%;
    filter: grayscale(100%);
    transition: all 0.5s ease;
}

img:hover {
    filter: grayscale(0%);
}

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

    a:link {
        color:#3ab3ff;
        position:relative;
        text-decoration: none;
        transition: all 0.5s ease;
    }
    a:visited {
        color:darkgrey;
        
    }
    a:hover {
        color:#99d7ff;
        
    }
    a:active {
        color:blue;
    }

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

article {
    font-family: "Helvetica", sans-serif;
    background-color:#232323;
    color:white;
    width:50%;
    padding:20px;
    position:relative;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
}