:root{
    --l_cream: #fafaf5;
    --black: #000000;
    --white: #ffffff;
    --grey: #b4b4b4;
    --orange: rgb(255, 162, 0);
}

/* Mobile Phone */
html, body {
    margin: 0; padding: 0 0.2em;
    background-color: var(--l_cream);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 0.7em;
    max-width: 920px;
}

#intro .menu {
    display: block;
    float: right;
    float: right; margin: 1em 0.7em;
}

#intro a {color: var(--white); text-decoration: none;}
#intro header {
    height: 2.7em; width: 100%;
    float:inline-end;
    position: relative;
    color: var(--white);
    padding: 0; margin: 0;
    font-size: 1.5em;
}
#intro header img {
    float: left;
    padding: 0.3em;
    border-radius: 0.5em;
    margin: 0.3em auto 0 0.5em;
    height: 1.3em;
    width: auto;
}
#intro .name_logo {margin-top: -3em; height: 1.5em;}
#intro ul {
    float: right; height: 2em; align-items: center;
    margin: -1.8em 1.5em 0 0;
}
/* Menu toggle switch */
header ul{display: none;}
#intro header li{
    list-style-type: none;
    margin-right: 1.5em;
    padding: 0.3em;
}
#intro img {
    clear: both;
    position:static;
    width: 100%;
    height: auto;
    margin-top: -4.1em;
}.iimage { 
    content: url('stf/img/intro_image_portrait.jpg');
    width: 100%;
    height: 100%;
}
.project_name {
    margin: 0; padding: 0;
    font-size: 1.3em;
    color: var(--l_cream);
    position: absolute;
    top: 40%;
    text-align: center;
    width: 100%;
}
.project_name * {margin: 0;}
.project_name h1 {font-size: 2.5em;}
.project_name button {
    margin: 1em;
    background-color: var(--orange);
    border: none;
    border-radius: 0.3em;
    font-size: 1em;
    color: var(--white);
    padding: 0.3em 1em;
}
#intro {
    position: relative;
}

#features {
    width: 100%;
    height: 100%;
    min-height: 35em;
    background-color: var(--l_cream);
    text-align: center;
    padding: 0;
    margin: 1em 0 0 0;    
}#features .feature_heading {
    font-size: 2.5em;
}
.feature {
    width: fit-content;
    height: auto;
    margin: 3em 0; padding: 0;
    display: block;
}.feature:hover {background-color: var(--grey); cursor: grab;}
.feature img {
    width: 75%;
    height: auto;
    margin: 0 0 1em 0; padding: 0;
    border-radius: 1em;
}
.feature .desc {
    width: 75%;
    margin: auto;
    margin-bottom: 1em;
    padding: 0 0.5em;
}.feature p, .feature h3 {
    margin: 0;
    padding: 0 0.5em;
}.feature h3 {
    font-size: 1.8em;
}

#about {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 2em 0 0 0;
}#about h3 {
    font-size: 2.5em;
    margin: 0; padding: 0;
    color: var(--l_cream);
    padding: 0.5em;
    background-color: var(--black);
}#about .about {
    text-align: justify;
    padding: 0; margin: 0;
    width: 100%;
    height: fit-content;
}

#about .profile {padding: 1em; margin: 0;}
#about p {
    padding: 0.7em 2em; margin: 0; line-height: 1.7em;
}
#about img {
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
    margin: 0 0 0.7em 0; padding: 0 1em;
}
#about .profile .repo_link {
    color: var(--l_cream);
    text-decoration: none;
    background-color: var(--black);
    padding: 0.3em; border-radius: 0.35em;
    font-size: 0.8em;
}
video{
    width: 65%;
    height: auto;
    border-radius: 1em;
}


@media (min-width: 480px){
    html, body {
        margin: 0; padding: 0 0.1em;
        background-color: var(--l_cream);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 0.85em;
        width: 100%;
    }
}

@media (min-width: 640px){
    html, body {
        margin: 0; padding: 0 0.1em;
        background-color: var(--l_cream);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 0.95em;
        width: 100%;
    }
}

@media (min-width: 840px){
    html, body {
        margin: 0; padding: 0 0.1em;
        background-color: var(--l_cream);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 1.1em;
    }
    .iimage { 
        content: url('stf/img/intro_image.jpg');
        width: 100%;
        height: auto;
    }
}

/*
Tablets & iPads
@media (min-width: 920px){
    html, body {
        margin: 0; padding: 0 0.1em;
        background-color: var(--l_cream);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 1em;
        max-width: 1920px;
    }

    #intro .menu {display: none;}

    #intro a {color: var(--white); text-decoration: none;}
    #intro header {
        height: 2.7em; width: 100%;
        float:inline-end;
        position: relative;
        color: var(--white);
        padding: 0; margin: 0;
        font-size: 1.5em;
    }
    #intro header img {
        float: left;
        padding: 0.3em;
        border-radius: 0.5em;
        margin: 0.3em auto 0 0.5em;
        height: 1.3em;
        width: auto;
    }
    #intro .name_logo {margin-top: 1em; height: 1.5em;}
    #intro ul {
        float: right; height: 2em; align-items: center;
        margin: 1em;
    }
    Menu toggle switch
    header ul{display: flex;}
    #intro header li{
        list-style-type: none;
        margin-right: 1.5em;
        padding: 0.3em;
    }
    #intro img {
        clear: both;
        position:static;
        width: 100%;
        height: auto;
        margin-top: -4.1em;
    }
    .project_name {
        margin: 0; padding: 0;
        font-size: 1.5em;
        color: var(--l_cream);
        position: absolute;
        top: 40%;
        text-align: center;
        width: 100%;
    }
    .project_name * {margin: 0;}
    .project_name h1 {font-size: 2.5em;}
    .project_name button {
        margin: 1em;
        background-color: var(--orange);
        border: none;
        border-radius: 0.3em;
        font-size: 1em;
        color: var(--white);
        padding: 0.3em 1em;
    }
    #intro {
        position: relative;
    }

    #features {
        width: 100%;
        height: 100%;
        min-height: 35em;
        background-color: var(--l_cream);
        text-align: center;
        padding: 0;
        margin: 1em 0 0 0;    
    }#features .feature_heading {
        font-size: 2.5em;
    }
    .feature {
        width: 100%;
        height: auto;
        margin: 3em 0; padding: 0;
        display: flex;
    }.feature:hover {background-color: var(--grey); cursor: grab;}
    .feature img {
        width: 50%;
        height: auto;
        margin: 0; padding: 0;
    }
    .feature .desc {
        margin: auto;
        padding: 0 0.5em;
    }.feature p, .feature h3 {
        margin: 0;
        padding: 0 0.5em;
    }.feature h3 {
        font-size: 1.8em;
    }

    #about {
        width: 100%;
        text-align: center;
        padding: 0;
        margin: 2em 0 0 0;
    }#about h3 {
        font-size: 2.5em;
        margin: 0; padding: 0;
        color: var(--l_cream);
        padding: 0.5em;
        background-color: var(--black);
    }#about .about {
        text-align: justify;
        padding: 0; margin: 0;
        width: 100%;
        height: fit-content;
    }
   
    #about .profile {padding: 1em; margin: 0;}
    #about p {
        padding: 0.7em 2em; margin: 0; line-height: 1.7em;
    }
    #about img {
        width: 1.7em;
        height: 1.7em;
        border-radius: 50%;
        margin: 0 0 0.7em 0; padding: 0 1em;
    }
    #about .profile .repo_link {
        color: var(--l_cream);
        text-decoration: none;
        background-color: var(--black);
        padding: 0.3em; border-radius: 0.35em;
        font-size: 0.8em;
    }
}

*/

/* PC screen */
@media (min-width: 1024px){
    html, body {
        margin: 0; padding: 0 0.1em;
        background-color: var(--l_cream);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 1.2em;
        max-width: 1600px;
        width: 100%;
    }

    #intro .menu {display: none;}

    #intro a {color: var(--white); text-decoration: none;}
    #intro header {
        height: 2.7em; width: 100%;
        float:inline-end;
        position: relative;
        color: var(--white);
        padding: 0; margin: 0;
        font-size: 1.5em;
    }
    #intro header img {
        float: left;
        padding: 0.3em;
        border-radius: 0.5em;
        margin: 0.3em auto 0 0.5em;
        height: 1.3em;
        width: auto;
    }
    #intro .name_logo {margin-top: 1em; height: 1.5em;}
    #intro ul {
        float: right; height: 2em;
        align-items: center;
        margin: 1em;
        display: block;
    }
    /* Menu toggle switch */
    header ul{display: inline; float: right;}
    #intro header li{
        list-style-type: none;
        margin-right: 1.5em;
        padding: 0.3em;
        display: inline;
    }
    #intro img {
        clear: both;
        position:static;
        width: 100%;
        height: auto;
        margin-top: -4.1em;
    }
    .project_name {
        margin: 0; padding: 0;
        font-size: 1.5em;
        color: var(--l_cream);
        position: absolute;
        top: 40%;
        text-align: center;
        width: 100%;
    }
    .project_name * {margin: 0;}
    .project_name h1 {font-size: 2.5em;}
    .project_name button {
        margin: 1em;
        background-color: var(--orange);
        border: none;
        border-radius: 0.3em;
        font-size: 1em;
        color: var(--white);
        padding: 0.3em 1em;
    }
    #intro {
        position: relative;
    }

    #features {
        width: 100%;
        height: 100%;
        min-height: 35em;
        background-color: var(--l_cream);
        text-align: center;
        padding: 0;
        margin: 1em 0 0 0;    
    }#features .feature_heading {
        font-size: 2.5em;
    }
    .feature {
        width: 100%;
        height: auto;
        margin: 3em 0; padding: 0;
        display: flex;
    }.feature:hover {background-color: var(--grey); cursor: grab;}
    .feature img {
        width: 50%;
        height: auto;
        margin: 0; padding: 0;
    }
    .feature .desc {
        margin: auto;
        padding: 0 0.5em;
    }.feature p, .feature h3 {
        margin: 0;
        padding: 0 0.5em;
    }.feature h3 {
        font-size: 1.8em;
    }

    #about {
        width: 100%;
        text-align: center;
        padding: 0;
        margin: 2em 0 0 0;
    }#about h3 {
        font-size: 2.5em;
        margin: 0; padding: 0;
        color: var(--l_cream);
        padding: 0.5em;
        background-color: var(--black);
    }#about .about {
        text-align: justify;
        padding: 0; margin: 0;
        width: 100%;
        height: fit-content;
    }
   
    #about .profile {padding: 1em; margin: 0;}
    #about p {
        padding: 0.7em 2em; margin: 0; line-height: 1.7em;
    }
    #about img {
        width: 1.7em;
        height: 1.7em;
        border-radius: 50%;
        margin: 0 0 0.7em 0; padding: 0 1em;
    }
    #about .profile .repo_link {
        color: var(--l_cream);
        text-decoration: none;
        background-color: var(--black);
        padding: 0.3em; border-radius: 0.35em;
        font-size: 0.8em;
    }
}

@media (min-width: 1600px){
    html, body {
        margin: 0; padding: 0 0.1em;
        background-color: var(--l_cream);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 1.3em;
        /* max-width: 1920px; */
        width: 100%;
    }
}