*{
    margin: 0;
    padding: 0;
    font-family: "Silkscreen";
}
.viewport{
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.viewport{
  --s: 222px; /* control the size*/
  --c1: #2d4b48;
  --c2: #7bb497;
  --c3: #5f8966;
  
  --_g: var(--c1) 10%,var(--c2) 10.5% 19%,#0000 19.5% 80.5%,var(--c2) 81% 89.5%,var(--c3) 90%;
  --_c: from -90deg at 37.5% 50%,#0000 75%;
  --_l1: linear-gradient(145deg,var(--_g));
  --_l2: linear-gradient( 35deg,var(--_g));
  background: 
    var(--_l1), var(--_l1) calc(var(--s)/2) var(--s),
    var(--_l2), var(--_l2) calc(var(--s)/2) var(--s),
    conic-gradient(var(--_c),var(--c1) 0) calc(var(--s)/8) 0,
    conic-gradient(var(--_c),var(--c3) 0) calc(var(--s)/2) 0,
    linear-gradient(90deg,var(--c3) 38%,var(--c1) 0 50%,var(--c3) 0 62%,var(--c1) 0);
  background-size: var(--s) calc(2*var(--s)/3);
}
.content{
    width: 80vw;
    background-color: var(--c2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header{
    width: 100%;
    background-color: var(--c1);
    height: fit-content;
    text-align: center;
    padding: 1.62% 0;
    color: #fff9b1;
}

/* Navegator */
.navElement{
    list-style: none;
}
.navElement a{
    color: #C6C296 ;
    font: bold;
}
li{
    display: inline-block;
    margin: 0.486vw 0.324vw;
}

/* Header Title*/
.title #welcomePompompurin{
    width: 4.86vw;
    display: inline-block;
    margin: 0 0.810vw;
}
.title h1{
    margin: 0;
    display: inline-block;
    font-size: 4.86vh;
}
.title{    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Presentation */
.presentation{
    margin: 3.24%;
    background-color: var(--c2);
    box-shadow: .5vw .5vw 15px var(--c3);
    border: 5px solid #2d4b48;
    border-radius: 15px;
    width: 60%;
}
.presentation p{
    color: #fefefe;
    padding:  .810%;
    text-wrap: balance;
}
.presentation h2{
    font-family: "Silkscreen";
    color: #fff9b1;
    background-color: var(--c1);
    padding:  .324%;
}

/* footer */
footer{
    width: 100%;
    background-color: var(--c1);
    color: #C6C296;
    flex: 1;
    text-align: center;
}
footer p{
    margin: .648vw;
}