@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;
}

h1 {
    text-align:left;
}

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%;
}


/* color classes for the color changing card */
.pink {
    background-color:#ffe6f0;
    height:125px;
    width:30%;
}

.blue {
    background-color:#A5DCFF;
    height:125px;
    width:30%;
}

.yellow {
    background-color:#fde446;
    height:125px;
    width:30%;
}

.orange {
    background-color:#f4bc6e;
    height:125px;
    width:30%;
}

/* div containers */

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

/* hides the hamburger menu when the screen is wider */
#hamburger {
    display:none;
}

#worldImage {
    width:80%;
    height:735px;
}

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

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

#question{
    background-color:#ffe6f0;
    float:left;
    height:125px;
    width:30%;
}

#color {
    float:right;
    line-height:125px;
}

#insta {
    float:right;
}

/* specific ids */

#arrowTop {
    float:left;
    margin:15px;
    position:fixed;
}

#countriesVisited {
    width:100%;
}

#buttondiv {
    width:100%;
}

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

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

#gallery div {
    width:25%;
}


/* columns in the photo galllery */
#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;
    }

    #worldImage {
        height:400px;
    }

    /* adjusts size of each location image to have only 3 columns */
    #gallery div {
        width:33%;
    }

    /* hides fourth column as screen size shrinks */
    #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;
    }

    #worldImage {
        height:250px;
    }

    /* adjusts size of each location image to have only 2 columns */
    #gallery div {
        width:50%;
    }

    /* hides third and fourth column as screen size shrinks */
    #thirdColumn {
        display:none;
    }

    #fourthColumn {
        display:none;
    }
}