@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&family=Signika:wght@300;400;500;600;700&display=swap');
            body{
                background-color:white;
                display:flex;
                align-content: center;
                justify-content: flex-start;;
                align-items: center;
                flex-direction:column;
            }
            a:active {
              color:darkgrey;
            }
            a:hover {
              color:darkgrey;
            }
            .box{
                display: inline-flex;
                background-color:white;
                padding: 0.5rem 0.5rem;
                width:80%;
                height:90%;
            }
            .panel{
                display: flex;
                flex-direction: column;
                background-color:red;
                
            }
            .panel-item{
                background-color:white;
            }
            .content{
                background-color:royalblue;
                padding:100px 100px;
                width:100%;
            }
            .block{
                width: 200px;
                max-width: 10vh;
                height: 200px;
                max-height: 10vh;
            }
            img{
                display: block;
            }
            .imagesby3{
                width:calc(90vh / 3);
                height:auto;
            }
            .imagesby5{
                
                width:calc(90vh / 5);
                height:auto;
            }
            .navbar{
                display:flex;
                text-decoration: none;
                flex-grow:1;
                align-items:center;
                flex-shrink: 0;
                justify-content: center;
            }
            .navbar-link{
                display:block;
                list-style: none;
            }
            .navbar > *{
                flex-basis:1;
            }
            .navbar-link > a{
                background-color:white;
                font-family: 'Signika';
                padding:1rem 1rem;
                font-weight: 600;
                font-size: medium;
                color:#1d3557;
                font-weight: 700;
            }
            .navbar-link > a:hover{
                cursor:pointer;
                background-color:#e1dede;
                color:#1d3557;
                font-weight: 800;
            }
            .logo-image{
                width:200px;
                max-width:10vh;
            }
            .box-between{
                margin-top:2rem;
            }
            .navbar-burguer{
                display:none;
                list-style: none;
                cursor:pointer;
            }
            .navbar-burguer > *{
                    border:1px solid black;
                    width:20px;
                    
            }
            @media (max-width:710px)
            {
                
                .navbar-burguer{
                    display:flex;
                    list-style: none;
                    flex-direction:column;
                    gap: 0.3rem;
                }
                .navbar-link{
                    display:none;
                }
                .navbar{
                    justify-content: flex-end;
                }
            }
            .navbar-burguer .active{
                background:red;
            }
            .navbar-menu{
                position:absolute;
                right:0;
                background:#e1dede;
                height:100%;
                max-width:70%;
                
            }
            .menu{
                display: flex;
                text-decoration: none;
                flex-grow: 1;
                align-items: flex-start;
                flex-shrink: 0;
                justify-content: flex-start;
                flex-direction: column;
                flex-wrap: nowrap;
                gap: 2rem;
                margin-top:2rem;
                
            }
            .menu-link{
                display:block;
                list-style: none;
            }
            .menu-link > a{
                font-family: 'Signika';
                padding:1rem 2rem;
                font-weight: 600;
                font-size: smaller;
                color:#1d3557;
                font-weight: 700;
            }
            .menu > *{
                flex-basis:1;
            }
            .menu-link > a:hover{
                cursor:pointer;
                background-color:white;
                color:black;
                font-weight: 800;
            }
            .menu-burguer{
                display:block;
                list-style: none;
                cursor:pointer;
            }
            .cross {
                position: absolute;
                right:10px;
                top: 20px;
                height: 20px;
                width: 20px; 
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .cross::before,
            .cross::after {
                position: absolute;
                content: '';
                width: 100%;
                height: 2px;
                background-color: black;
            }
            
            .cross::before {
                transform: rotate(45deg);
            }
            
            .cross::after {
                transform: rotate(-45deg);
            }
            .navbar-checkbox{
                display:none;
            }
            #navcheck:checked ~ .navbar-menu{
                display:none;
            }
            #navcheck:checked ~ #navbar-box{
                display: inline-flex;
                
            }
            .cubo div {
                display:block;
                position: fixed;
                max-width: 10vh;
                max-height: 10vh;
            }
            
            .cubo .lado1 { 
                -webkit-transform: translateZ(5vh);
                -ms-transform: translateZ(5vh);
                transform: translateZ(5vh);
            }
            .cubo .lado2 { 
                -webkit-transform: rotateY(90deg) translateZ(5vh); 
                -ms-transform: rotateY(90deg) translateZ(5vh); 
                transform: rotateY(90deg) translateZ(5vh); 
            }
            .cubo .lado3 { 
                -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(5vh); 
                -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(5vh); 
                transform: rotateY(90deg) rotateX(90deg) translateZ(5vh); 
            }
            .cubo .lado4 { 
                -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(5vh); 
                -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(5vh); 
                transform: rotateY(180deg) rotateZ(90deg) translateZ(5vh); 
            }
            .cubo .lado5 { 
                -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(5vh); 
                -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(5vh); 
                transform: rotateY(-90deg) rotateZ(90deg) translateZ(5vh); 
            }
            .cubo .lado6 { 
                -webkit-transform: rotateX(-90deg) translateZ(5vh); 
                -ms-transform: rotateX(-90deg) translateZ(5vh); 
                transform: rotateX(-90deg) translateZ(5vh); 
            }
            
            .cubo {
                -webkit-animation: rodarcubo 60s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
                animation: rodarcubo 60s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
                animation-delay: 2s;
                -webkit-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-transform-origin: 5vh 5vh 0;
                -ms-transform-origin: 5vh 5vh 0;
                transform-origin: 5vh 5vh 0;
            }
            
            @-webkit-keyframes rodarcubo {
                16%      { -webkit-transform: rotateY(-90deg);                }
                33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
                50%      { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
                66%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
                83%      { -webkit-transform: rotateX(90deg);                 }
            }
            @keyframes rodarcubo {
                16%      { -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); }
                33%      { -ms-transform: rotateY(-90deg) rotateZ(90deg); transform: rotateY(-90deg) rotateZ(90deg); }
                50%      { -ms-transform: rotateY(180deg) rotateZ(90deg); transform: rotateY(180deg) rotateZ(90deg); }
                66%      { -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); }
                83%      { -ms-transform: rotateX(90deg); transform: rotateX(90deg); }
            }
            .textbox{
                display:flex;
                flex-direction:column;
                justify-content: center;
                align-items: center;
                font-family:'Signika';
                font-size:large;
                font-weight:500;
                
                border:4px solid #1d3557;
                max-width:80%;
                -webkit-box-sizing: border-box; 
                -moz-box-sizing: border-box;    
                box-sizing: border-box;
            }
            .innerbox{
                padding-left:1em;
                padding-right:1em;
            }
            .title{
                font-family:'Signika';
                font-size: xx-large;
                font-weight:500;
                margin-block-end: 0em;
            }
            .subtitle{
                font-family:'Signika';
                font-size:large;
                font-weight:300;
                
            }
            .footer{
                background-color:#1d3557;
                width:100%;
                height:10rem;
                margin-top:auto;
                display: flex;
                justify-content: center;
                align-items: center;
                color:white;
                font-family:'Signika';
                font-size:x-large;
                font-weight:500;
                flex-direction:column;
            }
            .lowerfooter{
                background-color:#3a90c2;
                width:100%;
                height:2.5rem;
                font-family:'Signika';
                font-size:smaller;
                font-weight:400;
                display: flex;
                justify-content: center;
            }
            .socials{
                display:flex;
                flex-direction:row;
                gap:1rem;
            }
            .socials > a > img{
                filter: invert(1);
            }
            .bigtitle{
                font:inherit;
                font-weight:900;
                color:#e63946;
                font-size:xx-large;
            }
            .mt0{
                margin-top:0;
            }
            .flexline{
                display: flex;
                flex-direction: row;
                align-content: center;
                align-items: baseline;
                /*gap: 0.5rem;*/
                flex-wrap: wrap;
            }
            .colabbox{
                display: flex;
                justify-content: center;
                background:#e1dede;
                height:150px;
                width:100%;
            }
            .colabs{
                max-width:80%;
                height: inherit;
                display: flex;
                justify-content: center;
                align-items:center;
                gap:1.5rem;
            }
            .colabs > *{
                max-width: 40%;
                max-height: 40%;
                overflow:hidden;
                filter: grayscale(1);
            }