html {
  scroll-behavior: smooth;
}

body {
  background: url('/images/welcome_img.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Trebuchet MS";
  border-radius: 15px;
  text-align: center;
}

/* Text
------------------------------------------*/  
h1 {
  color: #273f4f;
  text-align: center;
}

h3 {
  color: #273f4f;
  font-size: 130%;
}

p {
  color: #273f4f;
  font-size: 130%;
}

a {
  color: rgb(255, 255, 255);
  text-decoration: none;
}

a:hover {
  color: rgb(235, 195, 63);
}

small{
  color: white;
}

.here {
  color: rgb(235, 195, 63);
  text-decoration: underline;
}

.here:hover {
  color: rgb(235, 195, 63);
}

/* Layout/ Flexboxes
------------------------------------------*/

header,
.container,
footer {
  margin: 0 auto;
  width: 62%;
  max-width: 1080px;
}

header {
  border: 2px solid #273f4f;
  margin-bottom: 10px;
  color: #273f4f;
  border-radius: 100px; 
  background-color: white;
  width: 50%
}

.container{
  background-color: rgb(255, 255, 255);
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 15px;
  border: 2px solid #273f4f;
}

/* emotion pages
------------------------------------------*/  
.info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: auto;
  column-gap: 2px;
}

.section {
  padding: 35px;
  color: #273f4f;
  height: auto;
}


/* Navigation bar
------------------------------------------*/  
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin-right: .5em;
}

nav ul a {
  background-color: #273f4f;
  padding: .5em 1em;
  border-radius: 15px;
  transition: 1s;
}

nav ul li a:hover {
  background-color: #273f4f;
}


/* images
------------------------------------------*/  
.boredom-image {
  background-image: url('/images/boredom_img1.PNG'); /* Initial background image */
  background-size: cover; /* Cover the entire area of the element */
  transition: background-image 0.09375s ease-in-out; /* Smooth transition */
  display:inline-block;
}

.boredom-image:hover {
  background-image: url('/images/boredom_img2.PNG'); /* Change on hover */
}

.frustration-image {
  background-image: url('/images/frustration_img1.PNG'); /* Initial background image */
  background-size: cover; /* Cover the entire area of the element */
  transition: background-image 0.09375s ease-in-out; /* Smooth transition */
  display:inline-block;
}

.frustration-image:hover {
  background-image: url('/images/frustration_img2.PNG'); /* Change on hover */
}

.relaxation-image {
  background-image: url('/images/relaxation_img1.PNG'); /* Initial background image */
  background-size: cover; /* Cover the entire area of the element */
  transition: background-image 0.09375s ease-in-out; /* Smooth transition */
  display:inline-block;
}

.relaxation-image:hover {
  background-image: url('/images/relaxation_img2.PNG'); /* Change on hover */
}

img {
  width: 90%;
  height: auto;
}

.boredom-image, .boredom-image:hover,
.frustration-image, .frustration-image:hover,
.relaxation-image, .relaxation-image:hover {
  width: 200px;
  height: 200px;
}

/* Responsive layout
------------------------------------------*/  
/*makes a one column layout instead of a two-column layout */
@media (max-width: 1000px) {
  img{
    width: 45%;
    height: auto;
  }

  .boredom-image, .boredom-image:hover,
  .frustration-image, .frustration-image:hover,
  .relaxation-image, .relaxation-image:hover {
    width: 150px;
    height: 150px;
  }

  .info{
    flex-direction: column;
  }
}