@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;900&display=swap');

:root{
    --bd-violet-rgb: 112.520718,44.062154,249.437846;
    --bd-accent-rgb: 255,228,132;
    --bd-pink-rgb: 214,51,132;
    --bd-teal-rgb: 32,201,151;
}

body{
    display: grid;
    grid-template-rows: auto 1fr auto;

    height:100vh;
    hyphens: auto;
    text-align: justify;
}

.bd-masthead {
    padding: 1rem 0;
    background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 45%),radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 50%);
}

header{
    background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), 0.95));
}

header nav a {
    color: black;
    text-decoration: none;
}

header nav img + span{
    font-family: 'Fira Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    margin-left: 20px; 
}

.flag{
    margin-top: -2px;
}

.to-up{
    position: fixed;
    right: 5px;
    top: 50vh;
}

.toggle{
    appearance: none;
    background-color: #ccc;
    border: 1px solid #999;
    border-radius: 50px;
    cursor: pointer;
    margin-bottom: 5px;
    padding: 1px 8px 3px;
}

.toggle::before{
    content: "code on";
}

.toggle:checked::before{
    content: "code off";
}

[data-code="html"]:checked + pre{
    display: block;
}

[data-code="structure1"]:checked + pre{
    display: block;
}

[data-code="structure2"]:checked + pre{
    display: block;
}

pre{
    display: none;
}

@media screen and (min-width:576px){
    .toggle{
        display:none
    }

    pre{
        display: block;
    }
}