style.css

@font-face {
    font-family : "Extreme";
    src : url("a.ttf");
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-family : Helvetica;
    }

header {
	background-color : #ffffff;
    box-shadow: 0px 0.5vh 3px 1px rgba(41,41,41,0.5);
    min-height : 8vmin;
    height : 10vh;
    max-height : 14vmin;
    width : 100%;
    position : absolute;
    z-index : 1000;
    display : flex;
    flex-direction : row;
    align-items : center;
    padding-left : 1vmin;
    box-sizing : border-box;
    justify-content : space-between;
}

#logo {
    height : clamp(6vmin, 8vh, 12vmin);
    width : auto;
    transform : rotate(-5deg);
}

.connection {
    height : clamp(6vmin, 8vh, 12vmin);
    width : 20%;
    padding-right : 1vmin;
    padding-left : 1vmin;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    border-left: 4px dotted rgba(147, 147, 147, 0.5);
}

.connection ul {
    width : 100%;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;

}
.connection p {
    text-align : center;
}
header p {
    display: flex;
    text-align: center;
    font-size : 2vmin;
}
.connection ul li {
    list-style-type : none;
    width : 50%;
}


.connection ul li a{
    display : flex;
    padding : 0.5vmin;
    margin : 0.5vmin;
    text-align : center;
    border: 2px solid black;
    border-radius: 40px;
    justify-content : center;
    border-color : black;
    color : black;
    transition : border-color 0.4s, color 0.4s;
}

.connection ul li a:hover {
    border-color : #224a95;
    color : #efc600;
    transition : border-color 0.4s, color 0.4s;
}


.connection ul li a, .connection p {
    padding-left : 0.5vmin;
    font-size : 2vmin;
    color : black;
    text-decoration : none;
}

#logoutli {
    border : none !important;
}

#connected ul li a img {
    display : flex;
    self-align : center;
    height : clamp(3vmin, 4vh, 6vmin);
    width : auto;
    transform : scale(1);
    transition : transform 0.5s;
}
#connected ul li a img:hover {
    transform : scale(1.1);
    transition : transform 0.5s;
}