body{
    background-color: bisque;
    font-family: Arial, Helvetica, sans-serif;
}

#header{
    display: flex;
    justify-content: space-between;
    background-color: white;
    padding-top:10px;
}

#nav{
    display:flex;
    font-size:200%;
    justify-content: space-around;
    padding-top:10px;
}

div{
    margin-left:10px;
    margin-right:10px;
}

.noline{
    text-decoration: none;
    color:black;
}

.no_button_line{
    text-decoration: none;
    color:black
}

img{
    width: 300px;
}

#mid{
    display:flex;
    justify-content:center;
    background-color: #f2f2f2;
    padding:30px;
    padding-top:120px;
    padding-bottom:120px;
}

#portrait{
    width: 200px;
    border:4px brown solid;
}

h1{
    font-size:40px;
}

#desc{
    width:450px;
    font-size: 120%;
}

#button{
    display: flex;
}

#read{
    font-weight: bold;
    background-color:lightblue;
    padding:20px;
    margin-top:20px;
    border-radius: 15px;
    display:flex;
    justify-content: center;
    margin-right:20px;
}

#link{
    font-weight: bold;
    background-color:lightgreen;
    padding:20px;
    margin-top:20px;
    border-radius:15px;
    display:flex;
    justify-content: center;
}

#video_info{
    background-color: white;
    padding:10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-content: space-around;
    text-align: center;
}

#personal_vid{
    margin-bottom:20px;
}

#org_container{
    margin:0px;
}

#organizations,#org_info, #present_info{
    background-color: white;
}

#organizations{
    display:flex;
    justify-content: center;
}

#present_info{
    display:flex;
    flex-direction:row;
    justify-content: space-around;
    padding-bottom: 20px;
}

#present_info div, #org_info div{
    display:flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#org_info{
    padding-top:15px;
    padding-bottom: 20px;
    padding:20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-content: space-around;
    flex-wrap: wrap;
    font-size:small;
}

.txt{
    justify-content: center;
    margin-top:10px;
}

#shore, #hs{
    text-align: center;
}

footer{
    background-color: #f2f2f2;
    margin-left:10px;
    margin-right:10px;
    padding:10px;
    text-align:center;
}

@media(max-width:1030px){
    body{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #header{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #header #logo a{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #logo img, .images img{
        width:75%;
    }
    
    #nav{
        margin:0px;
    }

    #nav div{
        font-size:25%;
        text-align: center;
        font-weight: bold;
        margin:5px;
    }

    #mid{
        display:flex;
        flex-direction: column;
        align-items: center;
        padding:0px;
        padding-top:60px;
        padding-bottom:30px;
    }

    #video_info{
        width:89%;
        background-color: white;
        padding:10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .YT{
        width:88%;
        height:88%;
    }
    
    #personal_vid{
        margin:0px;
        margin-bottom:20px;
    }

    #txt{
        display:flex;
        flex-direction: column;
        align-items: center;
    }

    #desc{
        display:flex;
        flex-direction: column;
        align-items: center;
        width:80%;
        text-align:center;
    }

    #name{
        display:flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width:50%
    }

    h1{
        font-size: 30px;
    }

    #button{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #read{
        margin-right: 0px;
    }

    #present_info{
        flex-direction: column;
    }

    #org_container{
        display: flex;
        flex-direction: column;
        margin:0px;
    }

    .images, .images a{
        display: flex;
        flex-direction: column;
        margin-left:0px;
        align-items: center;
        padding-bottom:10px;
    }

    #az{
        margin-top: 30px;
    }
    
    #rise{
        margin-top:20px;
    }

    #asc{
        margin-top: 40px;
    }

    #org_info div{
        text-align: center;
        font-size:85%;
        margin:0px;
    }

    #org_info{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    footer{
        display: flex;
        flex-direction: column;
        font-size: 50%;
    }
}