/* ---- Assignment 5 - INKLESS ------ */
/*          due 28 November 2025
            Jenny de Bruyn - J283662

   Original Work obtained from the internet is used  in this student assignment in accordance with Section 40 of the Copyright Act 1968 under the principle of Fair Dealing for educational purposes only.
*/
@charset "utf-8";
@font-face {
        font-family: "inkless-inter";
        src: url("../fonts/Inter-V.ttf") format("truetype-variations");
        font-weight: 100 900; /* full weight range available */
        font-style: normal;
        font-display: swap;
}
/*        font-weight: 100; /* thin/hairline - very light */
/*        font-weight: 200; /* extra light  */
/*        font-weight: 300; /* light */
/*        font-weight: 400; /* normal */
/*        font-weight: 500; /* medium */
/*        font-weight: 600; /* semi-bold */
/*        font-weight: 700; /* bold */
/*        font-weight: 800; /* extra bold */
/*        font-weight: 900; /* black - heaviest weight */

* {
    font-family: "inkless-inter", sans-serif;
    font-size: 16px;
    color: black;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: white; 
    font-family: "inkless-inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}
/* --- header --- */
header{
    width: auto;
    min-height: 50px;
    padding: 1%;
    text-align: center;
}
header h1{
    font-weight: 700; /* bold */
    font-size: 48px;
}
/* --- nav --- */
nav{
    width: 100%;
    min-height: 50px;
    padding: 1% 10% 2%;
    font-weight: 100; /* thin */
}
nav ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
/* --- main --- */
main{}
/* --- main for home page ---*/
#home{
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 65vh; /* view height = 650px */
}
#home h2{
    text-align: left; 
    font-weight: 700; /* bold */
    font-size: 150px;
    line-height: 1;
}
#home h3{
    text-align: left;
    font-weight: 100; /* thin */
    font-size: 36px;
    padding-top: 3%;
}
#home h4 {
    padding: 4% 0 2%;
    text-align: left;
}
#home a{
    text-align: center;
    font-weight: 100; /* thin */
    font-size: 16px;    
  
    border: 1px solid #1c1c1c;
    border-radius: 5px;
  
    text-decoration: none;
    padding: 1%;
    background-color: white;
    cursor: pointer;
}
#home a:hover {
    color:#4b8fe2;
    border: 1px solid #4b8fe2;
    background-color: rgba(#eaeaea, 0.3);
    font-weight: 500; /* regular */
}
/* --- main for gallery page ---*/
#gallery{
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 65vh; /* view height = 650px */
}
#gallery h2{
    font-weight: 700; /* bold */
    font-size: 36px;
    padding-top: 2%; 
}
#gallery #swatch{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
#gallery #swatch section{
    width: 200px;
    height: 300px;
    margin: 1em auto;
    box-shadow:  1px 1px 2px 2px #eee;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#gallery #swatch section h3{
    padding: 1% 10% 40%;
    font-size: 24px;
    font-weight: 400; /* normal */
}
#gallery #swatch .gingham{
    background-color: #f6f3ec;
    background-image: linear-gradient(90deg,rgba(60,120,180,0.15) 50%,  transparent 50%),linear-gradient(rgba(60,120,180,0.15) 50%, transparent 50%);
    background-size: 20px 20px;
}
#gallery #swatch .pixelgrid{
    background-color: #f0f0f0;
    background-image: linear-gradient(90deg,rgba(0,0,0,0.05) 1px,  transparent 1px),
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}
#gallery #swatch .cloud{
    background-image:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.9), rgba(255,255,255,0) 60%),
        radial-gradient(circle at 60% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%),
        radial-gradient(circle at 50% 70%, rgba(255,255,255,0.8), rgba(255,255,255,0) 65%),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%);
    background-color: #d0e4f8; /* subtle sky tint */
    background-size: 40px 40px;
}
#gallery #swatch .woodgrain{
    background-color: #F5deb3;
    background-image: repeating-radial-gradient(ellipse at center,  #deb887 0px, #deb887 5px, #d2a679 6px, #d2a679 10px); 
    background-size: 200px 300px;
}
#gallery #swatch .polka-dot{
    background-color: #F5e9d0;
    background-image: radial-gradient(circle at center, #ffb547 10%, transparent 11%),
        radial-gradient(circle at center, #5ef1c2 10%, transparent 11%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px; /* offset the second gradient */
}
#gallery #swatch section p{
    font-size: 16px;
    font-weight: 100; /* thin */
    padding: 0 10%;
    height: 100%;
    text-align: left;
}
#gallery #swatch section a{
    display: inline-block;
    padding: 5px;
    font-weight: 300; /* light */
    /*border: 2px solid white;*/
    background-color: white;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
#gallery #swatch section a:hover{
    color:#4b8fe2;
    background-color: rgba(#eaeaea, 0.3);
    font-weight: 500; /* medium */
}

/* --- main for pattern page ---*/
#pattern{
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 65vh; /* view height = 650px */
/* grid for pattern content */
    display: grid;
    grid-template-areas: 
     "desc design"
     "code design"
     "explain explain";
    grid-template-columns: 1fr 2fr;
    grid-template-rows: minmax(400px,auto) minmax(100,auto) auto;
}
#pattern aside{
    grid-area: desc;
}
#pattern aside h2{
    font-weight: 700; /* bold */
    font-size: 36px;
    padding-top: 2%; 
}
#pattern aside p{
    text-align: left;
    font-weight: 100; /* thin */
    font-size: 16px;
    padding: 1% 0;
}
#pattern article{
    grid-area: design;
    width: 100%;
    background-clip: content-box;

/* gingham design */
    background-color: #f6f3ec;
    background-image: linear-gradient(90deg,rgba(60,120,180,0.15) 50%,  transparent 50%),linear-gradient(rgba(60,120,180,0.15) 50%, transparent 50%);
    background-size: 50px 50px;
}
#pattern figure{
    grid-area: code;
    width: 100%;
}
#pattern figure figcaption{
    text-align: left;
    font-weight: 600; /* semi-bold */
    font-size: 24px;
    padding: 1% 0;
}
#pattern figure p{
    text-align: left;
    font-weight: 100; /* thin */
    font-size: 16px;
    padding: 1% 0;
}
#pattern section{
    grid-area: explain;
}
#pattern section summary{
    text-align: left;
    font-weight: 600; /* semi-bold */
    font-size: 16px;
    padding: 1% 0;
}
#pattern section p{
    text-align: left;
    font-weight: 100; /* thin */
    font-size: 16px;
    padding: 1% 0;
}
#pattern section h3{
    text-align: left;
    font-weight: 500; /* medium */
    font-size: 16px;
    padding: 1% 0;
}
#pattern section ul{
    width: 100%;
    text-align: left;
    font-weight: 400; /* regular */
    font-size: 16px;
    list-style: none;
}
/* --- main for resources page ---*/
#resources{
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}
#resources h2{
    font-weight: 700; /* bold */
    font-size: 36px;
    padding-top: 2%; 
}
#resources h3{
    text-align: left;
    font-weight: 600; /* semi-bold */
    font-size: 24px;
    padding-top: 3%; 
}
#resources p{
    text-align: left;
    font-weight: 100; /* thin */
    font-size: 16px;
    padding: 1% 0;
}
#resources a{
    text-align: left;
    font-weight: 500; /* medium */
    font-size: 16px;
}
#resources #tools{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
#resources #tools section{
    width: 250px;
    min-height: 200px;
    padding: 0 1%; 
    margin: 1em auto;
    box-shadow:  1px 1px 2px 2px #eee;
}
#resources #learn{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}
#resources #learn section{
    width: 100%;
    max-height: fit-content;
    padding: 1%; 
    margin: 1em auto;
    box-shadow:  1px 1px 2px 2px #eee;
}
#resources #play{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}
#resources #play section{
    width: 100%;
    max-height: fit-content;
    padding: 1%; 
    margin: 1em auto;
    box-shadow:  1px 1px 2px 2px #eee;
}
/* --- main for contact page ---*/
#contact{
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 65vh; /* view height = 650px */
}
#contact h2{
    font-weight: 700; /* bold */
    font-size: 36px;
    padding-top: 2%;
    color: #1c1c1c;    
}
#contact p{
    text-align: left;
    font-weight: 100; /* thin */
    font-size: 24px;
    padding-top: 2%;
}
#contact fieldset{
    border: none;
    padding: 1% 0;
}
#contact label{
    font-weight: 500; /* regular */
    font-size: 24px;
    text-align: left;
}
#contact input,
#contact textarea{
    width: 100%;
    box-sizing: border-box;
    font-weight: 500; /* regular */
    font-size: 16px;
    padding: 12px;
    border: 1px solid #1c1c1c;
    border-radius: 5px;
    cursor: text;
}
#contact textarea{
    min-height: 140px;
}
#contact input[type=submit]{
    width: fit-content;
    padding: 1% 2%;
    font-weight: 100; /* thin */
    font-size: 24px;

    background-color: white;
    border: 1px solid #1c1c1c;
    border-radius: 5px;
    
    cursor: pointer;
}
#contact input[type=submit]:hover{
    color:#4b8fe2;
    background-color: rgba(#eaeaea, 0.3);
    font-weight: 500; /* regular */
    border-color: #4b8fe2;
}
/* --- footer --- */
footer{
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2% 0 0; 
    text-align: center;
}
footer p{
    font-weight: 500; /* regular */
    font-size: 10px;
}
/* --- classes --- */
.nav-link{
    text-decoration: none;
    display: block;
    padding: 1em;
}
.nav-link:hover {
    color:#4b8fe2;
    background-color: rgba(#eaeaea, 0.3);
    font-weight: 500; /* regular */
}
.button {
    position: absolute;
    right: 10%;
    border: 1px solid;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 100; /* thin */
    text-align: center;
    text-decoration: none;
    padding: 1%;
    background-color: white;
    cursor: pointer;
}
.button:hover {
    color:#4b8fe2;
    background-color: rgba(#eaeaea, 0.3);
    font-weight: 500; /* regular */
}
/* --- hide heading text --- */
.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/* --- end --- */
/* --- responsive breakpoints - media query --- */
/* --- mobile ---*/
@media screen and (max-width: 700px){
    /* --- main for home page ---*/
#home h2{
    font-size: 100px;
    line-height: 1;
}
    /* --- main for gallery page ---*/
    /* no media screen width changes necessary */ 
    /* --- main for resources page ---*/
    /* no media screen width changes necessary */    
    /* --- main for contact page ---*/
    /* no media screen width changes necessary */
    
    /* --- main for patterns page ---*/
#pattern{
/* grid for pattern content */
    display: grid;
    grid-template-areas: 
     "desc" 
     "design"
     "code"
     "explain";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
}
#pattern aside{
    height: 450px;
}
#pattern article{
    height: 400px;
}
} 

/* --- end --- */