*{
            box-sizing: border-box;
            max-width: 100%;
        }


        .layout {
            display: grid;
            grid-template-columns:120px auto;
            grid-template-rows: 60px 50px  auto auto auto ;
            min-height: 100vh;
            column-gap: 10%;
            row-gap: 0;



        }



        body { 
            background-color: #C8D9E6;
            background-size: cover;
            font-family: "Special Elite", system-ui;
            margin: 0px;
           
        }

        header {
           grid-column: 1/-1; 
           color: #f1f1f1;
           background-color: #213353d0;
           height: 60px;
           margin-bottom: 10px;
           backdrop-filter: blur(3px);
           padding-left: 30px;
           display: flex;
           align-items: center;
           width: 100%;
           margin-bottom: 35px;

        }

        
        
        .nav {
            display: grid;
            grid-row: 3/4;
            margin-left: 20%;
            position: relative;
            grid-template-rows: repeat(5,1fr);
            background: transparent;
            border-radius: 10px;
        }
        .nav div:hover {
            transform: scale(1.05);
        }

        .nav div {
            background-color: #f1f1f194;
            backdrop-filter: blur(3px);
            
        }
        /* border-radius: 10px;*/
        .nav p {
            font-size: clamp(12px, 2vw, 24px);
            text-align: center;
        }
        .nav-top {
            display:none;
        }
    

    @media (max-width: 600px) {
        header {
            margin-bottom: 0px;
        }
        .nav-top {
            display: grid;
            grid-row: 2;
            grid-column: 1/-1;
            margin-top: 0px;
            grid-template-columns: repeat(5,1fr);
            background: transparent;
            margin-bottom: 20px;
        
            }

        .nav-top div:hover {
            transform: scale(1.05);
        }

        .nav-top div {
            background-color: #f1f1f194;
            backdrop-filter: blur(3px);
            
        }
        /* border-radius: 10px;*/
        .nav-top p {
            font-size: clamp(12px, 2vw, 24px);
            text-align: center;
        }
        .nav {
            display:none;
        }

            
    }

        .textbox {
            grid-column: 2;
            position: relative;
            background-color: #7690c77e;
            backdrop-filter: blur(3px);
            text-align: left;
            padding: 15px;
            border-radius: 10px;
            margin:5px 10% 5px 20px; 
            color: #f1f1f1;
        
        }


        .textbox p {
            font-size: clamp(12px, 2vw, 24px);
        }

        #textbox-1 {
            grid-row: 3/4;
            z-index: 1;
            padding-right: 15%;
        }
        #welcome {
            font-size: clamp(17px,3vw,26px);
        }

        #textbox-2 {
            grid-row: 4/5;
            z-index: 2;
            height: fit-content;
            text-align: center;
            justify-content: center;

        }

        @media (max-width: 600px) {
            .textbox {
             grid-column: 1/3;
             margin:5px 10% 5px 10%; 
            }   
            #textbox-1 {
                margin-top: 10%;
            }
        }

        @media (min-width: 1200px) {
            .textbox {
            width: 60%;  
            }
        }

        
        .corner-image {
            position: absolute;
            height: auto;
            border-radius: 10%;
        }


        .corner-image-TL {
            top: 5%; left: 5%;
        }

        .corner-image-TR {
            top: -20px; Right: -20px; 
        }

        @media (max-width: 600px) {
            .corner-image {
             width: 25%;  
            }   
        }

        @media (min-width: 1200px) {
            .corner-image {
            width: 20%;  
            }
        }

        
        .buttons {
            grid-row: end;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap; 
            width: 88px;
            height: 31px;
            object-fit: cover;
            transition: 0.2s;
        }

        .buttons:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 0 6px #829beca3);
        }

        @media (max-width: 600px) {
            .buttons {
            flex: 0 0 calc(33.33333%-5px);
            width: 44px;  
            height: 15.5px;
            }   
        }

        @media (min-width: 1200px) {
            .buttons {
            width: 88px;
            height: 31px;
            }
        }

        .buttons-border {
            grid-column: 1/3;
            justify-self: center;
            align-self: end;
            display: flex;
            padding: 5px;
            justify-content: left;
            align-items: center;
            margin: 70px auto;
            gap: 5px;
            background: transparent;
            backdrop-filter: blur(3px);
            border: 3px solid #FFFFFF;
            border-radius: 8px;
            max-width: 290px;
            min-width: 0px;
            max-height: fit-content;
            flex-wrap: wrap;
        }

        @media (max-width: 600px) {
            .buttons-border {
            max-width: fit-content;
            }   
        }



         /*style="
            background: transparent;
            backdrop-filter: blur(5px);
            background-color: #a1a1f76e;
            margin: 20px auto;
            text-align: center;
            padding: 20px;">*/