body {
  color: rgb(2, 2, 53);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 18px;
}

h1 {
  color: rgb(239, 24, 4);
}

h2 {
  color: blue;
}

article {
  width: 60%;
  max-width: 1440px;
  margin: 0 auto;
}

h1,
h2,
h3 {
  margin-top: 4rem;
}

h1,
h2,
h3 {
  margin-bottom: 1rem;
}

.classification-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.classification-text {
  flex: 0 0 70%;
}

.classification-image {
  flex: 0 0 30%;
}

.classification-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .classification-layout {
    flex-direction: column;
  }

  .classification-text,
  .classification-image {
    flex: 100%;
  }
}

.classification-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;

  transform: translateY(-50px);
}

.rotated {
  transform: rotate(90deg);
}

.rotated img {
  width: 50px;
}

.classification-image {
  width: 100px;
}

.history-engeland {
  width: 700px;
}

.float-image-right {
  float: right;
  width: 65%;
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .float-image-right {
    float: none;
    width: 100%;
    margin: 1rem 0;
    display: block;
  }
}

#classification {
  margin-bottom: 1rem;
}

#history h2 {
  margin-top: 1rem;
}

.center-image {
  display: block;
  margin: 1.5rem auto;
  max-width: 100%;
  height: auto;
}

.womanL {
  width: 200px;
  mix-blend-mode: multiply;
}

.womanR {
  width: 200px;
  mix-blend-mode: multiply;
}

.woman {
  display: flex;
}

.woman img {
  width: 50%;
  height: auto;
}

@media (max-width: 768px) {
  .gif-row {
    flex-direction: column;
  }

  .gif-row img {
    width: 100%;
  }
}

.materials-layout {
  display: flex;
  gap: 2rem;
}

.materials-and-tools {
  width: 1300px;
  transform: translateX(-260px);
}

@media (max-width: 600px) {
  .responsive-image {
    width: 80%;      
  }
}

a {
  text-decoration: none;
  color: rgb(0, 142, 225);
}

h1 {
  text-align: center;
  font-size: 5rem;
}

.introduction {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.text-gif {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.text-col {
  flex: 0 0 70%;
}

.gif-col {
  flex: 0 0 30%;
}

.gif-col img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

.modern {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

.float-image-left {
  float: left;
  width: 50%;
  margin: 0%;
  height: auto;
  mix-blend-mode: multiply;
}

@media (max-width: 768px) {
  .float-image-left {
    float: none;
    width: 100%;
    margin: 1rem 0;
    display: block;
  }
}

.float-image-rightt {
  float: right;
  width: 70%;   
  mix-blend-mode: multiply;            
  margin:0
  height: auto;
  
}

.clear {
  clear: both;
}

@media (max-width: 768px) {
  .float-image-right {
    float: none;
    width: 100%;
    margin: 1rem 0;
    display: block;
  }
}

.banner {
  position: relative;
  width: 100%;
  height: 290px;
  overflow: hidden;
}

.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   
  transform-origin: center;
  mix-blend-mode: multiply;

  opacity: 0;
  animation: fade 12s infinite;
}


.banner img:nth-child(1) { animation-delay: 0s; }
.banner img:nth-child(2) { animation-delay: 4s; }
.banner img:nth-child(3) { animation-delay: 8s; }

@keyframes fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  33%  { opacity: 1; }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 768px) {
  .banner {
    height: 180px;
  }
}