body {
    font-family: 'Open Sans', sans-serif;
    background-color: rgb(20, 20, 20);
    color: white;

    margin: 0;
    padding: 0;
}

h1 {
    margin: 0;
}

header {
    padding: 1%;
    width: 60%;
    margin: auto;
}

nav {
    font-size: larger;
    border-bottom: 1px solid rgb(255, 255, 255);
    border-top: 1px solid rgb(255, 255, 255);
}

nav img {
    border-radius: 50%;
    max-width: 6%;
    height: auto;
    border: 2px solid white;
}

nav a {
    text-decoration: none;
    color: white;
    font-size: larger;
}

main {
    width: 60%;
    margin: auto;
}



.cent {
    text-align: center;

}

.fab {
    color: white;
    text-decoration: none;
}


footer {
    border-top: 1px solid rgb(68, 68, 68);
}

footer .fab {
    border-top: 1px solid rgb(68, 68, 68);
    padding: 20px;
}

.back-to-top {
    font-size: small;
}

/* 
    ============================

            LINKS PAGE

    ============================
*/
.common_link {
    padding-left: 3%;
}


/* 
    =================================

            PROJECTS PAGE

    =================================
*/
.project {
    border-top: 2px solid rgb(50, 50, 50);
    padding-bottom: 2%;
    padding-top: 2%;
}

.project-articles {
    list-style: none;
}

.project-title * {
    display: inline;
}

.project-link {
    width: 20%;
}

.project p {
    text-align: justify;
}

.project-title h3::after {
    content: " | ";
}

.project-single-image-container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
}

/*
    Project images
*/
.project img, .project-single-image-container img {
    margin: 1%;
    transition: 1s;
    width: 100%;
    height: auto;
    border: 1px solid white;
}

.project-double-image-container img {
    width: 45%;
}

.project-single-image-container .project-images {
    margin-left: 5%;
}


/*
    P R O J E C T 
    L I S T
*/
#project-list {
    font-family: monospace, monospace, monospace;
}

#project-list a {
    color: rgb(32, 130, 241);
    text-decoration: none;
}

/*
    P R O J E C T 
    T A G S
*/
.selected-tag {
    text-decoration: underline;
    font-weight: bold;
}

.project-tag:hover,
#project-list a:hover,
.project-tag-filter:hover {
    cursor: pointer;
    text-decoration: underline;
}

.project-desktop {
    display: inherit;
}

.project-mobile {
    display: none;
}

/* 
    ============================

            FUN 

    ============================
*/
.fun-content {
    width: 80%;
    margin: auto;
}

canvas {
    border: 1px solid white;
}

#circuitcanvas {
    width: 1600px;
    height: 600px;
}

/* 
    =================================

            GENERAL CSS

    =================================
*/
.inline * {
    display: inline;
}

@media only screen and (max-width: 1600px) {

    header {
        width: 80%;
    }

    nav {
        font-size: large;
        border-bottom: 1px solid rgb(255, 255, 255);
    }

    nav a {
        font-size: larger;
    }

    nav img {
        display: none;
    }

    main {
        width: 85%;
        margin: auto;
    }

    footer {
        width: 80%;
    }

    footer .fab {
        padding: 20px;
    }

    /* 
        ============================
    
                LINKS PAGE
    
        ============================
    */
    .common_link {
        padding-left: 1%;
    }
}

@media only screen and (max-width: 1024px) {

    header {
        width: 85%;
    }

    nav {
        font-size: large;
        border-bottom: 1px solid rgb(255, 255, 255);
    }

    nav a {
        font-size: larger;
    }

    main {
        width: 95%;
        margin: auto;
    }

    footer {
        width: 80%;
    }

    footer .fab {
        padding: 20px;
    }

    /* 
        ============================
    
                LINKS PAGE
    
        ============================
    */
    .common_link {
        padding-left: 1%;
    }

    /* 
        =================================
    
                PROJECTS PAGE
    
        =================================
    */
    .project-link {
        width: 33%;
    }
    .project .img-secondary {
        display: none;
    }

    .project .img-primary {
        width: 70%;
    }

    .project-single-image-container {
        display: block;
    }
}

@media only screen and (max-width: 1024px) { 
    .project-link {
        width: 50%;
        font-size: small;
    }

    .project-tag {
        font-size: small;
    }
}


.hidden {
    display: none;
}