/*

*/
/* 
    Created on : May 4, 2020, 9:36:19 p.m.
    Author     : lyndo
*/

body {
    color: white;
    font-family: 'Lato', sans-serif;
    display: flex;
    flex-direction: column;
    font-family: 'Jost', sans-serif;
}

.main_body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    
    background: linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0)
        ), url('../img/main_bg_one.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.left_body {    

}

.right_body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    
    background: linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 1)
        );

    padding: 20px;
}

.centered-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}

.name-header {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

.actions-body {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;    
}

.social-body {
    flex-direction: row;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    margin-top:auto;
}

.portrait {
    border-radius: 50%;
    border-style: solid;
}

.fab {
    margin: 15px;
}

.action-button {
    min-height: 50px;
    min-width: 200px;
    border: 2px solid white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 15px;
}

.action-button:hover {
    background: white;
}

.name-actual {
    font-size: 90px;
}

.details-body {
    font-size: 20px;
    margin: 50px 20px;
    text-align: center;
}

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

.main_footer {
    height: 50px;
    background: black;
}

a {
    color: white;
}

a.action-button:hover {
    animation-name: great;
    animation-duration: 0.5s;
    color: black;
    text-decoration: none;
    font-weight: bold;
    background: white;
}

a.social-button:hover {
    animation-name: good;
    animation-duration: 0.5s;
    color: grey;
    text-decoration: none;
}

@keyframes great {
  from {color: white;}
  to {color: black;}
}

@keyframes good {
  from {color: white;}
  to {color: grey;}
}

@media (max-width: 3840px) {
    
}

@media (max-width: 992px) {
    
}