@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');



*{

    font-family: "Ubuntu";

    list-style-type: none;

}
body{
    margin:0
}


/* NAVIGATION */



#navigation,ul{

    display: flex;

}

#buttones{
    font-size:13pt;
    height: fit-content;
    margin:10px 2px 0 2px;
    padding:10px 5px;
    background-color: gainsboro;
    display: flex;
    align-items: center;
    border-radius: 5px;
    box-sizing: content;
}
#buttones:hover{

    background-color:rgb(0, 250, 167);

}

#logo-form{

    width:65%;

  

}

#logo{
    margin-left: 30px;    

    width: 11.2%;

    font-size: 20pt;

    border-right: solid rgba(128, 128, 128, 0.322);

    border-radius: 2px;

    line-height:50px;
}

#logo,#mini-logo,#minidiv-logo{
    display:inline-flex;
}
#minidiv-logo{
    width:100px;
    justify-content: flex-end;
}

#mini-logo{
    display:flex;
    font-size: 9pt;
    margin-left: 10%;
    color:rgba(128, 128, 128, 0.877) ;

}



/* PHOTO*/



#photo{

    width: 100%;

    height:500px;

    background-image: url("background.jpg");

    background-repeat:no-repeat;

    background-size:100%;

    margin:0;

    padding:0;

}

/*article*/

#article{
    height:170px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 250, 167);
}
#opossum, #opossum2{
    display: flex;
    width: 50%;
}
 
/* card */

@media only screen and(width<600px) {
 #card-ul,#card-div,#card-li{
    flex-wrap: wrap;
 }   
}


#card-div{
    flex-direction: column;
    background-color: rgb(39, 39, 39);
    margin: 0;
    justify-content: center;
    width: 100%;
    height: 450px;
    display:flex
}

#card-ul{
    display: flex;
    width:90%;
    justify-content: space-around;
    
}
#card-li hr{
    margin-top: 7%;
    border-radius: 1px;
    width: 96%
}
#card-li p{
    font-size: 12pt;
    color: rgb(145, 145, 145);
    line-height: 2em;
}

#card-li{
    display: flex;
    width:20%;
    justify-content: center;
    align-items: column;
    flex-direction: column;
    font-size: 15pt;
    align-items: center;
    color:rgb(255, 255, 255);
    text-align: center;
}
#fa{
    display: flex;
    color:white;
    margin-bottom: 40px;
    font-size: 40pt;
    background-color: rgb(0, 250, 167);
    padding: 10px;
    border-radius: 10px;
}

/* white-box */

#white-box{
    margin-top: auto;
    width:100%;
    height:320px;
    display:flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    align-items: column;
}
#white-box p{
    margin:0;
    font-size: 11.5pt;
    color: gray;
}
#white-box #header-p{
    margin-top: 5%;
    font-size: 23pt;
    color:rgb(66, 66, 66);
}
#CONVALLIS{
    padding:15px 25px;
    margin:auto;
    border:none;
    border-radius: 3px;
    margin-top: 2.5%;
    background-color: rgb(187, 122, 1);
    color:white;
    text-align: center;
}

/* bottom-black */

/* bottom-lime*/

#opossum2{
    margin-left: 5%;
    color:rgba(255, 255, 255, 0.74);
}
#opossum2 span{
    display: inline-flex;
    color:white;
}