:root {
    /* Primary */
    --sky: rgb(64,176,225); /* #40B0E1 */
    --ocean: rgb(41,122,173); /* #297AAD */
    --navy: rgb(26,79,112); /* #1A4F70 */
    --space: rgb(14,46,65); /* #0E2E41 */
    
    /* Secondary */
    --cloud: rgb(247,248,249); /* #F7F8F9 */
    --smoke: rgb(199,200,201); /* #C7C8C9 */
    --shadow: rgb(114,114,114); /* #727272 */
    --charcoal: rgb(51,51,51); /* #333 */
}
html { font-family: "europa", "helvetica", sans-serif; scroll-behavior: smooth; box-sizing: border-box; background-color: var(--space); }
body {
    margin:0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1000px;
	
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
	
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

@media screen and (max-width: 1000px) { /* Specific to this particular image */
    img.bg {
        left: 50%;
        margin-left: -500px;   /* 50% */
    }
}

.container { 
    height:100%; 
    width:100%;
    display: grid;
}

.content {
    margin: auto;
}

#fathomtechlogo {
    display: block;
    width:500px;
    height: auto;
    
    margin: 10px auto 4vh auto;
}
#fathomtechlogo::after, #footerLogo::after {
    content: "®";
    color: #fff;
    font-size: 16px;
    font-family: "helvetica", "arial", sans-serif;
    font-weight: normal;
    position: relative;
    float:right;
    bottom:40px;
    left:20px;
}
#footerLogo::after {
    left:12px;
    font-size:14px;
}

.boxcontainer{ 
    height:100%;
    width:100%;
    color: var(--charcoal);
    font-size: 1.8em;
    margin: auto auto 5vh auto;
}
.boxcontainer:after {
    content: "";
    display: table;
    clear: both;
}
.column {
    float: left;
    margin: 10px;
    padding: 15px;
}

a { cursor: pointer; color: var(--charcoal); text-decoration: none; }

#box1:hover, #box2:hover, #box3:hover, #box4:hover { box-shadow: 0 0 25px #ffffff4d; top:-15px; }

#box1, #box2, #box3, #box4 {
    display: inline-flex;
    position: relative;
    width: 275px;
    height: 275px;
    flex: 1 0 auto;
    background-color: var(--navy);
    border-radius:10px;
    box-shadow: 4px -4px 10px rgba(0,0,0,0.2);
    
    top: 0px;
    transition: top .5s ease, box-shadow .5s ease;
}

/*
#box1 {
    background: url('images/fathomreads_img.jpg');
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    color: white;
    text-shadow:0 0 10px var(--space);
}
*/

#box1 {
    background-image: linear-gradient(to right, var(--sky) , var(--sky));
    border-radius: 10px;
    color: white;
    text-shadow:0 0 10px var(--space);
}
#box2 {
    background-image: linear-gradient(to right, var(--sky) , var(--ocean));
    border-radius: 10px;
    color: white;
    text-shadow:0 0 10px var(--space)
} 

#box3 {
    background-image: linear-gradient(to right, var(--ocean) , var(--navy));
    border-radius: 10px;
    color: white;
    text-shadow:0 0 10px var(--space);
}

#box4 {
    background-image: linear-gradient(to right, var(--navy) , var(--space));
    border-radius: 10px;
    color: white;
    text-shadow:0 0 10px var(--space);
}


#br1, #br2, #br3 { display: none }



#indexfooter { margin: 24px 0; font-size: 18px; line-height: 1.5em; color: var(--cloud); text-align: center; width:100%; }
#indexfooter a { color: var(--cloud); text-decoration: none; }
#indexfooter a:hover { color: var(--cloud); text-decoration: underline }

#indexfooter #lower { bottom:0;left: 0;position:fixed;width: 100%; }
#indexfooter #footerbr { display: none }

@media (max-width: 1325px) {
    #box1:hover, #box2:hover, #box3:hover, #box4:hover { top:-5px; }
    #br2, br3 { display: block; }
    #fathomtechlogo { margin: 5vh auto 3vh auto }
    
    #indexfooter { margin: 5vh 0 3vh 0 }
    #indexfooter #lower { bottom:inherit;left: inherit;position:relative;width: inherit; }
    #indexfooter #footerbr { display: block }
}

@media (max-width: 700px) {
    #box1:hover, #box2:hover, #box3:hover, #box4:hover { top: 0px; }
    #box1, #box2, #box3, #box4 { width: 92%; margin: 2%; padding: 2%; }
    
    #br1, #br2, br3 { display: block; }
    #fathomtechlogo { margin: 5vh auto 3vh auto; width: 90%; padding: 2%;}
    
    #indexfooter { margin: 5vh 0 3vh 0; width: 100%;  }
}