﻿* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: Calibri;
}

html {
    height:100%;
    width:100%;
}

html, body {
    overscroll-behavior: none;
}

body {
    background-color: antiquewhite;
    height: 100dvh;
    width: 100dvw;
}

header {
    height: 8dvh;
    background-color: darkred;
    display:flex;
    align-items:center;
    padding:1em;
}
header h1{
    color:antiquewhite;
    font-size:3dvh;
}

.menu {
    /*position:absolute;*/
    height:92dvh;
    
    width: 100dvw;
    /*top:10%;*/
    padding:20px;
    /*height: 92dvh;*/
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    /*align-items: center;*/
    /*justify-items: center;*/
    gap: 50px;
}

.menuItem {
    width: 40dvw;
    /*min-width: 300px;*/
    /*min-width:20px;*/
    min-width:140px;
    max-width:20dvh;
    /*max-width:400px;*/
    border: none;
    /*padding: 20px;*/
    color: #5C524C;
    transition: all 0.1s linear;
    text-align: center;
}

    .menuItem svg {
        aspect-ratio: 1/1;
        fill: #5C524C;
        border-radius: 10%;
        padding: 10%;
        background: #00000027;
    }

    .menuItem span {
        width: 100%;
        font-size: 3dvh;
        font-size: 3dvh;
        
    }


a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

    a:hover {
        opacity: 0.7;
        transform: scale(1.05);
    }

    a:active {
        transform: scale(1.05);
    }

    a:focus {
        outline: none;
        transform: scale(1.05);
    }

    a:focus-visible {
        transform: scale(1.05);
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }


    @media (min-width: 800px ){
        @media (max-height: 500px ) {
            .menu{
                gap:10px;
            }
            .menuItem {
                /*width:40dvh;*/
                /*max-width: 10px;*/
                /*min-width: 120px;*/
            }
        }        

        
    }


