@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Momo+Signature&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background-color: rgb(49, 44, 38);
}

.container {
    background-image: url(img/zoo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 500px;
    background-position: center;
    display: flex;
}

/* margin adalah jarak antar luar elemen, padding jarak di dalam elemen */
/* untuk cara penulisan font family ada di google font */
#title_center {
    text-align: left;
    margin-left: 150px;
    margin-top: 20px;
    font-family:"Bebas Neue", sans-serif;
    font-style: normal;
    font-size: 150px;
    color: white;
    opacity: 100%;
    text-shadow: 2px 2px 20px black;
    text-decoration: underline 5px;
}

#title_center_sub {
    text-align: left;
    margin-left: 10px;
    margin-top: 85px;
    font-family:"Bebas Neue", sans-serif;
    font-style: normal;
    font-size: 50px;
    color: white;
    opacity: 100%;
    text-shadow: 2px 2px 20px black;
}

/* Untuk bagian dropdown selection, konsepnya title feline, canine, birds,
foto dibawahnya, foto bisa di klik dan kebuka, foto juga ada dropdown foto dan deskripsi
masing-masing (feline: lynx, lion; canine: wold, coyote; bird: parrot, owl */

.thetitles {
    display: flex;
    font-family: "Bebas Neue", sans-serif;
    font-size: 40px;
    margin-top: 20px;
    padding: 5px;
    outline-style: solid;
    outline-color: white;
    outline-width: thick;
    
}

#Feline {
    text-align: left;
    color: white;
    margin-left: 250px;
}

#Canine {
    text-align: left;
    color: white;
    margin-left: 480px;
}

#Birds {
    text-align: left;
    color: white;
    margin-left: 450px;
}

.big-group {
    margin: 20px 0px;
    display: flex;
}

.group {
    display: flex;
    position: relative;
    text-align: center;
    margin-left: 40px;
}

.dropdown {
    margin-left: 0px;
    margin-bottom: 0px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color:antiquewhite;
    min-width: 160px
}

.dropdown:hover .dropdown-content{
    display: block;
    margin-left: 40px;
    padding: 5px 5px;
    font-family: "Montserrat", sans-serif;
}

.desc {
    padding: 15px;
    text-align: center;
}


#source {
    font-family: "Bebas Neue", sans-serif;
    font-size: 30px;
    text-align: center;
    color: white;
    margin-top: 50px;
}

#links {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    text-align: center;
}

#links a{
    text-decoration: none;
    color: white;
}