/*====================================*/
/*              HOME.CSS              */
/*           KG 2020-11-03            */
/*====================================*/

*{
    /*Keep it inside 100%*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

*:focus{outline:0; }

html, body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

body{
    /*background: url("./sunflowers.jpg") no-repeat fixed center;*/
    /*background-size: cover;*/
/*    background: linear-gradient(0deg, seagreen 0%, cadetblue 100%);*/
    background-color: #222;
    font-family: 'Quicksand', sans-serif;
}

#home{
    padding:12px;
    width:100%;
    max-width:800px;
    min-height: 100%;
    margin:0 auto;
/*    background-color: rgba(0,0,0,0.5);*/
    color: #f1f1f1;
    display: none;
}

h1{
    font-size: 2.5rem;
}

h2{
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 4px;
    border-bottom: 1px solid #f1f1f1;
}

a.link{
    display: grid;
    grid-template-columns: 1fr 64px;
    grid-gap: 8px;

    height: 72px;
    padding: 12px;
    margin: 8px 0;
    background-color: rgba(255,255,255,0.6);
    color: black;

    text-decoration: none;

    cursor: pointer;
}

a.link span{
    margin: auto 0;
    font-size: 1.5rem;
}

a.link .material-icons{
    font-size: 48px;
    margin: auto;
}

@media (hover: hover) and (pointer: fine) {
    a.link:hover{background-color: rgba(255,255,255,0.8); }
}