:root{
    --animspeed: 1;
    --ratio: 6;

    --darkerBlue: #00081F;
    --darkBlue: #104151;
    --lightBlue: #37A398;
    --lighterBlue: #5DE593;
    --textLight: #8feccf;
    --textDark: #011;
  font-family: monospace;
}


body{
    align-items: center;
    justify-content: center;
    margin: 0px;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-color: var(--darkerBlue);
}

iframe{
    border: none;
}

@keyframes growit{
    from {flex-grow: 1;}
    to {flex-grow: var(--ratio);}
}
@keyframes shrinkit {
    from {flex-grow: var(--ratio);}
    to {flex-grow:1;}
}


@keyframes backgroundFadeOpaque {
    from{
        background: var(--lighterBlue);
        color: rgba(0,0,0,0);
    }
    to{
        background: var(--lightBlue);
        color:var(--textDark);
    }
    
}
@keyframes backgroundFadeTransparent {
    from{
        background: var(--lighterBlue);
        color: rgba(0,0,0,0);
    }
    to{
        background: rgba(0,0,0,0);
        color:var(--textLight);
    }
    
}
@keyframes coverFade {
    from{
        visibility: visible;
        background: var(--lighterBlue);
        border-color: var(--lighterBlue);
        color: rgba(0,0,0,0);
    }
    to{
        visibility: visible;
        background: rgba(0,0,0,0);
        border-color: rgba(0,0,0,0);
        color:var(--textLight);
    }
    
}
@keyframes labelSpin {
    from{
        rotate: 0deg;
        margin-top: 0;
        margin-left: 40%;
        box-shadow: 0px 0px var(--darkBlue);
    }
    to{
        margin-top: calc(var(--ratio)*50%);
        margin-left: 0;
        rotate: -90deg;
        box-shadow: -4px 4px var(--darkBlue);
    }
}
@keyframes labelUnspin {
    from{
        margin-top: calc(var(--ratio)*50%);
        margin-left: 0;
        rotate: -90deg;
        box-shadow: 0px 0px var(--darkBlue);
    }
    to{
        margin-top: 0;
        margin-left: 40%;
        rotate: 0deg;
        box-shadow: 4px 4px var(--darkBlue);
    }
}


.bigFlexV{
    align-self: center;
    display:flex;
    flex-direction: column;
    width: calc(120vh - 18px);
    max-width: calc(100vw - 18px);
    aspect-ratio: 6/5;
    padding: 5px;
    background-color: var(--darkBlue);
    border-radius: 4px;
}
@media (max-aspect-ratio:5/6) {
    .bigFlexV{
        aspect-ratio: 5/6;
    }
}

.bigFlexH{
    display: flex;
    flex-basis: 0;
    flex-direction: row;
    flex-grow: 1;
    animation: shrinkit calc(var(--animspeed)*0.75s);
    overflow: hidden;
    border-radius: 4px;
}
.CardOuter{
    display: flex;
    position: relative;
    flex-basis: 0;
    flex-grow:1;
    animation: shrinkit calc(var(--animspeed)*0.75s);
    border: 2px solid var(--darkerBlue);
    margin: 5px;
    background-color: var(--darkerBlue);
    background-size: cover;
    overflow: hidden;
    border-radius: 4px;
}
.CardOuter:hover{
    border-color: var(--lighterBlue);
}
.CardButton{
    display: none;
}

.Card{
    overflow: scroll;
    scrollbar-color:var(--darkBlue) var(--lightBlue);
    border-radius: 0;
    display: none;
    background-color: var(--lightBlue);
    width: 100%;
    height: 100%;
    padding: 10px;
    padding-right: 20px;
    > p{
        border: 2px solid var(--darkBlue);
        padding: 5px;
        border-radius: 2px;
        background-color: var(--textLight);
    }
}
.Label{
    color: var(--textLight);
    animation: backgroundFadeTransparent calc(var(--animspeed)*1s);
    display: flex;
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    >h1{
        position: relative;
        white-space: nowrap;
        font-size: 1.5rem;
        padding: 5px;
        min-width: fit-content;
        width: 20vh;
        margin: 0%;
        margin-left: 40%;
        border-radius: 3px;
        background-color: var(--lightBlue);
        border: 3px solid;
        text-transform:uppercase;
        rotate: 0deg;
        animation: labelUnspin calc(var(--animspeed)*0.5s);
        text-shadow: 3px 3px var(--darkBlue);
        box-shadow: 4px 4px var(--darkBlue);
        overflow: hidden;
    }
}
@media only screen and (max-width: 500px){
    .Label{
        >h1{
            font-size: 1.25rem;
            padding: 3px;
            width: 15vw;
        }
    }
}

.Cover{
    display: block;
    position: absolute;
    visibility: hidden;
    top:0px;
    left:0px;
    padding: 3px;
    width: 100%;
    border-radius: 2px;
    border: 5px solid rgba(0,0,0,0);
    height: 100%;
    animation: coverFade calc(var(--animspeed)*1s);
}


.bigFlexH:has(input:checked){
    flex-grow: var(--ratio);
    animation: growit calc(var(--animspeed)*0.75s);
    > .CardOuter > .Label > h1 {
        text-shadow: -3px 3px var(--darkBlue);
        rotate: -90deg;
        margin-left: 0%;
        margin-top: calc(var(--ratio)*50%);
        box-shadow: -4px 4px var(--darkBlue);
        animation: labelSpin calc(var(--animspeed)*0.5s);
    }
}
.CardOuter:has(input:checked){
    border-color: var(--darkerBlue);
    border-width: 3px;
    flex-grow: var(--ratio);
    animation: growit calc(var(--animspeed)*0.75s);
    > .Card{
        display: block;
        color:var(--textDark);
        animation: backgroundFadeOpaque calc(var(--animspeed)*1s);
    }
    > .Label{
        display: none;
    }
}


.CardHeader{
    overflow: hidden;
    background-color: var(--darkBlue);
    color: var(--textLight);
    padding: 5px;
    margin: 2px;
    border-radius: 3px;
}
.Gallery{
    width: 97%;
    column-count: 3;
    column-gap: 5%;
    grid-auto-rows: 25vmin;
    >a{
        width: 100%;
        height: auto;
        background-color: rgba(0,0,0,0);
        background-size: 30vmin;
        background-attachment: fixed;
        > img{
            width: 100%;
            height: auto;
            margin: 5%;
            outline: 2px solid var(--darkerBlue);
            border-radius: 3px;
            background-color: var(--textLight);
            box-shadow: 2vmin 2vmin var(--darkBlue);
        }
    }
    > .project {
        background-color: var(--darkerBlue);
        border-radius: 3px;
        padding: 3px;
        width: 100%;
        height: 50%;
        overflow: hidden;
        margin-bottom: 20px;
        > img {
            object-fit: cover;
            width: 100%;
            height: 15vmin;
            border-radius: 3px;
        }
        > .projectLabel{
            background-color: var(--darkBlue);
            color: var(--textLight);
            width: calc(100%-10px);
            padding: 5px;
            border-radius: 3px;
            >a{
                color: var(--lighterBlue);
                font-weight: bold;
                text-decoration: none;
            }
        }
    }
}

@media (max-aspect-ratio:5/6) {
    .Gallery{
        column-count: 2;
    }
}