@import url("https://cdn.jsdelivr.net/npm/@mdi/font@7.1.96/css/materialdesignicons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

body {
    background-image: url('/assets/ecdp.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;

    font-family: "Nunito", sans-serif;

    padding-left: 20%;
    padding-right: 20%;
    padding-top: 3%;
    padding-bottom: 3%;

    color: rgb(255, 255, 255);
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: rgb(86, 125, 166)
}
::-webkit-scrollbar-thumb {
    background: rgb(79, 108, 150);
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(62, 83, 119);
}

a {
    color: rgb(221, 221, 221);
    text-decoration:underline;
}

.sidebar {
    align-self: flex-end;
    position: sticky;
    bottom: 24px;
}

code {
    color: slategrey;
}

.arrow {
    color: grey;
}

li {
    padding-left: 3%;
}

section {
    font-weight: normal;
}

#box {
    border-radius: 5px;

    padding: 2%;

    box-shadow: 0px 0px 20px #cdcdcd;
}

#notification-blue {
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;


    background-color: rgb(72, 95, 199);

    color: white;

    border-radius:5px;
}

#notification-blue section {
    padding: 2%;
    width: 95%
}

#notification-green {
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;


    background-color: rgb(0, 209, 178);

    color: white;

    border-radius:5px;
}

#notification-green section {
    padding: 2%;
    width: 95%
}

#notification-red {
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 3%;
    padding-bottom: 3%;

    background-color: rgb(241, 70, 104);

    color: white;

    border-radius:5px;
}

#download-top {
    text-align: left;
    /* move download to right */
    background-color: rgb(62, 142, 208);
    color: white;

    padding-top: 5%;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 5%;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#download-bottom {
    text-align: left;

    background-color: rgb(239, 245, 251);
    color: rgb(72, 95, 199);

    padding: 5%;

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#download-button {
    font-family: "Nunito", sans-serif;

    background-color: rgb(74, 102, 234);
    color: white;

    border-radius: 5px;

    outline: none;
    border: none;
    padding: 3%;
    padding-right: 5%;
    padding-left: 5%;

    font-size: 1em;
}

#download-button:hover{
    background-color: rgb(72, 96, 202);
}

#check-button {
    font-family: "Nunito", sans-serif;

    background-color: rgb(62, 171, 66);
    color: white;

    border-radius: 5px;

    outline: none;
    border: none;
    padding: 3%;
    padding-right: 5%;
    padding-left: 5%;

    font-size: 1em;
}

#check-button:hover{
    background-color: rgb(54, 156, 58);
}

.title {
    font-size: 2em;
}