html, body {
        overflow-x: hidden;
    }

    :root {
        --roboto-font: "Roboto", sans-serif;
        --noto-sans-jp-font: "Noto Sans JP", sans-serif;
        --poppins-font: "Poppins", sans-serif;
        --h1-font-size: clamp(20px, 10vw, 100px);
        --h2-font-size: clamp(18px, 4vw, 40px);
        --fact-font-size: 18px;
        --small-font-size: clamp(14px, 2vw, 18px);
        --medium-font-size: clamp(18px, 3vw, 24px);
        --number-font-size: clamp(18px, 8vw, 80px);
        
        --ring-size: calc(min(200px, 14vw));
        --ring-border-size: calc(var(--ring-size) * 0.1);
        --ring-offset-left: calc(var(--ring-size) + var(--ring-border-size));
        --ring-offset-top: calc((var(--ring-size) - var(--ring-border-size)) * 0.5);
        --logo-size-w: calc( (var(--ring-size) * 3 + var(--ring-border-size) * 2) * 1.5 );
        --logo-size-h: calc( (var(--ring-size) * 1.5 - var(--ring-border-size) * 0.5) * 2 );
        --logo-bg-color: #f1f1f1;
    }



    .header-wrapper {
        /*margin: 50px 0px 0 0;*/
        /*   margin-bottom: 100px; */
        position: relative;
    }

    .gallery {
        height: 400px;
        /*height: calc(var(--logo-size-h) * 1.25);*/
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr calc(var(--logo-size-w) * 0.6) 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "p6 p6 p6 p6 . p5 p5 p4 p4"
            "p6 p6 p6 p6 . p5 p5 p4 p4"
            "p1 p1 p7 p7 . p2 p2 p2 p3"
            "p1 p1 p8 p8 . p2 p2 p2 p3";
    }

    .i1 {
        
        grid-area: p1;
    }

    .i2 {
       
        grid-area: p2;
    }

    .i3 {
       
        grid-area: p3;
    }

    .i4 {
       
        grid-area: p4;
    }

    .i5 {
       
        grid-area: p5;
    }

    .i6 {
       
        grid-area: p6;
    }

    .i7 {
      
        grid-area: p7;
    }

    .i8 {
        
        grid-area: p8;
    }

    .photo {
        background-position: center;
        background-size: cover;
    }

    .logo {
        clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
        background: linear-gradient(to bottom, #fff, var(--logo-bg-color));
        width: calc(var(--logo-size-w) * 1);
        /*height: calc(var(--logo-size-h) * 1.25);*/
        height: 400px;
        margin: 0 auto;
        padding: 20px 0;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }

    h1 {
        font-family: var(--roboto-font);
        font-size: var(--h1-font-size);
        color: #05235b;
        text-align: center;
        margin-bottom: 2vw;
        text-shadow: 0.3vw 0.3vw 0.1vw #0d26548a;
    }

    .olympic-rings {
        position: relative;
        width: calc(var(--ring-size) * 3 + var(--ring-border-size) * 2);
        height: calc(var(--ring-size) * 1.5 - var(--ring-border-size) * 0.5);
        margin: 0 auto;
    }

    .ring {
        width: var(--ring-size);
        height: var(--ring-size);
        border: var(--ring-border-size) solid;
        border-radius: 50%;
        position: absolute;
    }

    .blue-ring {
        border-color: var(--blue-color);
    }

    .yellow-ring {
        border-color: var(--yellow-color);
        left: calc(var(--ring-offset-left) * 0.5);
        top: var(--ring-offset-top);
    }

    .black-ring {
        border-color: var(--black-color);
        left: var(--ring-offset-left);
    }

    .green-ring {
        border-color: var(--green-color);
        left: calc(var(--ring-offset-left) * 1.5);
        top: var(--ring-offset-top);
    }

    .red-ring {
        border-color: var(--red-color);
        left: calc(var(--ring-offset-left) * 2);
    }

    .ring::after,
    .black-ring:before {
        content: "";
        width: var(--ring-size);
        height: var(--ring-size);
        position: absolute;
        top: calc(-1 * var(--ring-border-size));
        left: calc(-1 * var(--ring-border-size));
        border: var(--ring-border-size) solid transparent;
        border-radius: 50%;
        z-index: 10;
    }

    .blue-ring::after {
        border-right-color: var(--blue-color);
    }

    .yellow-ring::after {
        border-right-color: var(--yellow-color);
        transform: rotate(-50deg);
    }

    .black-ring::after {
        border-bottom-color: var(--black-color);
    }

    .black-ring:before {
        border-right-color: var(--black-color);
        z-index: 15;
    }

    .green-ring::after {
        border-top-color: var(--green-color);
        border-left-color: var(--green-color);
    }

    .facts {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 100px;
        padding: 100px 5%;
        background: linear-gradient( to bottom, var(--logo-bg-color), #68a4cc6e 85%, #fff );
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        .facts .polygon {
            width: 200px;
            height: 180px;
            clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
            background: linear-gradient(180deg, #4ab3e6, #258dbf);
            position: relative;
            margin: 20px;
        }

    .welcome-board-name {
        font-family: 'Vast Shadow', cursive;
        color: #ffffff;
        font-size: 2.3em;
        text-shadow: 1px 2px 3px #000;
        flex-basis: 100%;
    }

    .portfolio {
        display: flex;
        flex-wrap: wrap;
        min-width: 320px;
    }

        .portfolio h2 {
            flex-basis: 100%;
            text-align: center;
            margin: 50px auto 30px;
            text-transform: uppercase;
            font-size: 20px;
            letter-spacing: 2px;
            color: #111;
        }

    .card {
        width: 33.33%;
        overflow: hidden;
        position: relative;
        /*border: 6px double #06bbcc;*/
    }

        .card .content {
            z-index: 2;
            width: 100%;
            position: absolute;
            bottom: -100px;
            transition: all 0.7s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            min-height: 50px;
            background: #111;
        }

        .card .image {
            z-index: 1;
            height: 260px;
        }

        .card img {
            height: 100%;
            width: 100%;
            transition: all 0.5s ease;
            transform: scale(1.2);
        }

        .card:hover .content {
            bottom: 0px;
            color: #fff;
        }

        .card:hover .image img {
            transform: scale(1);
        }

        .card .content span:first-child {
            text-transform: uppercase;
            margin-bottom: 0px;
            font-weight: 700;
            letter-spacing: 1px;
            text-align: center;
            color: #fff;
            font-size: 16px;
        }

        .card .content span:last-child {
            font-size: 14px;
            color: #18cfab;
            text-align: center;
            font-weight: 700;
        }

    @@media screen and (max-width: 768px) {
        .card {
            width: 50%;
        }

            .card .content {
                bottom: 0;
            }
    }

    @@media screen and (max-width: 480px) {
        .card {
            width: 100%;
        }
    }

    .gradient-background {
        /*height: 600px;*/
        background: linear-gradient(62deg, #d9d9d9, #E73C7E, #23A6D5, #d3b523);
        animation: gradient 15s ease infinite;
        background-size: 400% 400%;
    }

    @@-webkit-keyframes gradient {
        0% {
            background-position: 0 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @@keyframes gradient {
        0% {
            background-position: 0 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @@media screen and (min-device-width: 550px) and (max-device-width: 700px) {
        .logo .welcome-board-name {
            font-size: 4rem !important;
        }
    }

    @@media screen and (min-device-width: 350px) and (max-device-width: 549px) {
        .logo .welcome-board-name {
            font-size: 2rem !important;
        }
    }