@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
@font-face {
    font-family: Strive;
    src: url(/rwd-project/fonts/Impact\ -\ Strive.otf);
}

:root {
    --maindarkred: #771f20;
    --backgroundgray: rgb(56, 56, 56);
    --darkred: #531516;
    --75opacity: rgba(0, 0, 0, 0.75);
    --opacent: rgba(0, 0, 0, 0.5);
    --25opacity: rgba(0, 0, 0, 0.25);
    --customwhite: rgb(235, 235, 235);
    --customgray: rgb(46, 46, 46);
    
    --navsize: 5rem;
    --h-size:5rem;
}

.hide {display: none;}

html {
    background-color: var(--darkred);
    height: 100%;
}


h1, h2, p, a {
    color: var(--customwhite);
    font-family: Michroma;
}
h1, h2 {font-family: Strive; text-align: center;}
h1 {font-size: var(--h-size);}
h2 {font-size: calc(var(--h-size) * .75);}


.Wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    padding: 1rem;
}

body, .Wrapper, main, .tabs, .tab {
    height: 100%;
    box-sizing: border-box;
}


nav, .tabs, .tab, .navbutton,
.navtoggle 
{border-radius: 1rem;}

nav, .navtoggle
{transition: .5s;}

nav, .tabs {
    padding: .5rem;
    background-color: var(--opacent);
}

nav {
    min-width: var(--navsize);
    max-width: 100%;
    min-height: var(--navsize); 
    max-height: var(--navsize);
}

nav ul {
    display: flex;
    max-height: inherit;
}
nav li {
    margin: .1rem;
    width: 20%;
}
a.navbutton {
    display: block;
    height: 100%;
    width: 100%;
    background-color: var(--maindarkred);
}

svg.outline {
    width: 100%;
    height: 100%;
    fill: none;
    color: var(--customwhite);
}

.tab {
    padding: .5rem;
    background-color: var(--maindarkred);
    overflow: auto;
}
/* desktop */
@media (min-width:721px) {
    main {
        max-height: calc(100% - var(--navsize) - 2rem);
    }
    .tab {
        max-height: 100%;
    }
}

/* phone */
@media (max-width:720px) {
:root {
    --h-size: 3rem;
}

    .navtoggle {
        display: block;
        height: 3rem;
        width: 30%;
        background-color: var(--opacent);
        position: absolute;
        top: -5rem;
        left: 50%;
        translate: -50%;
    }
    
    nav {
        position: fixed;
        bottom: 0;
        left: 0;
        margin: 1rem;
    }
    nav:not(:has(input:checked)) {
        translate: 0 calc(100% + 1rem);
    }
    nav:has(input:checked) .navtoggle {height: 4rem;}
}