body {

        border: 10px solid white;

     }

     

     

     /*start with border for menu, title, and social media*/

     .navbar {

        overflow: hidden;

        background-color: rgb(15, 131, 233);

        height: 160px;

      }

      

      .navbar a {

        float: left;

        font-size: 16px;

        color: white;

        text-align: center;

        padding: 14px 16px;

        text-decoration: none;

      }

      

      .dropdown {

        float: left;

        overflow: hidden;

      }

      

      .dropdown .dropbtn {

        font-size: 30px;  

        border: white 2px solid;

        outline: none;

        color: white;

        padding: 14px 16px;

        background-color: inherit;

        font-family: inherit;

        margin: 0;

        margin-top: 50px;

        margin-left: 50px;

      }

      

      .navbar a:hover, .dropdown:hover .dropbtn {

        background-color: white;

      }

      .navbar a:hover, .dropdown:hover .dropbtn {

        color: rgb(15, 131, 233);

      }



      

      .dropdown-content {

        display: none;

        position: absolute;

        background-color: rgb(15, 131, 233);

        min-width: 160px;

        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

        z-index: 1;

        margin-left: 50px;

      }

      

      .dropdown-content a {

        float: none;

        color: white;

        padding: 12px 16px;

        text-decoration: none;

        display: block;

        text-align: left;

        height: 70px;

        margin-top: 5px;



      }

      

      .dropdown-content a:hover {

        background-color: white;

      }

      

      .dropdown:hover .dropdown-content {

        display: block;

      }

      .dropdown:hover .dropdown-content {

        color: rgb(15, 131, 233);

      }



/*here i will place each webpage's title*/

h1{

    color: white;

    font-size: 50px;

    margin-left:30%;

    margin-right: auto;

    margin-top: 50px;

}



#thevault{

    color: rgb(15, 131, 233);

    border: white 2px solid;

    padding: 10px;

    font-size: 40px;

    margin-left:40%;

    margin-right: auto;

    margin-top: 60px;

}



#bobbysmessage {

    color: rgb(15, 131, 233);

    border: white 2px solid;

    padding: 10px;

    font-size: 40px;

    margin-left:35%;

    margin-right: auto;

    margin-top: 60px;

}

/*end of each webpage's title*/



/*styling for my social media icons on the top right*/

.youtubeicon {

    color: red;

    font-size: 50px;

    position: fixed;

    top: 30px;

    right: 30px;

}

.youtubeicon :hover {

    color: rgb(158, 184, 231);

}



.facebookicon {

    color: blue;

    font-size: 50px;

    position: fixed;

    top: 90px;

    right: 30px;

}

.facebookicon :hover{

    color: rgb(158, 184, 231);

}



.twittericon {

    color: blue;

    font-size: 50px;

    position: fixed;

    top: 30px;

    right: 110px;

}

.twittericon :hover{

    color: rgb(158, 184, 231);

}

.instagramicon {

    color: blue;

    font-size: 50px;

    position: fixed;

    top: 90px;

    right: 110px;

}

.instagramicon :hover{

    color: rgb(158, 184, 231);

}

/*end styling for social media icons*/



/*slideshow css coding*/

* {box-sizing: border-box}

      body {font-family: Verdana, sans-serif; margin:0}

      .mySlides {display: none}

      img {vertical-align: middle;}

      

      /* Slideshow container */

      .slideshow-container {

        max-width: 600px;

        position: relative;

        margin: auto;

        margin-top: 30px;



      }

      

      /* Next & previous buttons */

      .prev, .next {

        cursor: pointer;

        position: absolute;

        top: 50%;

        width: auto;

        padding: 16px;

        margin-top: -22px;

        color: white;

        font-weight: bold;

        font-size: 18px;

        transition: 0.6s ease;

        border-radius: 0 3px 3px 0;

        user-select: none;

      }

      

      /* Position the "next button" to the right */

      .next {

        right: 0;

        border-radius: 3px 0 0 3px;

      }

      

      /* On hover, add a black background color with a little bit see-through */

      .prev:hover, .next:hover {

        background-color: rgba(0,0,0,0.8);

      }

      

      /* Caption text */

      .text {

        color: #f2f2f2;

        font-size: 15px;

        padding: 8px 12px;

        position: absolute;

        bottom: 8px;

        width: 100%;

        text-align: center;

      }

      

      /* Number text (1/3 etc) */

      .numbertext {

        color: #f2f2f2;

        font-size: 12px;

        padding: 8px 12px;

        position: absolute;

        top: 0;

      }

      

      /* The dots/bullets/indicators */

      .dot {

        cursor: pointer;

        height: 15px;

        width: 15px;

        margin: 0 2px;

        background-color: #bbb;

        border-radius: 50%;

        display: inline-block;

        transition: background-color 0.6s ease;

      }

      

      .active, .dot:hover {

        background-color: #717171;

      }

      

      /* Fading animation */

      .fade {

        animation-name: fade;

        animation-duration: 1.5s;

      }

      

      @keyframes fade {

        from {opacity: .4} 

        to {opacity: 1}

      }

      

      /* On smaller screens, decrease text size */

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

        .prev, .next,.text {font-size: 11px}

      }

/*end slideshow css coding*/



/*start bottom social medias code*/

.bottomsocialmedias {

    border: white 2px solid;

    background-color: rgb(15, 131, 233);

    display: flex;

    height: 70px;

    border-radius: 15px;

    width: 700px;

    margin-left: auto;

    margin-right: auto;

    margin-top: 30%;

}



.socialiconbottom {

    color: red;

    font-size: 50px;

    margin: auto;

    padding-top: 10px;

}

.socialiconbottom :hover {

    color: white;

}



.socialiconbottom1 {

    color: white;

    font-size: 50px;

    margin: auto;

    padding-top: 10px;

}

.socialiconbottom1 :hover{

    color: blue;

}



.socialiconbottom2 {

    color: blue;

    font-size: 50px;

    margin: auto;

    padding-top: 10px;

}

.socialiconbottom2 :hover{

    color: white;

}

.socialiconbottom3 {

    color: blue;

    font-size: 50px;

    margin: auto;

    padding-top: 10px;

}

.socialiconbottom3 :hover{

    color: white;

}

/*end bottom social medias*/



/*styling for tweet subtitle*/

h2 {

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    color: rgb(15, 131, 233);

    border: rgb(15, 131, 233) 5px solid;

    background-color: white;

    width: fit-content;

    padding: 5px;

    border-radius: 15px;

    margin-left: 90px;

}



#youtubecurrent {

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    color: rgb(15, 131, 233);

    border: rgb(15, 131, 233) 5px solid;

    background-color: white;

    width: fit-content;

    padding: 5px;

    border-radius: 15px;

    margin-right: 170px;

}



/*styling for Bobby's embedded tweet*/

#embedtweet {

    border: rgb(15, 131, 233) 8px solid;

    padding: 5px;

    width: 500px;

    margin-bottom: 20px;

}



@media (max-width: 600px) {

    #embedtweet{

        max-width: 70%;

    }

}



/*flex and style container holding current content for twitter and youtube*/

#thecurrent {

    display: flex;

    justify-content: space-between;

}



#currents {

    display:inline-flex;

    justify-content: space-between;

    flex-direction: row;

    flex-wrap: wrap;

}



/*style for embedded youtube videos border*/

#embedyoutube {

    border: rgb(15, 131, 233) 8px solid;

    padding: 5px;

    width: 600px;

    margin-bottom: 20px;

    margin-left: 40px;

    text-align: center;

    height: fit-content;

}



@media (max-width: 600px) {

    #embedyoutube {

        max-width: 70%;

    }

}



/*here i will style the box for the description of the vault on the vault page*/

.description {

    border: rgb(15, 131, 233) 8px solid;

    padding: 8px;

    color: black;

    height: fit-content;

    width: 500px;

    margin-top: 30px;

    margin-left: 50px;

    line-height: 40px;

    background-color: aliceblue;

    font-family:Georgia, 'Times New Roman', Times, serif;

    font-size: large;

    text-align: center;



}



/*style vault webpage image*/

.vaultwebpageimage {

    max-width: 1000px;

    text-align: center;

    margin-left: 8%;

    margin-right: auto;

    margin-top: 30px;

}



@media (max-width: 1000px) {

    .vaultwebpageimage {

        max-width: 80%;

    }

}



.vaultwebpageflex {

    display:inline-flex;

    justify-content: space-between;

    flex-direction: row;

    flex-wrap: wrap;

}



#vaultembed {

    border: rgb(15, 131, 233) 8px solid;

    padding: 5px;

    width: 600px;

    margin-bottom: 20px;

    margin-left: 40px;

    text-align: center;

    height: fit-content;

    margin-top: 30px;



}



@media (max-width: 600px) {

    #vaultembed {

        max-width: 70%;

    }

}



/*styling ravens pic*/

#ravenspic {

    width: 470px;

}

/*styling ravens pic*/





.oriolesfont {

    color: black;

    height: fit-content;

    width: 500px;

    margin-top: 30px;

    margin-left: 50px;

    line-height: 40px;

    background-color: aliceblue;

    font-family:Georgia, 'Times New Roman', Times, serif;

    font-size: large;

}



/*styling orioles pic*/

#oriolespic {

    width: 450px;

}

/*styling orioles pic*/



/*styling bobby wbal welcome pic*/

#bobbywbal {

    width: 470px;

}

/*styling bobby wbal welcome pic*/





/*stylinlg contact container for last page*/

.contactcontainer {

    border: rgb(15, 131, 233) 8px solid;

    padding: 8px;

    text-align: center;

    margin-left: auto;

    margin-right: auto;

    margin-top: 30px;

}