body{
    background-color: rgb(119,136,153);
    color: black;
    margin: 0;
    font-family: Copperplate, Papyrus, fantasy;
}

main{
    grid-column: 2 / -2;
    grid-row: 2 / 4;
    background-image: linear-gradient(to top, #209cff 0%, #68e0cf 100%);
    text-align: center;
}

#wrapper{
    display: grid;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
}

nav{
    background-color: rgb(119,136,153);
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

nav ul{
    display: flex; 
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

nav ul li{
    width: 100%;
}

nav ul li a{
    width: 80%;
    text-decoration: none;
    color: black;
    padding: 10px;
    display: block;
}

nav a:hover{
    background-image: linear-gradient(to top, #209cff 0%, #68e0cf 100%);
}

#title {
    grid-column: 2 / -1;
    grid-row: 1 / 2;
    background-color: rgb(119,136,153);
    text-align: center;
    font-size: 1.5rem;
    color: black;
}

.portrait {
    float: right;
    width: 375px;
}

p {
    font-size: 1.25rem;
}

.row {
    display: flex;
}
  
.column {
    flex: 50%;
}

#courses{
    font-size: large;
    text-align: center;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

footer {
    grid-row: 3 / 5;
}

.tech{
    float: right;
    width: 340px;
}

#download {
    padding: 35px;
    text-align: center;
}

@media screen and (max-width:320px) {
    #title{
        float: right;
        font-size: small;
        padding-left: 25px;
    }

    .portrait{
        float: none;
    }

    .tech{
        float: none;
    }
}

@media screen and (min-width:320px) and (max-width:640px) {
    #title{
        float: right;
        font-size: medium;
        padding-left: 55px;
    }

    .portrait{
        float: none;
    }

    .tech{
        float: none;
    }
}