*{
    box-sizing: border-box;
}
*:not(fieldset){
    padding: 0;
    margin: 0;

}

@font-face {
    font-family: Jost;
    src: url(/assets/Jost/Jost-VariableFont_wght.ttf);
}
@font-face {
    font-family: Atkinson;
    src: url(/assets/Atkinson_Hyperlegible_Next/AtkinsonHyperlegibleNext-VariableFont_wght.ttf);
}

:root {
    --walo: rgb(162, 178, 240);
    --pimeja: rgb(0, 0, 0);
    --walo-lili: rgb(235, 240, 252);
    --walo-pimeja: rgb(181, 183, 193);
    --laso: rgb(36, 36, 157);
    --pimeja-lili: rgb(16, 21, 40);

    --main-padding: 2em;
    --main-max-width: 45rem;

}

html{
    color: var(--pimeja);
    background-color: var(--walo);
    font-family: Jost;;
    font-size: 1.2em;
}

body{
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;  /* body always at least viewport height */
  line-height: 1.6em;

}

header{
    display: grid;
    grid-template-areas: 
    "introtext navigation"
    "status status";
}
@media (max-width: 43em){
    header{
        grid-template-areas: 
            "introtext"
            "status"
            "navigation";
    }
   
}



#skip {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#skip:focus {
    background-color: var(--pimeja);
    color: var(--walo-pimeja);
  left: 0;
  width: auto;
  height: auto;
}
    
.status {
    grid-area: status;
    background-color: var(--pimeja);

    display: grid;
    grid-template-areas: "statustext statuslog";
    grid-template-columns: 1fr min-content;
    
}
.status p {
    margin: 0;
    grid-area: statustext;
    justify-self: center;
    color: var(--walo);
    font-style: italic;

}


.status a:is(:visited,:not(:visited)){
    grid-area: statuslog;
    padding-inline: 1em;
    max-width: max-content;
    color: var(--walo);
    font-size: 0.7em;
    text-decoration: none;
    text-transform:uppercase;
    box-shadow: inset 0 0  0.1em 0.1em var(--walo);
    height: 100%;

    display: flex;
    align-items: center;
}

.introtext{
    grid-area: introtext;
    margin: 0 auto;
    font-size: 1.3em;
    padding: 1em;
    background-color: var(--walo);
    width: 100%;


    display: flex;
    flex-direction: column;
   justify-content: center;
}
.introtext p:last-of-type{
    margin-block: 0;
}
nav {
    grid-area: navigation;
    background-color: var(--pimeja-lili);
    display: flex;
    align-items: center;
}
nav ul {
    display: flex;
    list-style-type: none;
    flex-wrap: wrap;
    max-width: 40em;
    column-gap: 1.5em;
    row-gap: 0.5em;
    margin: 0 auto;
    padding: 2em;
    justify-content: center;
}
nav li{
    margin: 0;
}
nav a:is(:visited,:not(:visited)){
    color: var(--walo);

}

a:is(:visited,:not(:visited)){
    color: var(--laso);
}

p{
    margin-block-end: 1em;
}

main{
    max-width: var(--main-max-width);
    padding: var(--main-padding);
    place-self: center;
    position: relative;
    background-color: var(--walo);


}

.backto {
    position: absolute;
    top: 0;
    right: 1em;
    
}
footer{
    margin-block-start: auto;
    background-color: var(--pimeja);
    color: var(--walo-pimeja);
    width: 100%;
    font-size: 0.8em;
    line-height: 1.1em;
    padding-block: 0.5em;
    padding-inline: 1em;
}
footer a:is(:visited,:not(:visited)){
    color: var(--walo);
}
footer p{
    margin: 0;
    display: inline;
    text-align: center;
}

h2, h3, h4, h5 {
    margin-block-start: 1em;
}
h1, h2, h3, h4, h5 {
    margin-block-end: 0.5em;
    line-height: 1.2em;
}





li {
    margin-inline-start: 2em;
    margin-block-end: 0.5em;
}
ul ul {
    margin-inline-start: 2em;

}

hr:not(.intro-end) {
  border: 0;
  height: 0.3em; /* total vertical space for both bars */
  background: linear-gradient(
    to bottom,
    var(--pimeja-lili) 0 50%,
    var(--laso) 50% 100%
  );
  margin-block: 3em;
}



hr.intro-end {
    border: 0;
    background-color: var(--pimeja);
    height: 0.5em;
    box-shadow: inset 0 0 0 0.02em var(--pimeja-lili);
    margin-block: 1em;
     /* background-image:
    linear-gradient(90deg,
      #6bff9e 0% 16%,  
      #6bd7ff 16% 32%,  
      #9b6bff 32% 48%, 
      #6bff9e 48% 64%, 
      #6bd7ff 64% 80%,  
      #9b6bff 80% 100%  

    );*/
}

body:has(.background):has(.cover){
    background-image: none;
    background-repeat: no-repeat;
    background-size: cover;
}
body:has(.background):has(.contain){
    background-image: none;
    background-repeat: repeat;
    background-size: contain;
}
body:has(.background):has(.contain){
    background-image: none;
    background-repeat: repeat;
    background-size:auto;
}
body:has(.background) main{
    margin-block: 2em;

}


small {
    font-size: smaller;
    margin-block: -0.5em 2em;
    display: block;
}



.toc {
    border-inline-start: 0.2em solid var(--laso);
    margin-bottom: 3em;
}
.toc :is(h2, h3, ul, li){
    font-size: 0.9em;
    margin: 0 0 0 2em;
    line-height: 1.2em;
}
.toc h2{
    margin-block-end: 1em;
}
.toc ul{
     margin-block-end: 0.5em;

}

.status-log *{
    border: 0.1em solid black;
    border-collapse: collapse;
    padding: 0.5em;
}


/*beginner text portal*/

html:has(.back-to-main){
    --walo: rgb(235, 233, 225);
    --pimeja: rgb(0, 0, 0);
    --walo-lili: rgb(233, 243, 184);
    --walo-pimeja: rgb(139, 205, 103);
    --laso: rgb(36, 36, 157);
    --pimeja-lili: rgb(40, 16, 16);

    --main-padding: 2em;
    --main-max-width: 45rem;

    font-family: Atkinson, sans;
}
body:has(.back-to-main) .status {
    display: block;
    text-align: center;
}
body:has(.back-to-main) .introtext {
    display: flex;
    justify-content: center;
    background-color: var(--walo-pimeja);
}




@media (max-width: 30em){
    main {
        padding-inline: 0.5em;
    }
}