main.css

/* main setting */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
    font-size: 20px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 600;
}

a {
    display: block;

        /* Internet Explorer 10 */
        display:-ms-flexbox;
        -ms-flex-pack:center;
        -ms-flex-align:center;
    
        /* Firefox */
        display:-moz-box;
        -moz-box-pack:center;
        -moz-box-align:center;
    
        /* Safari, Opera, and Chrome */
        display:-webkit-box;
        -webkit-box-pack:center;
        -webkit-box-align:center;
    
        /* W3C */
        display:box;
        box-pack:center;
        box-align:center;
}

ol,
ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
}

/* 這裡本來用來做些特效，但會和AOS這個套件衝突，所以放棄使用 */

/* html { 
-ms-scroll-snap-type: y proximity;
    scroll-snap-type: y proximity;
} */
    /* body won't work ¯\_(ツ)_/¯ */
    /* Although I'm told that html doesn't work in Safari 
       and body does, so maybe use both? */
body {
/* -ms-scroll-snap-type: y proximity;
    scroll-snap-type: y proximity; */

    overflow-x: hidden ;
}

section {
    /* height: min(calc((95vh - 2px)), calc((100vh - 40px))); */
    height: calc((95vh));
    max-height: calc((100vh - 40px));

    scroll-snap-align: end; /* beauty but dangerous */
    scroll-snap-stop: always;
}
    /* stolen from css-trick */

.container {
    margin: 0%;
    min-width: 900px;
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
}

.footer {
    padding: 0px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1;
    
}

/* following are specialized */
/* home page */
.home-container {
    margin-left: 10%;
    margin-right: 10% ;
    height: calc((95vh));
    max-height: calc((100vh - 40px));
}
.motiva-container {
    margin: 0 5% 0 5%;
    vertical-align: middle;
    overflow: hidden;
}
.v-center {
    vertical-align: middle;
    justify-content: middle;
    align-items: middle;
}

#home-name-1 {
    position: relative;
    width: 100%;
    margin-top: 35%;

    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    font-size: min(14vh, 140px);
    line-height: min(14vh, 140px);
    text-align: left;
    
    text-shadow: 0px 6px 4px rgba(110, 102, 89, 0.70);

    animation-name: home-name-showup;
    animation-duration: 1.5s;
} @keyframes home-name-showup {
    0%   {opacity: 0%;}
    100% {opacity: 100%;}
}

#home-name-2 {
    position: relative;
    width: 100%;

    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    font-size: min(9vh, 90px);
    line-height: min(9vh, 90px);
    text-align: left;
    
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.8)
}

#home-intro-1 {
    position: relative;
    width: 100%;
    /* padding: 50px 10% 0 10%; */
    padding:  2% 0 2% 0;

    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: min(calc(3vh), 30px);
    line-height: min(calc(4vh), 40px);

    text-shadow: 0px 6px 4px rgba(78, 82, 90, 0.80);

    animation-name: home-intro-showup;
    animation-duration: 2s;
} @keyframes home-intro-showup {
    0%   {opacity: 0%;}
    50%  {opacity: 0%;}
    100% {opacity: 100%;}
}

/* #home-motiva-1 {
    position: relative;
    width: 100%;
    padding: 0 10% 0 10%;
    vertical-align: middle;

    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: min(calc(3vh), 30px);
    line-height: min(calc(4vh), 40px);

    text-shadow: 0px 6px 4px rgba(78, 82, 90, 0.80);
} */

#home-upload {
    position: relative;
    width: 40%;

    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: min(calc(4vh), 40px);
    line-height: min(calc(8vh), 80px);
    text-align: center;

    position: relative;
    background: rgb(136, 189, 188);
    border-radius: 20px;

    animation-name: home-name-showup;
    animation-duration: 1.5s;
} @keyframes home-name-showup {
    0%   {opacity: 0%;}
    100% {opacity: 100%;}
} #home-upload a {
    text-decoration: none;
    color: #ffffff;
}
/* 'motiva-bg-x' write in the 'bg-and-img.css' */
:root {
    --home-showupbox-move: min(-45%, -30vh);
}
.home-motiva-set div {
    overflow: hidden; 
    /* this hidden is key part */
    position: relative;
    top: 0;
    /* other in 'bg-and-img.css' */
    
}
.home-motiva-set div .home-showupbox {
    position: absolute;
    height: 200%;
    top: 0;
    margin-top: 0;
    animation-duration: 1s;
    animation-name: unshowup;
} @keyframes unshowup {
    0%   { margin-top: var(--home-showupbox-move); }
    100% { margin-top: 0%; }
}
.home-motiva-set div .home-showupbox:hover {
    position: absolute;
    margin-top: var(--home-showupbox-move);
    animation-duration: 1s;
    animation-name: showup;
} @keyframes showup {
    0%   { margin-top: 0%; }
    100% { margin-top: var(--home-showupbox-move); }
}
.home-motiva-set div div div:first-child {
    position: relative;
    top: 0;
    height: 50%;
}
.home-motiva-set div div div:last-child {
    position: relative;
    top: 0;

    background: rgba(0, 0, 0, 0.7);
    padding: 5% 5% 5% 5%;
    height: 50%;
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: min(calc(2.4vh), 24px);
    line-height: min(calc(3vh), 30px);
}


/* FUTURE */
.slide-container {
    height: calc((95vh));
    max-height: calc((100vh - 40px));
    margin-right: 10vw;
    margin-left: 10vw;
    overflow: hidden;
}

.slide-container button {
    height: 100%;
    width: 15%;
}

#carousel-habitat {
    margin: auto auto auto auto;
    width: calc(95vh*1.5);
    max-width: 90%;
    z-index: 2;
}

.slide-content {
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 20px 2px 20px;
    border-radius: 5px;

    animation-duration: 1s;
    animation-name: unblacken;
} @keyframes unblacken {
    0%   {background-color: rgba(0, 0, 0, 1);}
    100% {background-color: rgba(0, 0, 0, 0.45);}
}

.slide-content:hover {
    background: rgba(0, 0, 0);

    animation-duration: 1s;
    animation-name: blacken;
} @keyframes blacken {  
    0%   {background-color: rgba(0, 0, 0, 0.45);}
    100% {background-color: rgba(0, 0, 0, 1);}
}

.slide-content h1 { font-size: min(20px, 2vw);}
.slide-content p { font-size: min(16px, 1.6vw);}

/* issue page */
/* 沿用大部分homepage設定 */
#issue-content-1 {
    position: relative;
    width: 100%;
    padding: 0 10% 0 10%;
    vertical-align: middle;

    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: min(calc(2.5vh), 25px);
    line-height: min(calc(3vh), 30px);

    text-shadow: 0px 6px 4px rgba(78, 82, 90, 0.80);
}

/* display method */
* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.d-none {
    display: none;
}

.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.jcsb {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.jcse {
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}


/* color control*/
/* bg-xxxxx has been use in bootstrap */
.bgc-primary { background-color: #112D32;}
.bgc-secondary { background-color: rgba(0, 201, 173, 0.1);}
.bgc-cover-primary { background: rgba(233, 227, 195, 0.3)}
.bgc-cover-secondary { background: rgba(0, 0, 0, 0.3)}
.color-primary { color: #4E525A;}
.color-secondary { color: #27292D;}
.color-light { color: #fff;}
.color-muted { color: #93827E;}

/* main elt. */

.article {
    font-family: 'Noto Sans TC', sans-serif;
    height: calc((95vh));
    max-height: calc((100vh - 40px));
}

.h-mid {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.txt-center {
    /* make single childelt. at the center of parent*/
    /* if has multi elt to set, use a div to package them */

    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;

    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}

.horizen-center {
    /* make single childelt. at the center of parent*/
    /* if has multi elt to set, use a div to package them */

    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:baseline;

    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:baseline;

    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:baseline;

    /* W3C */
    display:box;
    box-pack:center;
    box-align:baseline;
}

.v-mid {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.mt-60 { margin-top: 60px;}
.mt-30 { margin-top: 30px;}

.mb-30 { margin-bottom: 30px;}
.mb-60 { margin-bottom: 60px;}

.no-padding { padding: 0 0 0 0 !important;}

/* Contact */

#contact_list {
    font-family: Russo One;
    color: #27292D;
}

#Insitution {
    padding: 20px;
    margin: 40px
}
#Insitution h1::before{
    background-image: url('./image/white-bird-shape.png');
    background-size: 100px 100px;
    width: 100px;
    height: 100px;
    display: inline-block;
    content: "";
    transform: translate(-200px,15px);
    z-index: -500;
    position: absolute;

    
}

/* intro page */
/* moved to 'specific-intro.css' */

/* function */

#step::after {
    content: "arrow_forward_ios";
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    transform: translate(120px, 120px);
    z-index: -500;
    position: absolute;

    border: #4E525A solid 1px
}


#counting {
    color: #6b6c6d;
    font-family: Russo One;
    font-size: 36px;
    text-align: center;
    display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 40vh;
}


#result_title{
    color: #4E525A;
    font-family: Russo One;
    font-size: 36px;
    text-align: center;
    display:flex;
  justify-content:center;
  height:60px;
  width: 450px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: rgba(189, 175, 151, 0.83);

}

#counting_result{
    color: #ffffff;
    font-family: Russo One;
    font-size: 24px;
    display:flex;
  align-items:center;
  justify-content:center;
margin: 20px;
margin-top: 160px;
}

#read-image{
    width: 400px;
}

#model_head{
    color: #fff;
    font-size: 48PX;
    text-decoration: none;
    margin: 12px;
    text-align: left;
    -webkit-box-pack: start;
    -webkit-box-align: start;
}


#model_head::before{

    content: "→ ";   
}

#model_article{
    font-size: 24px;
    margin: 36px;
}

#topic{
    text-align: center;
    margin: 36px;
}