@import url(https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@200;300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600&display=swap);

/*fonts*/

* {
    margin: 0;
    padding: 0;
}

body {
    overflow-y: hidden;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    color: whitesmoke;
    background-color: #0D1113;
}

html,
body {
    max-width: 100vw;
    max-height: 100vh;
}

h1 {
    font-weight: 300;
    font-size: calc(60px + 0.390625vw);
}

h2 {
    font-size: 1.8em;
    font-weight: 400;
}

h3 {
    font-size: 1.17em;
    font-weight: 400;
}

h4 {
    font-size: 1em;
    font-weight: 400;
}

h5 {
    font-size: calc(15px + 0.390625vw);
    font-weight: 400;
}

p {
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 200;
    font-size: calc(14px + 0.390625vw);
    line-break: auto;
}

a {
    font-weight: 400;
    text-decoration: none;
    font-size: calc(14px + 0.390625vw);
}

li {
    font-size: .75em;
    font-weight: 300;
}

.orfont {
    color: #ff9445;
}

.montfont {
    font-family: 'Montserrat', sans-serif;
}

canvas {
    position: fixed;
    z-index: 1;
    width: 100%;
}

 ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}


/* スクロール*/

#scroll {
    position: absolute;
    width: 100%;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    top: 75%;
    z-index: 3;
}

.scrlltext {
    z-index: 3;
    position: absolute;
    width: 100%;
    top: 82%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.scrlltext p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

#scroll a {
    padding-top: 4rem;
    z-index: 3;
    color: whitesmoke;
    font-family: 'M PLUS 1p', sans-serif;
    text-decoration: none;
}

#scroll a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 50px;
    margin-left: -15px;
    border: 4px solid #ff9445;
    border-radius: 50px;
    box-sizing: border-box;
}

#scroll a span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background-color: #ff9445;
    border-radius: 100%;
    -webkit-animation: sdb10 2s infinite;
    animation: sdb10 2s infinite;
    box-sizing: border-box;
}

@-webkit-keyframes sdb10 {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        -webkit-transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes sdb10 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


/*SECTION Class*/

#sections {
    overflow-y: scroll;
    position: absolute;
    z-index: 2;
    /*
    right: -17px;
     Increase/Decrease this value for cross-browser compatibility */
    text-shadow: 1px 1px 2px rgb(0, 0, 0), 0 0 1em rgb(23, 23, 24), 0 0 0.2em rgb(0, 0, 0);
}

section {
    background-color: #031b242a;
    /* cover layer*/
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sectionvid {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}


/* Section mission */

.sectionmiss {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.misstitle {
    text-align: center;
    width: 90%;
    margin: auto;
}

.misssubt {
    width: 80%;
    padding-top: 5%;
    text-align: center;
    margin: auto;
}


/* Section proj*/

.sectionproj {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.projtitle {
    width: 90%;
    margin: auto;
    text-align: center;
}

.projtitle h3 {
    font-weight: 300;
    font-size: calc(60px + 0.390625vw);
}

.projecttextblock {
    margin-bottom: 00%;
}

.projsubtext {
    padding-top: 5%;
    text-align: center;
    width: 80%;
    margin: auto;
}


/*Section α sys*/

.sectionasys {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.asystext {
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.asystext h3 {
    font-weight: 300;
    font-size: calc(60px + 0.390625vw);
}

.asyssubtext {
    text-align: center;
    padding-top: 5%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


/* Section β sys  */

.sectionbsys {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bsystext {
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.bsystext h3 {
    font-weight: 300;
    font-size: calc(60px + 0.390625vw);
}

.bsyssubtext {
    text-align: center;
    padding-top: 5%;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}


/* highlight section*/


/* Section Copyrights*/

#copyrights {
    top: 92%;
    position: fixed;
    padding-bottom: 2%;
    z-index: 2;
    width: 100%;
    justify-content: center;
}

.coprdivider {
    border-top: 0.5px solid whitesmoke;
    width: 100%;
    left: 0rem;
    top: 92%;
    position: fixed;
    z-index: 5;
}

.copyrtext {
    display: block;
    position: fixed;
    text-align: center;
    padding-top: 0%;
    z-index: 6;
    margin-left: auto;
    margin-right: auto;
    top: 95%;
}


/*Highlights*/

.hlsquaregrid {
    padding-top: 50%;
    position: relative;
    display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-items: center;
    gap: 5%;
}

.hlp {
    padding-bottom: 10%;
}

.hlhp {
    padding-top: 5%;
    text-align: center;
}

.hlsquare {
    border: solid #1080aa;
    border-width: 0.1rem;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 0 12px 1px #1080aa;
}

.hlsquaregrid h5 {
    font-size: calc(12px + 0.390625vw);
    font-weight: 400;
}

.sectionhlght {
    height: 100vh;
    width: 100vw;
}

.hltext {
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.hltext h1 {
    font-size: 2.5rem;
}


/* News section */

.sectionews {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.newscont {
    width: 90%;
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #0d11138f;
    border-radius: 5px;
}

.newstext {
    padding-top: 0%;
    padding-bottom: 5%;
}

.newstexttitle {
    display: flex;
    justify-content: center;
}


/* Join us section */

.sectionjoin {
    height: 20vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.joinustxt {
    padding-bottom: 5%;
}

.joinussubtext {
    text-align: center;
    padding-top: 5%;
    width: 80%;
    padding-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
}

#footer {
    background-color: #0f0f0f;
    display: block;
    height: 40vh;
    width: 100vw;
}


/* media queries*/

@media only screen and (min-width:375px) {
    .newstext {
        padding-top: 0%;
    }
    .misssubt {
        width: 70%;
    }
    .projsubtext {
        width: 82%;
    }
    .asyssubtext {
        width: 90%;
    }
}

@media only screen and (min-width:425px) {
    .misssubt {
        width: 92%;
    }
    .asyssubtext {
        width: 80%;
    }
    .hlsquaregrid {
        padding-left: 2.5%;
        padding-right: 2.5%;
    }
    .joinussubtext {
        width: 90%;
        padding-top: 0%;
    }
}

@media screen and (min-width:500px) {
    .misssubt {
        width: 100%;
    }
    .asyssubtext {
        width: 85%;
    }
    .bsyssubtext {
        width: 82%;
    }
}

@media only screen and (min-width:768px) {
    .misssubt {
        width: 100%;
    }
    .sectionjoin {
        height: 20vh;
    }
    .newstext {
        padding-top: 32%;
    }
    .asystext {
        text-align: right;
    }
    .asyssubtext {
        text-align: right;
        width: 65%;
        margin-left: 30%;
    }
    .bsystext {
        text-align: left;
    }
    .bsyssubtext {
        text-align: left;
        width: 64%;
        margin-right: 31%;
    }
    .hltext {
        padding-top: 100%;
        text-align: center;
    }
    .hlsquaregrid {
        padding-top: 10%;
        position: relative;
        display: grid;
        grid-template-columns: 28% 26% 28%;
        justify-items: center;
        gap: 6%;
        justify-content: center;
    }
    .joinussubtext {
        padding-bottom: 5%;
    }
}

@media only screen and (min-width:820px) {
    .hlsquaregrid {
        padding-top: 20%;
        justify-items: center;
    }
}

@media only screen and (min-width:884px) {
    .logmark {
        padding-left: 1%;
    }
}

@media only screen and (min-width:1024px) {
    .asyssubtext {
        margin-left: 32%;
    }
    #news {
        height: 80vh;
    }
    .hltext {
        padding-top: 19%;
    }
    .hlsquaregrid {
        padding-top: 10%;
    }
    .hltext {
        padding-top: 68%;
    }
    .newstext {
        padding-top: 15%;
    }
    .sectionjoin {
        height: 35vh;
    }
}

@media only screen and (min-width: 1280px) {
    .asyssubtext {
        width: 56%;
        margin-left: 40%;
    }
    .bsyssubtext {
        text-align: left;
        width: 58%;
        margin-right: 37%;
    }
    .newscont {
        width: 70%;
        padding-top: 2%;
        padding-bottom: 5%;
    }
    .sectionews {
        height: 80vh;
    }
    .newstext {
        padding-top: 25%;
    }
    .sectionjoin {
        height: 50vh;
    }
    .joinustxt {
        padding-top: 10%;
        padding-bottom: 5%;
    }
    .sectionhlght {
        height: 100vh;
        width: 100vw;
    }
    .hlsquaregrid {
        padding-top: 10%;
    }
    .hltext {
        padding-top: 46%;
    }
}

@media only screen and (min-width:1366px) {
    .asyssubtext {
        width: 41%;
        margin-left: 55%;
    }
    .bsyssubtext {
        text-align: left;
        width: 48%;
        margin-right: 47%;
    }
    .joinustxt {
        padding-top: 10%;
    }
}

@media only screen and (min-width: 1440px) {
    .sectionmiss {
        height: 70vh;
    }
    .asystext {
        padding-top: 10%;
        text-align: right;
    }
    .asyssubtext {
        width: 45%;
        margin-left: 51%;
    }
    .bsystext {
        padding-top: 10%;
        text-align: left;
    }
    .hltext {
        padding-top: 30%;
    }
    .sectionjoin {
        height: 50vh;
    }
    .joinustxt {
        padding-top: 15%;
    }
    .joinussubtext {
        padding-bottom: 0%;
    }
    .sectionews {
        height: 100vh;
    }
    .cards-container {
        padding-top: 1%;
    }
}

@media only screen and (min-width: 1800px) {
    .asyssubtext {
        width: 43%;
        margin-left: 53%;
    }
    .bsyssubtext {
        text-align: left;
        width: 46%;
        margin-right: 50%;
    }
    .newstext {
        padding-top: 18%;
    }
    .projecttextblock {
        margin-bottom: 00%;
    }
    .hlsquaregrid {
        padding-top: 5%;
    }
}

@media only screen and (min-width: 1920px) {
    .sectionmiss {
        height: 100vh;
    }
    .misstextblock {
        text-align: center;
    }
    .asyssubtext {
        width: 42%;
        margin-left: 55%;
    }
    .sectionjoin {
        height: 100vh;
    }
    .bsyssubtext {
        text-align: left;
        width: 39%;
        margin-right: 56%;
    }
    .cards-container {
        padding-top: 10%;
    }
}

@media only screen and (min-width:2000px) {
    .asyssubtext {
        width: 40%;
        margin-left: 56%;
    }
    .bsyssubtext {
        text-align: left;
        width: 38%;
        margin-right: 57%;
    }
}

@media only screen and (min-width:2560px) {
    .asystext {
        text-align: right;
        margin-right: 8%;
    }
    .asyssubtext {
        width: 35%;
        margin-left: 58%;
    }
    .bsystext {
        text-align: left;
        margin-left: 8%;
    }
    .bsyssubtext {
        text-align: left;
        width: 37%;
        margin-right: 55%;
    }
    .misstextblock {
        text-align: center;
        width: 20%;
    }
}


/* menus and color hidden function  */

.hidblmenu {
    position: fixed;
    background-attachment: fixed;
    top: 0rem;
    height: 8rem;
    width: 100%;
    z-index: 4;
}

.copyrbackgr {
    background-color: #0D1113;
}

.blackbkg {
    background-color: #0d1113d3;
}

.transpblack {
    background-color: #0d11138c;
}

.transluc {
    background-color: #0d11138c;
}


/*/////////////// Highlights media queries*/


/* BLOG CARDS */

.cards-container {
    display: grid;
    padding-left: 3%;
    width: 90%;
    row-gap: 1%;
    column-gap: 5%;
    justify-content: left;
    padding-top: 4%;
    padding-bottom: 0%;
    margin-left: 1%;
    margin-right: 1%;
    z-index: 3;
    /* grid-template-columns: 30% 30% 30%; */
}

.newsblock {
    padding-bottom: 25px;
}

.cardscol {
    width: 100%;
    border-radius: 1rem;
    padding-bottom: 0%;
    padding-left: 2%;
    text-decoration: none;
}

.cardscol a {
    text-decoration: none;
    font-size: 0.8rem;
}

.cardscol p {
    font-size: calc(10px + 0.390625vw);
}

.card-title {
    display: none;
    padding-top: 1%;
    padding-bottom: 0%;
    padding-right: 2%;
}

.card-text {
    padding-top: 0%;
    padding-bottom: 0%;
    padding-right: 2%;
}

.daterow {
    display: grid;
    grid-template-columns: 5% 50%;
    align-items: center;
    padding-bottom: 1%;
    gap: 5%;
}

.card-date {
    color: #2cc9ff;
    padding-top: 0%;
    padding-bottom: 0%;
}

.card-cat {
    padding-top: 1rem;
}

.card-link {
    padding-bottom: 0%;
    padding-right: 4%;
    float: right;
}

.cardscol h3 {
    font-weight: 500;
}

.cardscol a {
    color: #ff9445;
}

.cardsimg {
    float: right;
    padding-bottom: 1rem;
}

.cardsimg img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 1rem;
}

.hidden {
    display: none;
}