@font-face {
    font-family:'Bradley';
    src:url(bradhitc.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

body {
    background-color:#EBF7FF;
    font-family: 'Poiret One', cursive;
    text-align:center;
}

nav {
    background-color:#A5DCFF;
    border-bottom:#48B7FF solid 5px;
    margin-bottom:5px;
    padding:10px;
    text-align:center;
}

a {
    font-size:large;
}

footer {
    background-color:#A5DCFF;
    border-top:#48B7FF solid 5px;
    margin-top:5px;
    padding:2%;
    text-align:center;
}

button {
    background-color:#48B7FF;
    border-color:#A5DCFF;
    border-radius:15px;
    font-family:'Bradley';
    font-size:large;
    margin:auto;
    padding:10px;
    transition-duration:0.4s;
}

button:hover {
    background-color:#A5DCFF;
    border-color:#48B7FF;
    opacity:0.8;
}

.gallery {
    width:90%;
}

/* div containers */

#banner, #hamburger {
    width:100%;
}

#hamburger {
    display:none;
}

#gallery {
    background-color:#A5DCFF;
    border:#48B7FF solid 3px;
    font-family:'Bradley';
    clear:both;
    width:100%;
}

#gallery:after {
    content:'';
    display:block;
    clear:both;
}

#insta {
    float:right;
}

/* specific ids */

#buttondiv {
    width:100%;
}

#travelLogo {
    width:5%; 
    max-width:50px;
}

#countriesVisited {
    width:60%;
}

#instaLogo {
    width:3%;
    max-width:30px;
}

#gallery div {
    width:25%;
}

#firstColumn {
    float:left;
}

#secondColumn {
    float:left;
}

#thirdColumn {
    float:left;
}

#fourthColumn {
    float:left;
}

/* On screens that are 850px or less, for tablets */
@media screen and (max-width: 850px) {
    nav {
        display:none;
    }
    
    #banner {
        display:none;
    }

    #hamburger {
        display:initial;
    }

    #gallery div {
        width:33%;
    }

    #fourthColumn {
        display:none;
    }
}

/* On screens that are 450 or less, for phones */
@media screen and (max-width: 450px) {
    nav {
        display:none;
    }

    #banner {
        display:none;
    }

    #hamburger {
        display:initial;
    }

    #gallery div {
        width:50%;
    }

    #thirdColumn {
        display:none;
    }

    #fourthColumn {
        display:none;
    }
}