*, *::before, *::after { box-sizing: border-box;}
/* * { outline: 0.1dvw solid rgba(255, 0, 0, 0.3); } */
html{font-size: 100%; scroll-behavior: smooth;}
body{margin: 0; padding: 0; box-sizing: border-box; line-height: 1.5;}
#container{ max-width: 100%; height: auto; background-color: lightgrey; display: grid; grid-template-columns: 1fr;}
article{grid-column:1/5; grid-row: 1/2;}
footer{grid-column: 1/5; grid-row:2/3;}
hr{height: 0.25dvw;background:linear-gradient(45deg, lightgreen, burlywood, orange); width: 100%;}
article{position: relative; display: grid; grid-template-rows: repeat(3, 1fr); justify-items: center; align-items: center;}
img{float: left; margin: 1dvw; max-width: 100%;}
.start{position: relative; font-size: clamp(1rem, 2dvw + 0.5rem, 2rem); width: 100%; float: right; }
a:not(.email a){position: relative; display: block; font-size: clamp(1rem, 2dvw + 0.5rem, 2rem);}
.email{position:relative; display: flex; flex-flow: row nowrap;}
.website{display: flex; flex-flow: row nowrap; font-size: clamp( 1rem, 2dvw, 2rem); margin-block: 2dvh;}
.website a{font-size: clamp( 1rem, 2dvw, 2rem); margin-left: 1dvw;}


/** SETTINGS FOR OTHER DEVICES AND OTHER SIZES**/

/*max-width: 107rem = 1,712px */
@media only screen and (96rem <= width <= 107rem){
    .intro{font-size: clamp(1rem, 0.5dvw + 0.5rem, 2rem)；}
    .start{font-size: clamp(1rem, 1dvw + 0.5rem, 2rem); }
}

/*max-width: 96rem = 1,528px */
@media only screen and (85rem <= width <= 96rem){
    .intro{font-size: clamp(1rem, 1dvw + 0.5rem, 1.5rem)；}
    .start{font-size: clamp(1rem, 1dvw + 0.5rem, 1.5rem); }
}

/* max-width: 85rem = 1,360px */
@media screen and (75rem <= width <= 85rem) {
    .intro{font-size: clamp(1rem, 1dvw + 0.5rem, 1.5rem)；}
    .start{font-size: clamp(1rem, 1dvw + 0.5rem, 1.5rem); }
}

/* max-width: 75rem = 1,200px */
@media screen and (65rem <= width <= 75rem) {
    .intro{font-size: clamp(1rem, 1dvw + 0.15rem, 1.5rem)；}
    .start{font-size: clamp(1rem, 1dvw + 0.15rem, 1.5rem); }
    a:not(.email a){font-size: clamp(1rem, 1dvw + 0.5rem, 1.5rem); }
    .intro a span{font-size: clamp(1rem, 1dvw + 0.15rem, 1.5rem); }
}

/* max-width : 65rem  = 1,040px */
 @media screen and (55rem <= width <= 65rem) {
    .intro{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem)；}
    .start{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1.5rem); }
    a:not(.email a){font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    .intro a span{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
 }

/* max-width: 55rem =  880px */
@media screen and (45rem <= width <= 55rem){
    .intro{font-size: clamp(0.5rem, 0.1dvw + 0.5rem, 1rem)；}
    .start{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1.5rem); }
    a:not(.email a){font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    .intro a span{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
 }

/* max-width: 45rem =  720px */
 @media screen and (35rem <= width <= 45rem){
    .intro{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem)；}
    .start{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1.5rem); }
     a:not(.email a){font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    .intro a span{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
 }

/* max-width: 35rem =  560px */
 @media screen and (25rem <= width <= 35rem){
    .intro{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem)；}
    .start{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1.5rem); }
    a:not(.email a){font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    .intro a span{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
 }

/* max-width: 25rem =  400px */
 @media screen and (20rem <= width <= 25rem){
    .intro{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem)；}
    .start{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1.5rem); }
    a:not(.email a){font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    .intro a span{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
 }