* {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
} /* Font family applied to all text*/
@media all and (min-width:710px) {
.container {
    display: grid;
    grid-template-columns: 300px auto;
    grid-template-areas:
    'nav main'
    'footer';
}
main {
    padding-left: 20px;
    margin-left: 0px;
    min-width: 450px;
}
.keyskills {
    margin-bottom: 10px;
    margin-top: 15px;
    background-color: #26408B;
    text-align: center;
    font-size: 1.5em;
}

.boldtext {
    font-weight: bold;
    list-style: none;
}

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

.email:hover {
    text-decoration: none;
    color: blue;
}

.alignment {
    padding-left: 100px;
}

hr {
    border: solid 1px #26408B;
}

nav {
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1a5599+0,207cca+50,98c2e2+100 */
    background: rgb(26,85,153); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(26,85,153,1) 0%, rgba(32,124,202,1) 50%, rgba(152,194,226,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(26,85,153,1) 0%,rgba(32,124,202,1) 50%,rgba(152,194,226,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(26,85,153,1) 0%,rgba(32,124,202,1) 50%,rgba(152,194,226,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a5599', endColorstr='#98c2e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    list-style: none;
    padding: 0px;
    margin: 0px;
    color: white;
    }
    #addpadding {
        padding-left: 15px;
        padding-right: 20px;
        padding-bottom: 3px;
        text-align: justify;
    }
.mainphoto {
    margin-top: 20px;
    width: 200px;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mainphoto:hover {
    box-shadow: 0 0 6px 6px rgba(5, 248, 228, 0.5);
}
svg {
    display: block;
    width: 25%;
    padding:10px;
}
.icons {
    display: flex;
}
.name {
        margin-bottom: 0;
        text-align: left;
        font-size: 5rem;
     }
.name2 {
    margin-bottom: 0;
    text-align: left;
    font-size: 3rem;
    font-style: italic;
}
footer {
        text-align: center;
    }
} /* End of first media querry prapared for screen sizes over 710px basicly all computer browsers*/

  @media all and (max-width:710px) {
    .container {
        display: grid;
        grid-template-columns: auto;
        grid-template-areas:
        'nav'
        'main'
        'footer';
        }
        main {
            padding-left: 0px;
            margin-left: 0px;
            min-width: 400px;
        }
    .keyskills {
        margin-bottom: 10px;
        margin-top: 15px;
        background-color: #26408B;
        text-align: center;
        font-size: 1.5em;
    }
    .boldtext {
        font-weight: bold;
        list-style: none;
    }
    .email {
        text-decoration: none;
        color: white;
    }
    .email:hover {
        text-decoration: none;
        color: blue;
    }
    .alignment {
        padding-left: 40px;
        padding-right: 10px;
    }
    hr {
        border: solid 1px #26408B;
    }
    nav {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1a5599+0,207cca+50,98c2e2+100 */
        background: rgb(26,85,153); /* Old browsers */
        background: -moz-linear-gradient(-45deg, rgba(26,85,153,1) 0%, rgba(32,124,202,1) 50%, rgba(152,194,226,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg, rgba(26,85,153,1) 0%,rgba(32,124,202,1) 50%,rgba(152,194,226,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg, rgba(26,85,153,1) 0%,rgba(32,124,202,1) 50%,rgba(152,194,226,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a5599', endColorstr='#98c2e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        list-style: none;
        padding: 0px;
        margin: 0px;
        color: white;
        }
    #addpadding {
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 3px;
            text-align: justify;
    }
    .mainphoto {
        margin-top: 20px;
        width: 200px;
        border-radius: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .mainphoto:hover {
        box-shadow: 0 0 6px 6px rgba(5, 248, 228, 0.5);
      }
    svg {
        display: block;
        width: 20%;
        padding: 20px 20px 20px 40px;
    }
    .icons {
        display: flex;
    }
    .name {
        margin-bottom: 0;
        text-align: center;
        font-size: 3rem;
     }
    .name2 {
        margin-bottom: 0;
        text-align: center;
        font-size: 2rem;
        font-style: italic;
    }
    .righth2 {
        padding-left: 30px;
    }
    footer {
        text-align: center;
    }
} /* End of second media querry prepared for screen sizes below 710px- fit most mobilephones */