/*Colours: 7AE7C7, D6FFB7, FFF689, 2CA6A4, 172433*/


.other.content {
    background-color: #7AE7C7;
    color: #FFF689;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 5em;
    padding: 0;
}

#other-backdrop{
    display: none;
}

#other-grid{
    display: grid;
    grid-template-columns: 20fr 20fr 20fr 20fr;
    grid-template-rows: 35% 30% 35%;

}

#svg_filtered_img{
    background-repeat: no-repeat;
    content: "";
    background-size: cover;
    filter: url(#ferns);
    z-index: 0;
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-end: 4;
    background-image:url('./hobby-backdrop-img.jpg')

}

.svg-filtered-side-img{
    filter: url(#ferns);
    grid-column: 1;
    grid-row: 1 / span 4;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}

/*4 Images for the hobby paghes*/
#macro-img{background-image:url('macro-sideimg.JPG')}
#UVIR-img{
    background-image:url('IR-sideimg.jpg')
}
#physarum-img{background-image:url("physarum-sideimg.jpg")}
#web-design-img{background-image:url("design-sideimg.JPG")}


#other-back-nav{
    color: #FFF689;
    border-color: #FFF689;;
    font-size: 0.3em;
    grid-row: 1;
    grid-column: 4;
    justify-self:  end;
    align-self: start;
    margin: 2em;
    z-index: 1;
    /* width: ;*/
}

.other #other-back-nav:hover{
    color: #172433;
    border-color: #172433;
}

#other-header{
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 5;
    align-self: center;
    justify-self: center;
    z-index: 1;
}

#other-big-header{
    font-size: 1em;
    font-family: 'Martel', serif;
    margin: 0.1em

}

#other-small-header{
    font-size: 0.4em;
}

.hobby-box{
    font-size: 2.6vw;
    z-index: 1;
    justify-self: center;
    align-self: center;
    width: 16vw;
    height: 25vw;
    padding: 0.3em;
    border: 0.2em solid #FFF689;
    margin: 0.7em;
    grid-row: 2 / span 2;
    /*test*/

}

.hobby-box-caption{
    position: relative;
    top: 75%;
}


.hobby-box:hover{
    color: #172433;
    background-color: #FFF689;
    border-color: #FFF689;
    transition: background-color 0.5s, color 0.5s;
}

#box1{grid-column: 1}

#box2{grid-column: 2}

#box3{grid-column: 3}

#box4{grid-column: 4}

.hobbyGrid{
    display: grid;
    grid-template-columns: 50fr 8fr 34fr 8fr;
    grid-template-rows: 10fr 15fr 50fr 10fr;
}

.toTopButton{
    grid-row: 1;
    grid-column: 4;
    color: #FFF689;
    border-color: #FFF689;;
    border-width: 0.1em;
    font-size: 0.3em;
    justify-self:  end;
    align-self: start;
    margin: 1em;
    text-align: center;
    z-index: 1;
}


.hobby-title{
    grid-row: 2;
    grid-column: 3;
    font-size: 0.8em;
    z-index: 1;
}

.other .toTopButton:hover{
    color: #172433;
    border-color: #172433;
}

.hobby-content{
    grid-row: 3;
    grid-column: 3 ;
    z-index: 1;
}

.hobby-description{
    font-size: 0.3em;
    margin-top: 0.2em;
}

.hobby-links{
    grid-row: 3;
    grid-column-start: 3;

    grid-column-end: 4;
    align-self: start;
}

.hobby-link-item{
    display: inline-block;
    margin: 0.1em;
    margin-right: 0.3em;
    padding: 0.1em;
    font-size: 0.4em;
    border: 0.18em solid #FFF689;
}

.hobby-link-item:hover{
    color: #172433;
    border-color: #172433;
    transition: border-color 0.3s, color 0.3s;
}

.hobby-links a{
    color: #FFF689;
}

.hobby-links a:visited{
    color: #FFF689;
}


@media only screen  and (min-width:320px) and (max-device-width : 1223px) {
    #other-nav {
        grid-row: 3;
        grid-column-start: 1;
        grid-column-end: 4;
    }

    #other-back-nav {
        font-size: 0.8em;
        grid-column: 2 / span 2;
        align-self: start;
        justify-self: center;
        margin: 1em;
    }

    #other-header{
        grid-row: 2;
    }

    #svg_filtered_img{
        grid-row-end: 6;

    }

    #other-grid{
        grid-template-columns: 20fr 20fr 20fr 20fr;
        grid-template-rows: 16fr 4fr 30fr 30fr;
    }

    #other-big-header{
        font-size: 0.7em;
        margin-left: 1em;
        margin-right: 1em;
        text-align: center;
    }

    #other-small-header{
        display: none;
    }

    .hobby-box{
        font-size: 5.7vw;
        width: 32vw;
        height: 46vw;
    }

    #box1 {
        grid-row: 3;
        grid-column: 1 / span 2
    }

    #box2 {
        grid-row: 3;
        grid-column: 3 / span 2
    }

    #box3 {
        grid-row: 4;
        grid-column: 1 / span 2
    }

    #box4 {
        grid-row: 4;
        grid-column: 3 / span 2
    }

    .navigator.toTopButton, .toTopButton i{
        font-size: 0.8em;
        grid-column-start: 1;
        grid-column-end: 5;
        justify-self: center;
        border-color: #FFF689;
    }

    .hobbyGrid{
        grid-template-rows: 10fr 10fr 55fr 10fr;
    }

    .hobby-box{
        border-width: 0.28em;
    }

    .hobby-title{
        grid-column: 1 /span 4 ;
        justify-self: center;
    }

    .hobby-content{
        grid-row-start: 3;
        grid-row-end: 5;
        justify-self: center;
        grid-column: 1 / span 4 ;
        margin-left: 1em;
        margin-right: 1em;
    }

    .hobby-description{
        font-size: 0.6em;
        text-align: justify;
        margin-top: 1em;
    }

    .hobby-box-caption{
        top: 70%
    }

    .hobby-links{
        margin-top: 0.7em;
    }

    .hobby-link-item, .hobby-link-item i{
        font-size: 0.7em;
    }

    .svg-filtered-side-img{
        grid-column: 1 /span 4;
        grid-row: 1 / span 2;
        border-bottom: 0.6em solid #FFF689;
    }



}