@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 200;
    font-size: 10px;
    color: #eaeaea;
}

body {
    display: flex;
    justify-content: center;
    background-color: #202329;
    min-height: 100vh;
    font-size:1.6rem;
}

a {
    text-decoration: none;
    color: #ff2e63;
}

.wrapper {
    width: 100vw;
    max-width: 1140px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 50px;
    border-left: 2px solid #08D9D6;
    border-right: 2px solid #ff2e63;
    background-color: #252A34;
    overflow: hidden;
}

.item {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.block {
    text-align: justify;
    width: 95%;
    line-height: 2;
    margin: 10px 0;
}

.hint {
    color: #08D9D6;
    font-style: italic;
    text-align: left;
    border-left: 1px solid #08D9D6;
    border-top: 1px solid #08D9D6;
    border-bottom: 1px solid #08D9D6;
    font-weight: 100;
    width: 90%;
}

.warning {
    color: #ff2e63;
    font-style: italic;
    text-align: left;
    border-left: 1px solid #ff2e63;
    border-top: 1px solid #ff2e63;
    border-bottom: 1px solid #ff2e63;
    font-weight: 100;
    width: 90%;
}

.hint p, .warning p {
    margin: 5px 25px;
}

.footer {
    justify-content: end;
    font-weight: 200;
    color: #eaeaea;
    background-color: #ff2e63;
    background-image: linear-gradient(to right, #08d9d6, #ff2e63);
    padding: 0 20px;
}

.logo {
    width: 70%;
    margin-top: 10px;
}

.logo_mini {
    width: 35%;
    margin: 20px 0;
}

.qr {
    width: 50%;
    margin: 20px 0;
}

.scheme {
    width: 90%;
    margin: 20px 0;
}

.text-colored {
    color: #08d9d6;
}

.tags {
    text-align: center;
    font-style: italic;
    font-weight: 100;
    width: 80%;
}

.info {
    width: 90%;
    text-align: end;
    font-size: medium;
    font-weight: 300;
    font-style: italic;
    line-height: 0;
    margin: 10px;
}

.code-sheet {
    width: 90%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
}

li {
    list-style: square;
}

.block ul {
    margin: 5px 25px;
}

h1.lab-name {
    font-size: 1.6em;
    width: 90%;
    text-align: end;
    margin: 20px 0;

}

h1.unit {
    font-size: 1.6em;
    width: 90%;
    text-align: start;
    font-style: italic;
    margin: 20px 0;

}

h1.qr-text {
    font-size: 90%;
    width: 50%;
    text-align: start;
    font-style: italic;
    margin: 20px 20px;
}

pre {
    width: 95%;
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 200;
    font-size: 1.2rem;
    color: #eaeaea;
    align-self: start;
    margin: 30px 15px;
    white-space: pre-wrap;
}

@media screen and (min-width: 768px) {
    .code-sheet {
        grid-template-columns: 1fr 1fr;
    }
}