Issue
For my buttons towards my code, it's not allowing the button to turn the cursor into a pointer when moving onto the button, and after a while my hover pseudo class selector is no longer working for the button. I used ChatGPT to figure out where I may have gone wrong, and it showed that putting the buttons in position relative may have screwed the accessibility of the button.
Can you show me where I may have gone wrong with this code?
.hero-btn {
/*
position: relative;
top: 200px;
left: 30px; */
margin-left: 10px;
padding: 10px 20px;
font-size: 1rem;
border: none;
cursor: pointer;
border-radius: 25px;
font-family: 'Open-Sans', sans-serif;
transition: .3s ease-in-out;
}
.blog-btn {
background-color: #000;
color: #fff;
}
.blog-btn:hover {
background-color: var(--secondary-color);
color: #fff;
}
.sub-btn {
background-color: #000;
color: #fff;
}
.sub-btn:hover {
background-color: var(--primary-color);
color: #fff;
}<button type="submit" value="Read The Blog" class="blog-btn hero-btn">
Read The Blog
</button>
<button type="submit" value="Subscribe" class="sub-btn hero-btn">
Subscribe
</button>The input element was used first before being changed over to the button element. The button was once hovering and the cursor: pointer; worked towards the checking the accessibility. After a while the button began to not work when trying to check for accessibility, I tried changing over the class attributes, was a bust there. I tried changing the position or commenting out the position all together still not working. I also redid the code once more to make sure it wasn't a spelling error towards the code.
Solution
The problem is caused by the yoga-section element overlaying the buttons, so that when you attempt to click the buttons, you are actually clicking the hitbox of the yoga-section element.
The simplest fix is to apply a positive z-index to the buttons such that they are stacked on top of the yoga-section element:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #33a112;
--secondary-color: #3acabb;
--complementary-color: #fff;
}
body {
min-height: 100vh;
background-color: var(--complementary-color);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
box-shadow: 0px 0px 5px 0px;
}
.logo {
font-size: 2rem;
color: var(--secondary-color);
text-decoration: none;
font-weight: 600;
font-family: 'Ubuntu', sans-serif;
}
.nav-link a {
position: relative;
font-size: 16px;
color: #000;
text-decoration: none;
font-weight: 250px;
margin-left: 15px;
font-family: 'Open-Sans', sans-serif;
}
.nav-link a::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: .3s;
}
.nav-link a:hover {
color: var(--secondary-color);
}
.nav-link a:hover::before {
width: 100%;
}
main#main-header {
margin-top: 5px;
margin-bottom: -775px;
padding: 10px 100px;
text-align: justify;
background-color: beige;
}
div.hero {
margin-left: 60px;
}
.hero h1 {
font-size: 9rem;
color: var(--secondary-color);
font-weight: 600;
font-family: 'Ubuntu', sans-serif;
}
.hero h3 {
font-size: 1.5rem;
color: var(--primary-color);
font-weight: 600;
font-family: 'Ubuntu', sans-serif;
margin-top: 7px;
margin-left: 30px;
}
.hero-h1, .hero-h3 {
position: relative;
top: 120px;
left: -80px;
text-align: justify;
}
img.hero-img {
width: 600px;
height: 100%;
object-fit: cover;
border-radius: 10px;
display: block;
box-shadow: 0px 0px 8px 0px;
margin-left: 215px;
}
.hero-disc {
position: absolute;
top: 735px;
left: 110px;
font-family: 'Open-Sans', sans-serif;
font-size: medium;
color: var(--secondary-color);
}
.food1 {
width: 520px;
position: relative;
top: -530px;
left: 700px;
z-index: 3;
}
.travel2 {
width: 550px;
position: relative;
top: -540px;
left: 1110px;
z-index: 2;
}
.yoga1 {
width: 600px;
position: relative;
top: -910px;
left: 549px;
z-index: 1;
}
.hero-btn {
position: relative;
z-index: 1;
top: 200px;
left: 30px;
margin-left: 10px;
padding: 10px 20px;
font-size: 1rem;
border: none;
cursor: pointer;
border-radius: 25px;
font-family: 'Open-Sans', sans-serif;
transition: .3s ease-in-out;
}
.blog-btn {
background-color: #000;
color: #fff;
}
.blog-btn:hover {
background-color: var(--secondary-color);
color: #fff;
}
.sub-btn {
background-color: #000;
color: #fff;
}
.sub-btn:hover {
background-color: var(--primary-color);
color: #fff;
}
hr {
background-color: #f3f3f3;
}
section.yoga-section {
height: 1275px;
margin-top: -2px ;
padding: 10px 100px 10px;
background-color: var(--secondary-color);
position: relative;
text-align: center;
border: #000 solid 2px;
border-radius: 10px;
}
div.yoga-container {
position: relative;
top: -600px;
left: -40px;
}
.yoga-img {
width: 1300px;
position: relative;
top: 650px;
left: -300px;
}
.h2-1 {
font-size: 6rem;
color: var(--complementary-color);
font-weight: 600;
font-family: 'Ubuntu', sans-serif;
text-align: right;
position: relative;
left: 50px;
top: -235px;
}
.h2-1 span{
color: var(--primary-color);
font-size: 8rem;
}
span.peace {
color: beige;
font-size: 8rem;
}
section#travel-section {
width: 100%;
height: 85vh;
margin-top: -100px;
background: linear-gradient(80deg, var(--primary-color), beige);
background-size: 400% 400%;
animation: gradient 8s ease-in-out infinite;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 50px;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 65%;
}
}
article.travel-art-label {
height: 560px;
width: 500px;
border: 5px solid black;
display: inline-block;
position: relative;
top: 180px;
left: 210px;
border-radius: 15px;
box-shadow: 25px 25px 20px 0;
background-color: beige;
}
.flex {
width: 500px;
height: 100%;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
align-items: center;
}
.h2-trav {
font-size: 3rem;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
margin-left: 6px;
}
h2.places {
margin-right: 125px;
}
ul li {
width: 75%;
margin-bottom: 20px;
margin-top: 30px;
padding: 25px 20px;
list-style-type: none;
font-family: 'Open-Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
}
.travel-with, .travel-way {
margin-top: 5px;
margin-bottom: 22.5px;
}
.travel-need, .travel-supply {
margin-top: 47.5px;
}
.list {
margin-bottom: 45px;
}
li.travel-list {
margin-top: 25px;
margin-bottom: -25px;
}
.list-p {
font-size: 16px;
font-style: italic;
}
section#healthy-recipes {
width: 100%;
height: 50vh;
}
table {
margin-top: 2%;
margin-left: 2%;
}
h2#healthy-h2 {
font-family: 'Ubuntu', sans-serif;
font-size: 2.5em;
position: relative;
top: 15px;
left: 10px
}
.table-head, .table-data {
border: 2px solid #0a0a23;
padding: 10px 5px;
border-radius: 4px;
}
.table-head {
background-color: var(--secondary-color);
color: #fff;
font-weight: 700;
font-size: 1.2em;
box-shadow: 0 0 2px 0 black;
}
h3#healthy-h3 {
display: flex;
justify-content: flex-end;
margin-right: 100px;
margin-top: -250px;
font-family: 'open-sans', sans-serif;
font-size: 2rem;
}
footer {
background-color: black;
color: white;
margin-top: -100px;
}
ol.list {
margin-bottom: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta description="design" />
<title>Sarah's Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu:wght@700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!--Begin Navigation-->
<header class="header">
<div class="nav-logo">
<a href="#" class="logo">Logo</a>
</div>
<div class="nav-link">
<a href="#home" class="primary">Home</a>
<a href="#yoga" class="secondary">Yoga</a>
<a href="#travel" class="primary">Travel</a>
<a href="#healthy" class="secondary">Healthy Recipes</a>
<a href="#contact" class="primary">Contact</a>
</div>
</header>
<!--End Navigation-->
<!--Begin Main-->
<main id="main-header">
<div class="hero">
<h1 class="hero-h1">
Travel,<br />
Thrive,<br />
Transform.
</h1>
<h3 class="hero-h3">
Experience the World through Travel,<br />
Embrace Wellness with Yoga,<br />
Discover Health with Wholesome Recipes.
</h3>
<p class="hero-disc">
Join our global community in uncovering a path to personal growth as
<br />
we embark on a journey to live a life of meaning and purpose together!
</p>
<button type="submit" value="Read The Blog" class="blog-btn hero-btn">
Read The Blog
</button>
<button type="submit" value="Subscribe" class="sub-btn hero-btn">
Subscribe
</button>
</div>
<!--Begin Hero Images-->
<div class="img-section">
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/food1.jpg"
width="25%"
title="Healthy Food Lifestyle"
class="hero-img food1"
/>
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/travel2.jpg"
width="25%"
title="Traveling Lifestyle"
class="hero-img travel2"
/>
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/yoga1.jpg"
width="25%"
title="Yoga Lifestyle"
class="hero-img yoga1"
/>
</div>
</main>
<!--End Hero Images-->
<hr />
<!--Begin Yoga Section -->
<section class="yoga-section">
<div class="yoga-container">
<img src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/yoga-2.jpg" title="Yoga Lifestyle" class="yoga-img" />
<h2 class="h2-1">
Where<br />
The union of <br />
<span><em>Breath</em></span
>,<br />
<span><em>Body</em></span
>,<br />
and <span><em>Mind</em></span
>,<br />
Illuminates<br />
the path <br />
to inner <br /><span class="peace">Peace and Balance.</span><br />
</h2>
</div>
</section>
<!--End Yoga Section 1-->
<!--Begin Travel Section -->
<section id="travel-section">
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav">What's The Best Way To Travel?</h2>
<ul class="travel-way">
<li class="travel-supply">
Always carry essential documents like passports and visas.
<img src="" alt="" />
</li>
<li class="travel-supply">
Research local customs and traditions before travel
</li>
<li class="travel-supply">Keep an emergency contact list handy.</li>
</ul>
</div>
</article>
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav">What Do I Need To Travel With?</h2>
<ul class="travel-with">
<li class="travel-need">
Supported Travel Gear with New Luggage and fresh supplies and
everyday daily clothes for the new day
</li>
<li class="travel-need">
Come prepared with emergency funds for the rainy days
</li>
<li class="travel-need">Passports and Visas are always forsure</li>
</ul>
</div>
</article>
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav places">Where Should I Travel To Next?</h2>
<ul class="list">
<li class="travel-list">
<span class="trav-country">Paris, France;</span>
<p class="list-p">
Romantic streets, iconic museums, and exquisite cuisine, an
unforgettable story unfolds
</p>
</li>
<li class="travel-list">
<span class="trav-country">Tokyo, Japan;</span>
<p class="list-p">
Ancient traditions meet futuristic marvels, amidst a gastronomic
journey and a tapestry of diverse cultures, all within a city
pulsating with vibrant energy.
</p>
</li>
<li class="travel-list">
<span class="travel-country">Machu Picchu, Peru;</span>
<p class="list-p">
Ancient wonders amid stunning mountains, merging history,
breathtaking landscapes, and vibrant Peruvian culture.
</p>
</li>
</ul>
</div>
</article>
</section>
<!--End Travel Section -->
</body>
</html>An arguably more maintainable fix is to rework the non-sensical use of position: relative and top/left to instead use more sensible CSS properties to more predictably layout elements, such that there is less overlaying of elements. For example as a rough rework:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #33a112;
--secondary-color: #3acabb;
--complementary-color: #fff;
}
body {
min-height: 100vh;
background-color: var(--complementary-color);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
box-shadow: 0px 0px 5px 0px;
}
.logo {
font-size: 2rem;
color: var(--secondary-color);
text-decoration: none;
font-weight: 600;
font-family: "Ubuntu", sans-serif;
}
.nav-link a {
position: relative;
font-size: 16px;
color: #000;
text-decoration: none;
font-weight: 250px;
margin-left: 15px;
font-family: "Open-Sans", sans-serif;
}
.nav-link a::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: 0.3s;
}
.nav-link a:hover {
color: var(--secondary-color);
}
.nav-link a:hover::before {
width: 100%;
}
main#main-header {
display: flex;
margin-top: 5px;
padding: 130px 0 200px 130px;
text-align: justify;
background-color: beige;
width: 2000px;
}
.hero h1 {
font-size: 9rem;
color: var(--secondary-color);
font-weight: 600;
font-family: "Ubuntu", sans-serif;
margin-left: -30px;
}
.hero h3 {
font-size: 1.5rem;
color: var(--primary-color);
font-weight: 600;
font-family: "Ubuntu", sans-serif;
margin-top: 7px;
}
.hero-h1,
.hero-h3 {
text-align: justify;
}
img.hero-img {
border-radius: 10px;
box-shadow: 0px 0px 8px 0px;
}
.hero-disc {
margin-top: 20px;
font-family: "Open-Sans", sans-serif;
font-size: medium;
color: var(--secondary-color);
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.food1 {
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
width: 520px;
}
.travel2 {
width: 600px;
margin-top: -20px;
margin-left: -40px;
}
.yoga1 {
width: 600px;
margin-top: 20px;
}
.hero-btn {
margin-top: 30px;
margin-left: 20px;
padding: 10px 20px;
font-size: 1rem;
border: none;
cursor: pointer;
border-radius: 25px;
font-family: "Open-Sans", sans-serif;
transition: 0.3s ease-in-out;
}
.blog-btn {
margin-left: 100px;
background-color: #000;
color: #fff;
}
.blog-btn:hover {
background-color: var(--secondary-color);
color: #fff;
}
.sub-btn {
background-color: #000;
color: #fff;
}
.sub-btn:hover {
background-color: var(--primary-color);
color: #fff;
}
hr {
background-color: #f3f3f3;
}
section.yoga-section {
height: 1275px;
margin-top: -2px;
padding: 10px 100px 10px;
background-color: var(--secondary-color);
position: relative;
text-align: center;
border: #000 solid 2px;
border-radius: 10px;
}
div.yoga-container {
display: flex;
align-items: center;
}
.yoga-img {
width: 1300px;
margin-left: -300px;
flex-shrink: 0;
}
.h2-1 {
margin-left: -700px;
font-size: 6rem;
color: var(--complementary-color);
font-weight: 600;
font-family: "Ubuntu", sans-serif;
text-align: right;
}
.h2-1 span {
color: var(--primary-color);
font-size: 8rem;
}
span.peace {
color: beige;
font-size: 8rem;
}
section#travel-section {
width: 100%;
height: 85vh;
margin-top: -100px;
background: linear-gradient(80deg, var(--primary-color), beige);
background-size: 400% 400%;
animation: gradient 8s ease-in-out infinite;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 50px;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 65%;
}
}
article.travel-art-label {
height: 560px;
width: 500px;
border: 5px solid black;
display: inline-block;
position: relative;
top: 180px;
left: 210px;
border-radius: 15px;
box-shadow: 25px 25px 20px 0;
background-color: beige;
}
.flex {
width: 500px;
height: 100%;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
align-items: center;
}
.h2-trav {
font-size: 3rem;
font-family: "Ubuntu", sans-serif;
font-weight: 400;
margin-left: 6px;
}
h2.places {
margin-right: 125px;
}
ul li {
width: 75%;
margin-bottom: 20px;
margin-top: 30px;
padding: 25px 20px;
list-style-type: none;
font-family: "Open-Sans", sans-serif;
font-size: 1rem;
font-weight: 700;
}
.travel-with,
.travel-way {
margin-top: 5px;
margin-bottom: 22.5px;
}
.travel-need,
.travel-supply {
margin-top: 47.5px;
}
.list {
margin-bottom: 45px;
}
li.travel-list {
margin-top: 25px;
margin-bottom: -25px;
}
.list-p {
font-size: 16px;
font-style: italic;
}
section#healthy-recipes {
width: 100%;
height: 50vh;
}
table {
margin-top: 2%;
margin-left: 2%;
}
h2#healthy-h2 {
font-family: "Ubuntu", sans-serif;
font-size: 2.5em;
position: relative;
top: 15px;
left: 10px;
}
.table-head,
.table-data {
border: 2px solid #0a0a23;
padding: 10px 5px;
border-radius: 4px;
}
.table-head {
background-color: var(--secondary-color);
color: #fff;
font-weight: 700;
font-size: 1.2em;
box-shadow: 0 0 2px 0 black;
}
h3#healthy-h3 {
display: flex;
justify-content: flex-end;
margin-right: 100px;
margin-top: -250px;
font-family: "open-sans", sans-serif;
font-size: 2rem;
}
footer {
background-color: black;
color: white;
margin-top: -100px;
}
ol.list {
margin-bottom: 10px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta description="design" />
<title>Sarah's Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu:wght@700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!--Begin Navigation-->
<header class="header">
<div class="nav-logo">
<a href="#" class="logo">Logo</a>
</div>
<div class="nav-link">
<a href="#home" class="primary">Home</a>
<a href="#yoga" class="secondary">Yoga</a>
<a href="#travel" class="primary">Travel</a>
<a href="#healthy" class="secondary">Healthy Recipes</a>
<a href="#contact" class="primary">Contact</a>
</div>
</header>
<!--End Navigation-->
<!--Begin Main-->
<main id="main-header">
<div class="hero">
<h1 class="hero-h1">
Travel,<br />
Thrive,<br />
Transform.
</h1>
<h3 class="hero-h3">
Experience the World through Travel,<br />
Embrace Wellness with Yoga,<br />
Discover Health with Wholesome Recipes.
</h3>
<p class="hero-disc">
Join our global community in uncovering a path to personal growth as
<br />
we embark on a journey to live a life of meaning and purpose together!
</p>
<button type="submit" value="Read The Blog" class="blog-btn hero-btn">
Read The Blog
</button>
<button type="submit" value="Subscribe" class="sub-btn hero-btn">
Subscribe
</button>
</div>
<!--Begin Hero Images-->
<div class="img-section">
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/food1.jpg"
width="25%"
title="Healthy Food Lifestyle"
class="hero-img food1"
/>
<div class="row">
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/yoga1.jpg"
width="25%"
title="Yoga Lifestyle"
class="hero-img yoga1"
/>
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/travel2.jpg"
width="25%"
title="Traveling Lifestyle"
class="hero-img travel2"
/>
</div>
</div>
</main>
<!--End Hero Images-->
<hr />
<!--Begin Yoga Section -->
<section class="yoga-section">
<div class="yoga-container">
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/yoga-2.jpg"
title="Yoga Lifestyle"
class="yoga-img"
/>
<h2 class="h2-1">
Where<br />
The union of <br />
<span><em>Breath</em></span
>,<br />
<span><em>Body</em></span
>,<br />
and <span><em>Mind</em></span
>,<br />
Illuminates<br />
the path <br />
to inner <br /><span class="peace">Peace and Balance.</span><br />
</h2>
</div>
</section>
<!--End Yoga Section 1-->
<!--Begin Travel Section -->
<section id="travel-section">
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav">What's The Best Way To Travel?</h2>
<ul class="travel-way">
<li class="travel-supply">
Always carry essential documents like passports and visas.
<img src="" alt="" />
</li>
<li class="travel-supply">
Research local customs and traditions before travel
</li>
<li class="travel-supply">Keep an emergency contact list handy.</li>
</ul>
</div>
</article>
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav">What Do I Need To Travel With?</h2>
<ul class="travel-with">
<li class="travel-need">
Supported Travel Gear with New Luggage and fresh supplies and
everyday daily clothes for the new day
</li>
<li class="travel-need">
Come prepared with emergency funds for the rainy days
</li>
<li class="travel-need">Passports and Visas are always forsure</li>
</ul>
</div>
</article>
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav places">Where Should I Travel To Next?</h2>
<ul class="list">
<li class="travel-list">
<span class="trav-country">Paris, France;</span>
<p class="list-p">
Romantic streets, iconic museums, and exquisite cuisine, an
unforgettable story unfolds
</p>
</li>
<li class="travel-list">
<span class="trav-country">Tokyo, Japan;</span>
<p class="list-p">
Ancient traditions meet futuristic marvels, amidst a gastronomic
journey and a tapestry of diverse cultures, all within a city
pulsating with vibrant energy.
</p>
</li>
<li class="travel-list">
<span class="travel-country">Machu Picchu, Peru;</span>
<p class="list-p">
Ancient wonders amid stunning mountains, merging history,
breathtaking landscapes, and vibrant Peruvian culture.
</p>
</li>
</ul>
</div>
</article>
</section>
<!--End Travel Section -->
</body>
</html>Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.