@keyframes progress {
    0% {
        max-width: 0;
    }
    100% {
        max-width: 100%;
    }
}
@keyframes slide {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
  }

* {
    box-sizing: border-box;
    animation: init 350ms ease;
  }
:root   {
    --orange: #FF5722;
    --grey: #757575;
    --darkgrey:#474747;
    --b:#F1F1F1;
    --b2:#c5c5c5;
    --w: #ffffff;
    font-weight: 500;
}

body    {
    
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--b);
    color: var(--darkgrey);
    margin: 0;
    z-index: 0;
}
.wrap {
    margin: auto;
    font-size: 10;
    z-index: 2;
    width: 80vmax;

}

.top {
    width: 85%;
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    height: 2em;
}

button  {
    color: var(--darkgrey);
    background-color: var(--orange);
    width: 5em;
    height: 2em;
    border: #FF5722;
    border-radius: 10px;
    cursor: pointer;
    float: right;
}
.flag  {
    float: left;
    background-color: var(--b);
}
.profile {
    max-height: 80%;
    max-width: 80%;    
    margin: auto;
}
.profile img {   
    border-radius: 50% ;
}

.darkmode   {
    --orange: #851717;
    --grey: #fafafa;
    --darkgrey:#e7e5e5;
    --b:#494949;
    --b2:#2e2e2e;
    --w:#020202;
}

img {
    width: 100%;
    height: 100%;
}
.grid   {
    margin: auto;
    margin-bottom: 5rem;
    
    width: 85%;
    gap: 2rem;
    display: grid;
    grid-template-columns: 33% 67%;

}

#info   {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: var(--w);
    overflow: hidden;
    padding: 16px;
    animation: slide 1000ms ease;
    justify-content: center;
    border-radius: 1rem;

}
.left-column  {
    grid-row: span 2;
}

@media (max-width: 680px) {
    .grid{
            display: flex;
            flex-wrap: wrap;
    }
    .left-column    {
        width: 100%;
    }
    .right-column    {
        width: 100%;
    }
    
}
.icons {
    display: grid;
    margin: auto;
    grid-template-columns: 30% 30% 30%;
    gap: 1vmin;
    padding: 1vmin;
}
.icon {
padding: 25%;
margin: auto;
border: 1px solid var(--orange);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #fff;
opacity: 0.9;
transition: 1s;
}
.icon:hover    {
    scale: 1.2;
    transition: 1s;
    cursor: pointer;
}
.colorbar   {
    background-color: var(--orange);
    border-radius: 50px;
    animation: progress 1s linear;
    
}
.greybar    {
    background-color: var(--b);
    border-radius: 50px;
    color: #ffffff;
    text-align: center;
}
.fa {
    color: var(--orange);
    margin-right: 1rem;


}
a   {
    color: var(--orange);

}
a:hover {
    color: var(--grey);
    transition: 0.5s;
}
footer .fa   {
    color: var(--font);
}
footer .fa:hover  {
    color: #474747;
    transition: 350ms;
}
footer a    {
    color: var(--font);
}
.wave {
    background-image: url('/layered-waves-haikei.svg');    
    height: 300px;
    z-index: 1;
    overflow: hidden;
}
footer  {
    background-color: var(--orange);
    color: var(--font);
    text-align: center;
    padding: 2rem;
    padding-top: 0.5rem;
}
.foot   {
    display: none;
}

@media print {
    body {
        background-color: #ffffff;
    }
    .wrap    {
        width: 21cm;
        height: 29cm;
        font-size: 9px;
        margin: auto;
        }
    .colorbar   {
        border: 2px solid var(--orange);
        border-radius: 50px;
        
    }
    .icons {
        grid-template-columns: 50% 50%;
    }
    #info{
        box-shadow: none;
        border:#010101 1px solid;
        text-align: justify;
    }
    footer {
        display:none;
       
    }
    .foot {
        font-size: 9px;
        display: block;
        color: #010101;
    }
button {
    display: none;
}
.wave {
    display: none;
}
.darkmode  { 
    --orange: #FF5722;
    --grey: #757575;
    --darkgrey:#474747;
    --b:#F1F1F1;
    --b2:#c5c5c5;
    --w: #ffffff;
}
}