h1{font-family: "Gravitas One", serif;
font-size: 2.8rem;
font-style: normal;
color: rgb(219, 255, 91);}
h2{font-family: DM Serif Display;
    font-size: 3rem;
    color:rgb(231, 255, 53) ;
font-style: normal;
margin: 0 0 1rem 0;}
span
{font-family: "Gravitas One", serif;
    font-size: 3rem;
    color:rgb(175, 225, 165);}

header {background-color:rgba(57, 170, 85, 0.5);
padding: 1rem;
text-align: center;
background-image: url(../image/forestbanner.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.header-box{
    background-color: rgba(10, 79, 64, 0.7); /* 半透明背景 */
    border-radius: 20px;
    padding: 2rem;
    max-width: 80rem;
    margin: 0 auto;
}
p{font-family: "Ubuntu", sans-serif;
    font-weight: lighter;
    line-height: 1.4;
color: rgb(255, 255, 255);}
header p{max-width: 30rem;
    font-style: italic;
text-align: center;
margin: 1rem auto;
}



main {background-color: rgba(7, 110, 90, 0.7);
padding: 1rem}
.store-icon {
    width: 200px;
    height: auto;  
}

.logo {
    max-width: 200px;  
    width: 100%;  
    height: auto; 
    display: block;     
    margin: 0 auto;
    padding: 10px;   
}
footer{padding: 1rem;
    color: rgb(255, 255, 255);
background-color: rgba(57, 170, 85, 0.5) ;
text-align: center;}
footer a{display: inline-block;
margin-top: 0.5rem;
color: yellow;}

picture {margin: 0 0 1rem 0;
display: block;}
.logos {width: fit-content;
margin: 2rem auto;}


.who{
    background-color: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}
.when{
    background-color: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}
.what{
    background-color: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}
.where{
    background-color: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}
.how{
    background-color: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}
.why{
    background-color: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}

section picture img{
    border: 5px solid #d3dfcb;
    border-radius: 20px;
}

@media screen and (min-width: 60rem) {
h1{font-size: 4rem;}
    section.who{
    position: relative;
}
section.who h2::after{
    content: " ";
    display:block;
    position: absolute;
    height: 5rem;
    width: 5rem;
    background-image:url(../image/svg/students-couple-of-a-boy-and-a-girl-svgrepo-com.svg);
    background-size: 80%;
    background-position: center center;
    background-repeat: no-repeat;
    border: 5px solid #ffaa00;
    background-color: green;
    right:6rem;
    top:8rem;
    border-radius: 50%;
}
    section.where {
        position: relative;
    } 
section.where h2::after{
    content: " ";
    display:block;
    position: absolute;
    height: 5rem;
    width: 5rem;
    background-image:url(../image/svg/location-pin-svgrepo-com.svg);
    background-size: 90%;
    background-repeat: no-repeat;
    border: 5px solid #ffaa00;
    background-color: green;
    left:7rem;
    top:8rem;
    background-position: center center;
    border-radius: 50%;
}
    section.how {
        position: relative;
    } 
section.how h2::after{
    content: " ";
    display:block;
    position: absolute;
    height: 5rem;
    width: 5rem;
    background-image:url(../image/svg/smartphone-svgrepo-com.svg);
    background-size: 90%;
    background-repeat: no-repeat;
    border: 5px solid #ffaa00;
    background-color: green;
    right:8rem;
    top:1.5rem;
    background-position: center center;
    border-radius: 50%;
}
section.when{
    position: relative;
}
section.when h2::after{
    content: " ";
    display:block;
    position: absolute;
    height: 13rem;
    width: 13rem;
    background-image:url(../image/calendar.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    border: 8px solid #ffaa00;

    right:1rem;
    top:6rem;
    border-radius: 10%;
}
.wrapper 
{max-width: 60rem; /* 960px */
 margin: 0 auto; /* zero top/bottom, centered left/right */}

 .what .flex-container 
 {display: flex; flex-direction: row-reverse;
  align-items: center;}
 .what picture {width: 70%;}
 .what p{max-width: 18rem;
padding:20px 20px 10px 0px;}

.who .flex-container 
 {display: flex;
 align-items: center;}
 .who picture {width: 80%;}
 .who p{max-width: 15rem;
 padding: 1rem;}

.when .flex-container{
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap:wrap;

}

.when picture{
    width: 60%;
    flex: 0 0 75%;
    margin: 0;
}

.when p{
    max-width: 16rem;
    padding: 0;
    margin-top:15rem ;
}

.where picture{
  float: right;
  width: 65%;
  margin: 0 2rem 1rem 0;
}

.where .flex-container{
  display: flow-root; 
}

.where p{
  max-width: 18rem;
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: 1rem;
}

 .why picture{
  float: right;
  width: 70%;
  margin: 0 0 0rem 1rem;
}

.why .flex-container{
  display: flow-root;
}


.why p{
  max-width: 18rem;    
  margin: 7rem 0 0 0;           
}

.how .flex-container{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem;
}

.how picture{
    width: 55%;
    flex: 0 0 55%;
    margin-top: 0.5rem;
}

.how .flex-container > div{
    width: 40%;
    flex: 0 0 40%;
}

.how .logos{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0.75rem 0 0.5rem 0;
}
.how h3:first-of-type{
    margin-top: 0.5rem;
}

.how h3:nth-of-type(2){
    margin-bottom: 0.5rem;
}

.how ol{
    width: fit-content;
    color: rgb(255, 255, 255);
  
}

.how h3 {font-size: larger;
font-family: "Tilt Neon", sans-serif;
color: rgb(224, 180, 5);}
.how ol + p{
    text-align: left;
    color: yellow;
}
.how ol{margin-top: 0.5rem;
margin-bottom: 0.5rem;}
.how p{font-size:small;
color: rgb(255, 255, 255);}

}
a {
    color: yellow;
}
body {
    background-image: url(../image/background_1440x2560.jpg);
    background-repeat: repeat-y;
    background-position: center top;
    background-size: cover;
}