/* @import url("https://fonts.googleapis.com/css2?family=Clash+Grotesk:wght@300;400;500;600;700&display=swap"); */

@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/clash-grotesk/ClashGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/clash-grotesk/ClashGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/clash-grotesk/ClashGrotesk-Semibold.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
    background-color: #F5F5F5;
    --spacing: 1rem;
    --font-sans: "Clash Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* font-family: 'Clash Grotesk', sans-serif; */
    font-size: 110%;
    width: 100%;
}

@media (width > 600px) {
    :root {
        font-size: 150%;
    }
}

@media print {
  
    :root{
        --color-bg: blue;
      }
  .link-to-text{
    display: none !important;
  }

  h1 {
    color: #2e2e2e !important;
}

    p {
    text-align: left !important;
    margin: 0 auto !important;
    width: 75ch !important; 
  }

  .color-block-left, .color-block-right{
    display: none !important;
    }


  .right-block{
   inline-size: 90% !important;
	position: static !important;
    margin-bottom: 2rem !important;
}  

.color-bar {
  display: none !important;
}

.metadata {
    padding-top: 1rem !important;
}
}


html, body { font-family: var(--font-sans); }

body {
    padding: var (--spacing);
}

header{
    background-color: black;
    padding-bottom: 2rem;
    padding-top: 5rem;
}


h1 {
    font-size: 6rem;
    color:rgb(255, 255, 255);
    padding-left: 2rem;
    padding-bottom:1rem;
    font-weight: 700;
}

@media (width > 600px) {
h1 {
    font-size: 7rem;
    color:rgb(255, 255, 255);
    padding-left: 2rem;
    padding-bottom:1rem;
}
}


.metadata {
    font-size: 1rem;
    color:rgb(255, 255, 255);
    padding-left: 2.5rem;
    display: flex;
    justify-content:flex-start;
    gap: 1.5rem;
    padding-top: 5rem;
}

article {
    margin-block:3rem;
}


   p { 
    padding-inline: 4rem;
    padding-block: 1rem;
    line-height: 1.9rem;
    }


    @media (width > 600px) { 
    p { 
    max-width: 65ch;
    padding-inline: 5rem;
    padding-block: 1.5rem;
    line-height: 1.9rem;
    margin: 0 auto; 
    }
    }

/* left-block & right-block classes are assigned to sections */
.left-block, .right-block{
    margin-bottom: 2rem;
}

  @media (width > 600px) {
    .left-block {
    inline-size: 90%;
	position: static;
    margin-bottom: 2rem;
}
 }


@media (width > 600px) {
  .right-block{
    inline-size: 60%;
  left: 40%; 
  margin-bottom: 2rem;
  position: relative;
}  
} 

 
.content-left {
    padding-inline: 4rem;
    padding-block: 1rem;
    line-height: 1.9rem;
}

@media (width > 600px) { 
    .content-left { 
    max-width: 65ch;
    padding-inline: 5rem;
    padding-block: 1.5rem;
    line-height: 1.9rem;
    margin-left: -1rem;
    }
    }

.content-right {
    padding-inline: 4rem;
    padding-block: 1rem;
    line-height: 1.9rem;
}

@media (width > 600px) { 
    .content-right { 
    max-width: 65ch;
    padding-inline: 5rem;
    padding-block: 2rem;
    line-height: 1.9rem;
    margin-left: -1rem;
    }
    }


/* color block for mobile */
.color-block-left, .color-block-right{
  display: flex;
  justify-content: center;   
  align-items: center;       
  width: 100%;
  aspect-ratio: 5 / 2;
  margin: 2rem auto;
  z-index: 10;
  position: sticky; 
  top: 0;  
  backdrop-filter: blur(0.2rem);
  /* opacity: 70%; */
}
    /* backdrop-filter: blur(10px); */
  
  /* filter:blur(0.2rem); 
  opacity: 90%; 

}


/* @media (min-width: 600px) {
 .color-block-left, .color-block-right {
    width: 65%;
    aspect-ratio: 7 / 1.5;
    position: static;
  }
} */

@media (width > 600px) {
.color-block-left {
    width: 65%;
    aspect-ratio: 7 / 1.5;
    position: sticky;
  }

 .color-block-right {
   width: 100%;
    aspect-ratio: 7 / 1.5;

    position: sticky;
    margin-left: auto;
 }
}



/* this part styles the outer part of the rectangles */

.black {
  background: linear-gradient(to right, rgb(0, 0, 0), rgba(186, 186, 186, 0.7));
    margin-left: 0;          
  margin-right: auto;
}

.white {
  background: linear-gradient(to right, rgb(255, 255, 255), rgba(208, 208, 208, 0.7));
    margin-left: 0;          
  margin-right: auto;
}

.yellow {
  background: linear-gradient(to right, rgb(255, 212, 42), rgb(255, 255, 188, 0.7));
    margin-left: 0;       
  margin-right: auto;
}

.orange {
  background: linear-gradient(to right, #FF6A00, rgb(255, 201, 107, 0.7));
    margin-left: 0;       
  margin-right: auto;
}

.red {
  background: linear-gradient(to right, #f01101, rgb(255, 0, 0, 0.7));
    margin-left: 0;       
  margin-right: auto;
}

.green {
  background: linear-gradient(to right, #45C903, rgb(2, 35, 0, 0.7));
    margin-left: 0;       
  margin-right: auto;
}

.blue {
  background: linear-gradient(to right, #005BC3, rgb(119, 183, 255, 0.7));
    margin-left: 0;       
  margin-right: auto;
}

.purple {
  background: linear-gradient(to right, #941DF6, rgb(23, 2, 143, 0.7));
    margin-left: 0;       
  margin-right: auto;
}

/* this part styles the inner part of the rectangles */

.inner {
  width: 70%;               
  height: 60%;         
}


.black-in{
  background-color: #000000;
}


.white-in{
  background-color: #ffffff;
}


.yellow-in{
  background-color: #FFD737;
}


.orange-in{
  background-color: #FF6F00;
}


.red-in{
  background-color: #FF0000;
}


.green-in{
  background-color: #359F00;
}

.blue-in{
  background-color: #005BC3;
}

.purple-in{
  background-color: #941DF6;
}


.gray-title{
  color: rgb(120, 120, 120);
}

.yellow-title{
  color: #FFD737;
}

.orange-title{
  color: #FF6F00;
}

.red-title{
  color: #FF0000;
}

.green-title{
  color: #359F00;
}

.blue-title{
  color: #005BC3;
}

.purple-title{
  color: #941DF6;
} 

/* this part is assigned to footer */

footer { 
    color:white;
    text-align:right;
    background-color: black;
    font-size: 1rem;
    margin-top: 5rem;
    padding-inline: 3rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
}

@media (width > 600px) {
    footer { 
    color:white;
    text-align:right;
    background-color: black;
    font-size: 1rem;
    margin-top: 5rem;
    padding-inline: 3rem;
    padding-top: 6rem;
    padding-bottom: 4rem;
}
}

.color-name{
  font-size: 2rem;
}

em{
  color: rgb(65, 65, 65);
  font-weight: 500;
}



/* color bar in the header */
.color-bar {
  position: relative;
  height: 20px;  /* total height of the bar */
  margin-top: 1rem;
}

.line {
  position: absolute;
  top: 50%;
  left: 0;  
  width: 70%;
  height: 20px; /* thickness of the white line */
  background: white;
  transform: translateY(-50%);
}

.colors {
  position: absolute;
  /* right: 0; */
  left: 60%;
  top: 50%;
  display: flex;
  transform: translateY(-50%);
  padding-inline-start: 2rem;
  /* padding-left: 1px; */
}

.color {
  width: 30px;
  height: 20px;
}


/* link */
a {
  font-size: 1rem;
  color:rgb(255, 255, 255);
  float: right;  
  position: relative;
  left: 15%;
	margin-inline-end: 5rem;
  margin-bottom:3rem;
  text-decoration: underline; 
}

a:hover {
  color:rgb(181, 241, 255);
}

a:visited {
  color:rgb(253, 98, 98);
}