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

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Helvetica", sans-serif;
}

html, body {
    height:100%;
}

.logicword {
    font-family:'Rajdhani', sans-serif;
}

a:link {
    position:relative;
    color:skyblue;
    text-decoration: none;
    transition: all 0.5s ease;
}

a:visited {
    color:skyblue;
    text-decoration:none;
}

a:hover {
    color:lightpink;
    
}

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

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

#s1 {
    background:url(../assets/subtlebg.png) repeat fixed center center;
    position:relative;
    width:100%;
    height:100%;
    color:white;
    font-size:50px;
    
}

    #s1 article {
        /*    this is the stuff INSIDE the background
        Parent: RELATIVE
        Child: ABSOLUTE
        so this article is absolute
        */
    
        position:absolute;
       text-align:center;
        
            top: 50%; 
    transform: translateY(-50%);
        
        padding:20px;
        left: 0;
        right: 0;
        margin: auto;
            width:50%;
        height:50%;
    
}

#s2 {
    background-color:midnightblue;
    position:relative;
    width:100%;
    height:100%;
    color:white;
    font-size:50px;
}

    #s2 article {
/*    this is the stuff INSIDE the background */
        position:absolute;
       text-align:center;
        
            top: 50%; 
    transform: translateY(-50%);
        
        padding:20px;
        left: 0;
        right: 0;
        margin: auto;
            width:50%;
        height:50%;
}


header, p {
    margin:10px;
    padding:10px;
}