html{
            height: 100%;
            width: 100%;

            }
            body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: url('background.gif') no-repeat center center fixed;
            background-size: cover;
            background-position: bottom;
            }

            .section {
                height: 100%;
                display: grid;
                grid-template-rows: 100px auto auto auto; /* Första raden = header */
                grid-template-columns: 25% 25% 25% 25%;
                z-index: 100;
                color: white;
            }

            #header {
                display: flex;
                background-color: black;
                opacity: 0.8;
                grid-column: 1/5;
                align-items: center;
                justify-content: center;
                height: 93px;
                
            }

            .tillbaka_knapp {
                padding: 8px 16px;
                font-size: 32px;
                border-radius: 6px;
                text-decoration: none;
                color: wheat;
                z-index: 20;
                display: inline-flex;
                animation: wobble 1.5s infinite ease-in-out;
                text-shadow: 1px 1px #eebb00ce;
                position: absolute;
                right: 20px;
                align-items: center;
                font-family: monospace, pixelfont;
                font-weight: bold;
                
                
            }
                @keyframes wobble {
                0% {
                transform: rotate(0deg);
                }
                25% {
                transform: rotate(5deg);
                }
                50% {
                transform: rotate(0deg);
                }
                75% {
                transform: rotate(-5deg);
                }
                100% {
                transform: rotate(0deg);
                }
            }
            .header_text {
                color: wheat;
                font-size: 60px;
                height: 93px;
                display: flex;
                opacity: 1;
                z-index: 3;
                grid-column: 2/4;

            }

            #knapparna  {
                display: flex;
                justify-content: space-around;
                align-items: center;
                grid-row: 3;
                grid-column: 1 / 5;
                font-size: 30px;
                
                
            }

            .Email {
                padding: 25px 0 25px 0;
                width: 180px;
                text-align: center;
                transition: transform 0.3s ease;
                border-radius: 3px;
                color: white;
                text-decoration: none;
                backdrop-filter: blur(5px);
                background: rgba(255,255,255,0.2);
                border-radius: 20px;
                border: 2px solid white;
                transition: all 0.3s ease;
                
            }

            .nummer {
            
            color: white;
            padding: 25px 0 25px 0;
            width: 180px;
            text-align: center;
            cursor: pointer;
            position: relative;
            font-size: 30px;
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            border: 2px solid white;
            transition: all 0.3s ease;
            }

            .nummer:hover {
            transform: scale(1.1);
            }

            .hover_text {
            display: none;
            }

            .nummer:hover .default_text {
            display: none;
            }

            .nummer:hover .hover_text {
            display: inline;
            font-size: 28px;
            }

            .insta {
                padding: 25px;
                width: 130px;
                text-align: center;
                transition: transform 0.3s ease;
                border-radius: 3px;
                color: white;
                text-decoration: none;
                backdrop-filter: blur(5px);
                background: rgba(255,255,255,0.2);
                border-radius: 20px;
                border: 2px solid white;
                transition: all 0.3s ease;
            }

            .snap {
                padding: 25px;
                width: 130px;
                text-align: center;
                transition: transform 0.3s ease;
                border-radius: 3px;
                color: white;
                text-decoration: none;
                backdrop-filter: blur(5px);
                background: rgba(255,255,255,0.2);
                border-radius: 20px;
                border: 2px solid white;
                transition: all 0.3s ease;
            }
            
            

            .nummer:hover, .insta:hover, .Email:hover, .snap:hover {
                transform: scale(1.1);
                cursor: pointer;
                background: rgba(255, 255, 255, 0.5);
                color: #222;
                border-color: #ffdd57;
                transform: scale(1.1);
                box-shadow: 0 0 15px #ffdd57;
                z-index: 10;
            }

            .letter {
                animation: fadeIn 1s ease-in-out both;
            }

            @keyframes fadeIn {
                from {
                opacity: 0;
                transform: translateY(20px) scale(1);
                }
                to {
                opacity: 1;
                transform: translateY(0) scale(1);
                }
            }

            @media (max-width: 1010px) {
                .header_text {
                    font-size: 30px;
                    text-align: center;
                    align-items: center;
                    padding: 0 10px;
                }
                .tillbaka_knapp {
                    font-size: 24px;
                    
                }
            }

            @media (max-width: 768px) {

            .section {
                grid-template-rows: 100px auto auto auto;
                grid-template-columns: 100px 1fr 1fr 1fr 100px;
            }

            #header {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100px;
                padding: 10px;
                position: relative;
                width: 100vw;
            }

            .header_text {
                font-size: 18px;
                text-align: center;
                align-items: center;
                padding: 0 10px;
            }

            .tillbaka_knapp {
                font-size: 14px;
            }

            #knapparna {
                flex-direction: column;
                align-items: center;
                gap: 20px;
                width: 100%;
                grid-row: 3;
                
            }

            .Email,
            .insta,
            .nummer,
            .snap {
                width: 80vw;
                max-width: 400px;
                font-size: 24px;
                padding: 20px;
            }

            .hover_text {
                font-size: 22px;
            }

            body, html {
                overflow: hidden;

            }
            }