@font-face {
    font-family:"Noto Sans";
    font-style:normal;
    font-weight:normal;
    src : url("fonts/NotoSans.ttf");
}
@font-face {
    font-family:"Noto Sans";
    font-style:normal;
    font-weight:bold;
    src : url("fonts/NotoSans-Bold.ttf");
}
@font-face {
    font-family:"Noto Sans";
    font-style:italic;
    font-weight:bold;
    src : url("fonts/NotoSans-BoldItalic.ttf");
}
@font-face {
    font-family:"Noto Sans";
    font-style:oblique;
    font-weight:bold;
    src : url("fonts/NotoSans-BoldItalic.ttf");
}

/*********************************************/
/*********************************************/
body {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: "Noto Sans", sans-serif;

    background: #00abb7;
    color: #fff;

    padding-top: 20px;
    padding-bottom: 80px;
    margin: 0;
    position: relative;
    
    font-size: 18px;
}

.container{
    max-width: 600px;
    /*position: absolute;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
}

li{
    padding: 5px 0;
}

a{
    color: #fcd213;
    font-weight: bold;
    text-decoration: none;
}

a:hover{
    color: #15326a;
}

.logo{
    width: 280px;
    position: fixed;
    left: 0;
    top: 0;
}

.bar-yellow{
    width: 100%;
    height: 10px;
    background:  #fcd213;

    position: absolute;
    bottom: 40px;
}

.bar-turquoise{
    width: 100%;
    height: 20px;
    background:  #00abb7;

    position: absolute;
    bottom: 20px;
}

.bar-green{
    width: 100%;
    height: 10px;
    background:  #81bc32;

    position: absolute;
    bottom: 10px;
}

.bar-blue{
    width: 100%;
    height: 10px;
    background:  #15326a;

    position: absolute;
    bottom: 0;
}