@charset "utf-8";

/*基本設定*/

body{
    background-color: lightblue;
}

section{
    width: 1000px;
    height:600px;
    margin: 50px auto;
    padding: 10px;
    background-color: LightCyan;
    box-sizing: border-box;
    border: 5px solid #000000;
    text-align: center;
    display: block;
}

h2{
    width: 500px;
    margin: 10px auto;
    padding: 10px;
}

ul{
    height: auto;
    width: auto;
    font-size: 150%;
    list-style-position: inside;
    text-align: center;
    padding: 0;
}

input[type="text"]{
    display: block;
    margin: 10px auto;
    font-size: 120%;
    padding: 5px;
}

.text-section{
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    border: 3px solid black;
    padding: 20px;
    box-sizing: border-box;
}

.text-section div{
    font-size: 200%;
    font-weight: bold;
    padding: 10px;
    width: 80%;
}

/*連結外部網站與PDF檔*/

a[href^="https"]{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 300%;
    color: tomato;
}

a[href$=".pdf"]{
    font-family: 'Times New Roman', Times, serif;
    font-size: 300%;
    color: orange;
    font-weight: bold;   
}

a :target{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 300%;
    color: blue;
}

/*選擇器運用*/

.example{
    margin-bottom: 20px;
}

.example :first-child{
    border: 2px dashed red ;
    font-weight: bold;

}

.example li:not(:first-child){
    color: purple;
    font-style: italic;
}

ul.example input:last-of-type{
    border: 2px solid blue;
    font-weight: bold;
    font-style: italic;
}

/*文字陰影效果*/

.text-shadow-1{
    text-shadow: 2px 2px purple;
}

.text-shadow-2{
    text-shadow: 3px 3px 3px red;
}

.text-shadow-3{
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue,0 0 5px darkblue;
}

/*文字裝飾*/

.clip-text-1{
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: transparent;
}

.clip-text-2{
    -webkit-text-stroke: 1px gray;
    text-shadow: 1px 1px 0 gray;
    -webkit-text-fill-color: transparent;
}

.clip-text-3{
    -webkit-text-stroke: 0.5px black;
    background: url(image/sunrise.jpg) center center no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 300%;
}

/*圓角外框*/

.radius-1{
    border: 5px dashed purple;
    border-radius: 20px;
}

.radius-2{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: purple;
}

.radius-3{
    border-radius: 30px / 10px;
    background-color: purple;
}

/*盒子陰影*/

.box-shadow-1{
    width: 100px;
    height: 50px;
    background-color: yellow;
    box-shadow: 10px 10px Aqua;
}

.box-shadow-2{
    width: 100px;
    height: 50px;
    background-color: yellow;
    box-shadow: 10px 10px 5px Aqua;
}

.box-shadow-3{
    width: 100px;
    height: 50px;
    background-color: yellow;
    box-shadow: 10px 10px 5px Aqua inset;
}

/*圖形外框*/

.border-image-1{
    border: 10px solid transparent;
    border-image: url(image/border.png) 30 stretch;
}

.border-image-2{
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(image/border.png) 30 round;
}

.border-image-3{
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(image/border.png) 30% round;
}

/*圖片大小尺寸*/

.bg-size-1,
.bg-size-2,
.bg-size-3{
    width: 500px;
    height: 500px;
    display: block;
    margin: 20px auto;
    transition: 0.3s ease;
    border: 3px solid black;
}

.bg-size-1{
    background-image: url(image/blue\ sky.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
}

.bg-size-2{
    background-image: url(image/beach.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 300px;
}

.bg-size-3{
    background-image: url(image/sunrise.jpg);
    background-repeat: no-repeat;
    background-size: 50% 50%;
    height: 300px;
}

/*漸層示範1*/

.linear-gradient-1{
    width: 100px;
    height: 50px;
    background: linear-gradient(to right,red,yellow);
}

.linear-gradient-2{
    width: 100px;
    height: 50px;
    background: linear-gradient(tomato,yellow,green);
}

.linear-gradient-3{
    width: 100px;
    height: 50px;
    background: linear-gradient(to left,rgba(255,99,71,0),rgba(255,99,71,1));
}

/*漸層示範2*/

.radial-gradient-1{
    width: 100px;
    height: 50px;
    background: radial-gradient(blue 30%,lightblue,lightCyan);
}

.radial-gradient-2{
    width: 100px;
    height: 50px; 
    background: radial-gradient(circle,blue 30%,lightblue,lightCyan);   
}

.radial-gradient-3{
    width: 100px;
    height: 50px;
    background: radial-gradient(farthest-side,blue 30%,lightblue,lightCyan);
}

/*圖片濾鏡*/

.filter-1,
.filter-2,
.filter-3{
    width: 500px;
    height: auto;
    display: block;
    margin: 20px auto;
    transition: 0.3s ease;
}

.filter-1{
    filter: grayscale(100%);
}

.filter-2{
    filter: opacity(50%);
}

.filter-3{
    filter: contrast(200%);
}