body {
    background-color: #030627;
    font-family: monospace;
    font-size: 2em;
    color: white;
    margin: 0;
}

#bar {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    background-color: #ee82ee20;
    padding: 0.4vw;
}

#bartex {
    width: 100%;
}

.bartexurl {
    vertical-align: middle;
    margin: 0.5em;
}

#logoimg {
    height: 2.5em;
}

#fp {
    display: flex;
    flex-flow: row wrap;
    height: fit-content;
    width: 100%;
    justify-content: center;
    align-content: center;
    align-items: space-around;
}

.qleft {
    width: fit-content;
    text-align: center;
}

.qright {
    width: fit-content;
    height: 100%;
}

.qup {
    height: 60%;
    margin-top: 5%;
}

.qdown {
    margin: 10%;
}

#q2 {
    width: 50vw;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#meimg {
    width: 15em;
}

#hitext {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

#hileft {
    font-size: 6em;
}

#hiright {
    font-size: 3em;
}

#emailimg {
    height: 1.2em;
    margin: 0.2em 0 0.2em 0;
}

#pgptext {
    font-size: 0.7em;
    margin: 0;
    padding: 0;
}

#q3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 40vw;
}

#q1 {
    margin-top: 0.4em;
}

#email {
    margin-bottom: 0.4em;
    font-size: 1.6em;
}

#donate {
    margin: 1em;
    color: yellow;
}


.badge {
    padding: 0.5em;
    margin: 0.2em;
    border-radius: 0.8em;
    border-width: 0.2em;
    border-style: solid;
    height: min-content;
    font-size: 0.7em;
}


.badge-red {
    border-color: red;
    background-color: #ff000030;
}

.badge-violet {
    border-color: violet;
    background-color: #ee82ee30;
}

.badge-blue {
    border-color: cyan;
    background-color: #00ffff30;
}

a {
    color: white;
    text-decoration: none;
    border-bottom: 1px dashed white;
}


.vimflex {
    display: flex;
    color: #c8c800d1;
    width: 100%;
    font-size: 0.8em;
    white-space: nowrap;
}

.vimcrop {
    display: inline;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    margin: 0;
}

.textcontent {
    margin: 3% 8% 3% 8%;
}

#aboutphot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.aboutphoti {
    width: 11em;
    margin: 0.2vw;
}

.visual {
    background-color: #c8c80041;
}

.achivbox {
    border: 1px dashed white;
    width: 40vw;
    margin: 2%;
}

.achivboxtop {
    border-bottom: 1px dotted white;
}

.achivtexttd {
    width: 185%;
    font-size: 0.9em;
    padding: 1.1em;
}

.achivboxtitle {
    margin-bottom: 0.5em;
}

.achivtable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
}

.achivtd {
    text-align: right;
}

.achivimg {
    width: 80%;
    padding: 10%;
}


#achievements {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.hidden {
    color: #ee82ee20;
}

@keyframes wiz {
  0%   {right: 2em; top: 0.8em;}
  50%   {right: 1.6em; top: 2em;}
  100%   {right: 1em; top: 2.5em;}
}

@keyframes wiz1 {
  0%   {right: 2em; top: 0.8em;}
  100%   {right: 2.5em; top: 1.8em;}
}

@keyframes wiz2 {
  0%   {right: 4em; top: 1em;}
  100%   {right: 3em; top: 1.4em;}
}

@keyframes wiz3 {
  0%   {right: 6em; top: 1.2em;}
  100%   {right: 1em; top: 2em;}
}

@keyframes wiz4 {
  0%   {right: 3em; top: 0.8em;}
  60%   {right: 2.2em; top: 1.8em;}
  100%   {right: 5em; top: 2.2em;}
}

@keyframes wiz5 {
  0%   {right: 7em; top: 1.2em;}
  60%   {right: 8em; top: 2em;}
  100%   {right: 8.2em; top: 1.8em;}
}

.sa {
  position: relative;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: #ffffff80;
}

.sa0 { animation-name: wiz; }
.sa1 { animation-name: wiz1; }
.sa2 { animation-name: wiz2; }
.sa3 { animation-name: wiz3; }
.sa4 { animation-name: wiz4; }
.sa5 { animation-name: wiz5; }

.rhd {
    margin: 0 5vw 1vw 5vw;
}

.rhdbox {
    display: flex;
    justify-content: space-between;
}

.rhdimg {
    width: 8em;
}

.rhdimgw {
    width: fit-content;
    padding-left: 2em;
}


.rhdheader {
    margin-left: -3vw;
}

.rhdtitle {
    margin-top: 2em;
}

.rhdpre {
    margin: 0 2em 0 2em;
}

.rhdcontent {
    font-size: 0.85em;
}


.rhdgreen { color: #00ff00 }
.rhdviolet { color: #ee82ee }

ul {
    list-style: none;
    padding: 0em;
}

ul li:before {
    content: '*';
    margin: 0 1em;
}

#footerty {
    text-align: center;
    margin: 1em;
    margin-bottom: 0;
    font-size: 1.1em;
}

#footerlr {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
}

#footerleft {
    margin: 0.4em;
}
#footerright {
    margin: 0.4em;
    text-align: right;
}

#footerdonate {
    margin: 0.9em;
    color: yellow;
}

#footerfoot {
    margin-top: 0.5em;
    display: flex;
}

.footerfootbg {
    color: #ffff0070;
}

#footercpy {
    white-space: nowrap;
    margin: 0 1em 0 1em;
}

.hviolet {
    color: #ee82eeee;
}

#proascii {
    text-align: center;
    font-size: 1.1vw;
    overflow: hidden;
    white-space: nowrap;
}

#langflex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    width: 100%
}

.badgeprog {
    padding: 0.3em;
    margin: 0.2em;
    border-radius: 0.8em;
    border-width: 0.2em;
    border-style: solid;
    height: min-content;
    font-size: 0.7em;
}

.talkbox {
    display: flex;
    justify-content: center;
}

.talkcontent  {
    margin-top: 1em;
    margin-left: 4em;
}

.talkboxi {
    width: 80%;
}

#projline {
    border-left: 0.1em solid white;
    box-sizing: border-box;
    margin-left: 0.2em;
}

#projlineinner {
    margin-left: -0.3em;
}

.projcontentflex {
    border: 1px solid #c8c800a1;
    margin: 0 3.5em 1em 3.5em;
    display: flex;
    justify-content: space-between;
    min-width: fit-content;
}

.projdescr {
    width: 140%;
    margin: 1em;
    font-size: 0.9em;
}

.photoflex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 80%;
}

.photoflexwide {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center ;
}

.photobox {
    text-align: center;
    border: 1px dotted white;
    margin: 0.8em;
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photoboxdescr {
    margin-top: 0.5em;
}

.photoboximg {
    width: 100%;
}

.pboximg {
    width: min(20em, 100%);
}

.projbigsectiontitle {
    margin-bottom: 0.1em; 
    margin-left: -0.1em;
    margin-right: 3em;
    font-size: 1.5em;
}

.electrogallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.electrobox {
    border: 1px solid #c8c800a1;
    margin: 1em;
    width: 30em;
}

.eboximg {
    text-align: center;
}

.eboxiimg {
    width: 60%;
    margin: 0.5em;
}

.eboxdescr {
    margin: 0.8em;
    font-size: 0.9em;
}

.eboxtitle {
    margin: 0.4em;
    font-size: 1.2em;
    border-bottom: 1px dotted white;
}

#blog {
    text-align: center;
}

.stars {
    display: inline;
    position: absolute;
}

.saa {
    position: relative;
    display: inline;
    top: 0;
    left: 0.3em;
    z-index: 100;
}

.sab {
    display: inline;
}

.stov {
    display: inline; 
    position: relative;
    width: max-content;
}