* {
    margin: 0;
    padding: 0;
}

#flex {
    position: relative;
    height: 40vw;
    border-bottom: 2px solid black;
    overflow: hidden;
    display: flex;
}

#slide {
    position: relative;
    display: flex;
}

.slide-pic {
    height: 100%;
    width: 100vw;
}

#wc-note-admission-btn {
    width: 36%;
    position: absolute;
    left: 5%;
    top: 18vw;
}

#welcome-note {
    position: relative;
    width: fit-content;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.9vw;
    color: whitesmoke;
}

#click2admission {
    position: relative;
    padding: 0% 2%;
    margin: 1.8vw 0vw;
    cursor: pointer;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 2.2vw;
    border-radius: 10px;
    border-width: 4px;
    border-style: solid;
    border-color: black;
    background-color: brown;
    color: blanchedalmond;
    width: fit-content;
    transition-property: scale;
    transition-duration: 0.8s;

    &:hover {
        scale: 110%;
    }

}

#btn {
    position: absolute;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 20%;
    width: 72px;
    margin: 0vw 46vw;
    top: 35vw;
}

.slide-btn {
    cursor: pointer;
    height: 10px;
    width: 10px;
    border: 2px solid rgb(24, 19, 9);
    border-radius: 11px;
}

#legacy {
    height: 30vw;
    border: 2px solid black;
}

#legacy #banner {
    position: relative;
    height: 100%;
    overflow: hidden;
    z-index: -2;
}

#legacy #banner #banner-img {
    position: relative;
    width: 100vw;
    bottom: 1.5vw;
}

#legacy #legacy-details::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.4;
    z-index: -1;
}

#legacy #legacy-details {
    position: relative;
    height: 100%;
    width: 100%;
    bottom: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#legacy #legacy-details #headline {
    font-family: "WDXL Lubrifont TC", sans-serif;
    color: #7e0b0b;
    font-size: 2.8vw;
}

#legacy #legacy-details #note {
    font-family: "WDXL Lubrifont TC", sans-serif;
    color: aliceblue;
    font-size: 2.5vw;
    animation: scaling 2s infinite;
}

@keyframes scaling {
    0% {
        scale: 100%;
    }

    50% {
        scale: 120%
    }

    100% {
        scale: 100%
    }
}

#three-box {
    margin: 3vw 0vw;
    position: relative;
    display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: center;
}


#two-box {
    position: relative;
    display: grid;
    grid-template-columns: 30% 70%;
}

.main-container {
    position: relative;
    margin: 3vw 3vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

#three-box .main-container {
    margin: 0vw 1vw;
}

#two-box .main-container {
    border: 2px solid black;
}

#two-box #training::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: url('https://img.freepik.com/premium-vector/karate-silhouettes-martial-arts-silhouette-karate-girl-silhouette-karate-clipart-karate-icon_702724-415.jpg?w=360');
    background-size: contain;
    opacity: 0.1;
    z-index: -1;
}

#gallery,
#branches,
#training,
#affiliation,
#unit,
#history {
    border: 2px solid black;
}

.inner-container {
    display: grid;
}

#three-box .inner-container {
    grid-template-rows: 15vw 18vw;
    box-shadow: 4px 4px rgb(180, 178, 178);
    background-color: rgb(247, 80, 80);
    padding-bottom: 1vw;
}

#two-box .inner-container {
    padding: 3vw 3vw;
    height: 125vw;
}

#two-box #training .inner-container {
    grid-template-rows: auto;
    gap: 5vw;
}

#two-box #affiliation .inner-container {
    grid-template-rows: 22% 22% 22% 22%;
    gap: 2vw;
    align-items: center;
}

#gallery .inner-container {
    gap: 2.5vw;
    position: relative;
    overflow: scroll;
    grid-template-columns: 45% 45%;
    justify-content: center;
    padding: 1vw;
    height: 40vw;
    justify-items: center;
}

#branches .inner-container {
    grid-template-rows: 50% 50%;
    padding: 1vw 1vw;
    height: 50vw;
}

#unit .inner-container {
    grid-template-columns: 56% 42%;
        background-image: linear-gradient(to right, rgb(79, 146, 201), rgb(190 187 203));
    padding: 1.5vw 1.5vw;
}


#history .inner-container {
    grid-template-columns: 100%;
    gap: 2vw;
    padding: 1vw 4vw;
}

.image-box {
    overflow: hidden;
    border: 2px solid gray;
    height: 12vw;
    border-radius: 2vw;
}

#three-box .image-box {
    height: 15vw;
    border-radius: 0vw;
    border: 0;
}

#gallery .image-box {
    height: 20vw;
    position: relative;
    display: flex;
    justify-content: center;
}

#branches .image-box,
#unit .image-box {
    height: 15vw;
    border-radius: 0vw;
}

#history .image-box {
    height: 16vw;
    align-self: center;
}

#affiliation img {
    width: 100%;
}

.tag-name {
    position: relative;
    font-size: 2.5vw;
    text-align: center;
    font-family: "WDXL Lubrifont TC", sans-serif;
    font-weight: 600;
    font-style: normal;
    border-bottom: 2px solid black;
    color: white;
    padding: 0.4vw 0vw;
}

#three-box .tag-name {
    font-family: "Modak", system-ui;
    font-weight: 100;
    font-style: italic;
    font-size: 3vw;
    border-bottom: none;
    color: initial;
}

#two-box .tag-name,
#unit .tag-name {
    background-color: #f83a3a;
}

#branches .tag-name,
#gallery .tag-name,
#history .tag-name {
    background-color: #0b005b;
}

.bullet-points {
    display: flex;
}

.material-symbols-outlined {
    font-size: 2.5vw;
}

.details {
    align-self: center;
    word-wrap: break-word;
    text-align: justify;
    font-family: "WDXL Lubrifont TC", sans-serif;
    font-weight: 400;
    font-size: 2.0vw;
    align-self: baseline;
}


.set-a {
    display: grid;
    grid-template-columns: 16vw auto;
    gap: 1vw;
}

.set-b {
    display: grid;
    grid-template-columns: auto 16vw;
    gap: 1vw;
}

#branches .set-a {
    grid-template-columns: 56% 42%;
    background-image: linear-gradient(to right, cadetblue, rgb(54, 118, 121));
    border-radius: 3vw;
    padding: 1.5vw 1.5vw;
    box-shadow: 3px 3px black;
    align-self: center;
}

.training-name {
    text-align: center;
    word-wrap: break-word;
    font-family: "WDXL Lubrifont TC", sans-serif;
    font-weight: 750;
    font-size: 2.3vw;
}

.training-img {
    position: relative;
    width: 23vw;
}

.box-img {
    position: relative;
}

#img-2,
#img-3,
#img-4 {
    width: 28.1vw;
}

#meditation-img {
    right: 4vw;
}

#phy-exercise-img {
    right: 4vw;
}

#kihon-img {
    right: 3.5vw;
    bottom: 2vw;
    scale: 83%;
}

#kata-img {
    right: 3vw;
    bottom: 0.8vw;
}

#kumite-img {
    right: 3.8vw;
    bottom: 3vw;
    scale: 85%;
}

.branch-name {
    word-wrap: break-word;
    font-family: "WDXL Lubrifont TC", sans-serif;
    font-size: 4vw;
    color: wheat;
}

.branch-details {
    padding: 0vw 2vw;
    align-self: center;
}

.location {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    align-self: center;
}

#unit .location {
    padding-bottom: 45%;
    width: 90%;
}

.location .mappin {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#unit #unit-name-logo {
    grid-column: 1 / 3;
    text-align: center;
    font-family: "WDXL Lubrifont TC", sans-serif;
    display: flex;
    justify-content: center;
}

#unit #unitname {
    font-size: 3vw;
    align-self: anchor-center;
}

#unit #unit-details {
    justify-self: center;
}