/font-face {
  font-family: "Comic Code";
  src: url("fonts/Comic Code.otf") format("opentype");
}

body{
    margin: 0 400px;
    font-family: "Comic Code", monospace;
    font-size: 120%;
    color: green;
    background-color: #000000;
}
header{
    display: flex;
    align-items: center;
}

main{
    display : flex;
    border : green solid 2px;
    border-radius: 3px;
    flex-direction : column;
    padding : 0 20px 20px 20px;
}

a {  
    text-decoration: none;
}

ul{
    list-style : none;
    padding: 0;
    margin: 0;
}
.left-header{
    display : flex;
    align-items: center;
    border-radius: 3px;
    justify-content: center;
    padding : 10px;
}
.user-host{
    padding-bottom:5px;
    border-bottom: 3px solid green ;

}

.root-tag{
    color: red;
}
.def {
    text-align: start;
    flex: auto;
}

.uname{
    margin: 20px;
    padding: 5px;
}


#command{
    display: block;
    flex : auto;
    border-bottom : 2px #373227 solid;
}

.infos-list{
    display:flex; 
    justify-content: space-evenly;
}
.infos-item{
    border: 1px solid green;
    border-radius: 3px;
    padding : 5px;
    font-size : 22px;
}
.infos-item a{
    color: green;
}
.infos-item:hover{
    background-color: green;
    border: 1px solid #000;
}
.infos-item:hover a{
    color: black;
}

.f-a{
    display: flex;
    flex-wrap: wrap;
}
.f-a-item{
    padding: 5px;
    width: 100%;
    display: block;
}
#f-a-name::before{
    content: "▸ ";
}
.f-a-item::before{
    content: "> ";

}


.main-content{
    display:flex;
    flex-direction:column;
    flex: auto;
    border : 2px green solid;
    border-radius: 3px;
    padding : 10px;
    margin : 10px 0;
}
.pp{
    max-width:200px;
    max-height:200px;
    border-radius : 5px;
    border: 2px #00ba00 solid;
    padding: 3px;
}

.contact{
    display: flex;
    flex-direction: column;
    flex: auto;
    padding: 10px;
    margin : 10px 0;
    border: 2px green solid;
    border-radius: 3px;
}

.f-contact-item {
    padding : 5px;
}

.f-contact-item::before {
    content : "→ ";
}


.info{
    display: inline;
    white-space: nowrap;
}
.seperator{
    width: 100%;
    border-bottom: 2px #373227 solid;
    margin : 0 0 5px 0 ;
}

.move-page{
    display: flex;
    padding: 20px;
    justify-content : center;
}

.move-button{
    border: solid #00ba00 2px;
    border-radius: 3px;
    padding : 5px;
    margin : 5px;
}
.side-notes{
	font-style : italic;
	font-size : 9px;
	color: gray;
}