:root {
    --maincolor: #222e43;
    --seccolor: #325276;
    --borderwidth: 0.4vh;
    --bordercolor: #000000;
    --backgroudcolor: #0f172a;
    --fontcolor: #ffffff;
}

* {
    margin: 0;
}

body {
    width: 100%;
    height: 100%;
    background-color: var(--backgroudcolor);

}

/* @media (max-width: 600px) {
    body {
        
    }
} */

header {
    width: 100%;
    height: 10vh;
    background-color: var(--maincolor);
    border-bottom: var(--borderwidth) solid var(--bordercolor);
    position: relative;
    z-index: 10;

    .backToMain {
        line-height: 10vh;
        font-size: 9vh;
        text-decoration: none;
        color: var(--fontcolor);
        margin-left: 2vh;
    }

    .maintitle {
        color: var(--fontcolor);
        line-height: 10vh;
        font-size: 9vh;
        text-align: center;
        position: absolute;
        top: 0;
        left: 20vw;
        right: 20vw;
    }

    #menuButton {
        height: 8vh;
        position: absolute;
        top: 1vh;
        right: 1vh;
    }
}

#menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 10vh;
    right: 10vh;
    border: var(--borderwidth) solid var(--bordercolor);
    background-color: var(--seccolor);
    border-radius: 0 0 2vh 2vh;
    width: 20vw;
    z-index: 1;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;

    .menuOption {
        font-size: 5vh;
        color: var(--fontcolor);
        border-bottom: .1vh solid var(--bordercolor);
        text-decoration: none;
    }
}


#menu.visible {
    animation: slideIn 0.4s forwards;
    pointer-events: auto;
}

#menu.closing {
    animation: slideOut 0.4s forwards;
    pointer-events: none;
}

@media (max-width: 600px) {
    header {
        height: 6vh;

        .backToMain,
        .maintitle {
            font-size: 5vh;
            line-height: 6vh;
        }

        #menuButton {
            height: 5vh;
            top: 0.5vh;
        }
    }

    #menu {
        top: 6vh;
        right: 7vh;
        width: 70vw;

        .menuOption {
            text-align: center;
        }
    }
}



@keyframes slideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}









footer {
    width: 100%;
    height: 12vh;
    background-color: var(--maincolor);
    border-top: var(--borderwidth) solid var(--bordercolor);

    nav {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: baseline;
        align-content: flex-start;

        a {
            line-height: 3vh;
            font-size: 2vh;
            margin: 0.5vh 0 0.5vh 5vw;
            width: 20%;
            background-color: var(--seccolor);
            border-radius: 1vh;
            padding-left: 0.3vw;
            text-decoration: none;
            color: var(--fontcolor);

        }
    }
}

@media (max-width: 600px) {
    footer {
        nav {
            width: 100%;

            a {
                width: 90%;
                margin-right: 0;
            }
        }
    }
}

main {
    background-color: var(--backgroudcolor);

    nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        align-content: flex-start;
        width: 70vw;
        margin: 0 15vw 10vh 15vw;


        a {
            height: 15vh;
            line-height: 15vh;
            text-align: center;
            font-size: 5vh;
            width: 15vw;
            margin: 2vh 3vw 2vh 3vw;
            border: var(--borderwidth) solid var(--bordercolor);
            border-radius: 3vh;
            background-color: var(--seccolor);
            color: var(--fontcolor);
            text-decoration: none;
        }

        p {
            width: 100%;
            height: 10vh;
            line-height: 10vh;
            font-size: 8vh;
            margin-top: 2vh;
            text-align: center;
            background-color: var(--maincolor);
            border: var(--borderwidth) solid var(--bordercolor);
            border-radius: 6vh;
            color: var(--fontcolor);
        }
    }

    div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: flex-start;
        align-content: flex-start;
        width: 70vw;
        margin: 2.5vh 15vw 10vh 15vw;
    }

    p {
        color: var(--fontcolor);
        margin-bottom: 5vh;
        font-size: 125%;
    }

    .calc {
        font-size: 5vh;
    }

    .full {
        width: 100%;
    }

    .L {
        width: 45%;
        margin-right: 5%;
    }

    .R {
        width: 45%;
        margin-left: 5%;
    }

    .title {
        background-color: var(--maincolor);
        /* border-radius: 0 12vh 0 12vh ; */
        border-radius: 6vh;
        border: var(--borderwidth) solid var(--bordercolor);
        height: 10vh;
        text-align: center;
        line-height: 10vh;
        font-size: 8vh;
        width: 100%;
    }
}

@media (max-width: 600px) {
    main {
        nav {
            a {
                width: 100%;
            }

            p {
                font-size: 5vh;
            }
        }

        .title {
            font-size: 5vh;
            height: 7vh;
            line-height: 7vh;
        }

        p {
            font-size: 100%;
        }

        .calc {
            overflow-x: scroll;
            font-size: 3vh;
            border: var(--borderwidth) solid var(--bordercolor);

        }
    }
}