/* Fonts */
@font-face {
    font-family: Arizonia;
    src: url(Arizonia.ttf);
}

/* General styles */
*{
    margin: 0px auto;
    padding: 0px auto;
}



body{
    background-color: rgb(250, 235, 244);
}

/* Profile image */

#profile{
    /*width: 50%;
    height: 50%;*/
    min-height: 200px;
    width: 200px;
    /*position: absolute;*/
    top: 30%;
    left: 25%;
}

.img-thumbnail{
    border-radius: 50%;
    border: 4px solid white;
    /*outline: 10px solid rgb(250, 235, 244);*/
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.3);
    margin-top: -105px;
    background-size: cover;
    background-position: center;
}


.clearfix{
    float: none;
    clear: both;
}

/* Title and subtitle */
#title h1{
    font-family: Arizonia;
    font-size: 65px;
}

#subtitle h2{
    display: block;
    width: 80%;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 25px;
}


/* Buttons */
.container{
    display: block;
}

#button-container{
    margin: 0px auto;
}

.btn-outline-info{
    display: block;
    width: 70%;
    min-height: 70px;
    background-color: rgb(247, 146, 208);
    margin: 20px;
    border-color: rgb(255, 0, 162);
    font-size: large;
    transition: all 300ms;
}

.btn-outline-info a{
    color: white;
    text-decoration: none;
    transition: all 300ms;
}

.btn-outline-info:hover{
    background-color: pink !important;
    border-color: rgb(247, 146, 208) !important;
}

.btn-outline-info:hover a{
    color: rgb(164, 110, 41);
}

/* Footer */
#footer{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
}

#footer a{
    color: rgb(255, 0, 162);
    text-decoration: none;
}

/* Responsive styles - MEDIA QUERIES*/

@media (min-width: 768px) {  
    #profile{
        width: 250px;
        min-height: 250px;
    }

    .img-thumbnail{
        margin-top: -132px;
    }
}

@media (min-width: 992px) { 
    #profile{
        width: 300px;
        min-height: 300px;
    }

    .img-thumbnail{
        margin-top: -157px;
    } 
}

@media (max-width: 380px){
    #title h1{
        font-size: 50px;
    }

    #subtitle h2{
        font-size: 20px;
    }
}