@font-face {
  font-family: hearts;
  src:url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf)
}

p
{
  font-family: hearts;
  color: beige;
}

body
{
  background-image: url(matchacolour.jpg);
  background-size: cover;
  background-repeat: repeat;
}

.header
{
  border: 1px solid beige;
  background: beige;
  position: absolute;
  top: 120px;
  left: 78px;
  width: 1000px;
}

.menu
{
  border: 1px solid beige;
  width: 230px;
  position: relative;
  top: 90px;
  left: 70px;
  height: 400px;
  background-image: url(blurflower.jpg);
  background-size: cover;
  opacity: 90%;
  text-align: center;
  padding: 30px;
}

.section1
{
  border: 1px solid red;
  position: absolute;
  top: 140px;
  left: 308px;
  height: 399px;
  width: 700px;
  background-image: url(spiral.jpg);
  background-size: cover;
}

.article1
{
  border: 1px solid green;
  width: 80px;
  height: 50px;
}

*{
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  position: absolute;
  top: 70px;
  left: 350px;
}

nav a {
  font-size: 20px;
  font-weight: 500;
  font-family: hearts;
  text-decoration: none;
  color: blue;
  padding: 0.4rem 0;
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
nav a:hover {
  color: orange;
}

nav:has(a:hover) a:not(:hover) {
  opacity: 0.3;
}