/* css styles */
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Lobster+Two&family=Sigmar&display=swap');

* {
    box-sizing: border-box;
  }
  
  /* Style the body */
*, html, body {padding: 0; margin: 0;}
body {
  background-image: url("/images/weedwacker.webp");
  background-attachment: fixed;
  background-position: bottom -500px right 0;
  width: 100%;
  }
a, a:link, a:visited {
  text-shadow: 4px 4px 4px rgba(255, 255, 255, 0.7);
  font-weight: normal;
  color: #000;
  }

h1 {
    font-size: 2em;
    font-family: 'Bruno Ace SC', cursive;
    } 
h2 {
    font-size: 2.5em;
}
h3 {font-size: 1.75em;}
h2, h3, h4, h5, nav {
    font-family: 'Sigmar', cursive;
    }
h1, h2, h3, h4, h5 {
  color: black;
  text-shadow: 4px 4px 4px rgba(255, 255, 255, 0.7);
  font-variant: small-caps;
  font-weight: normal;
  }
p, .list-text li {
    font-family: 'Lobster Two', cursive;
    font-weight: normal;
    font-size: 1.75em;
    }
.row {
    /* background: rgba(95,28,137, .5); */
    width: 99%; 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row;
    justify-content: space-between;
    }
header, nav, footer {
    background: rgba(244, 127, 28, .25);
    text-align: center;
    border: 1px solid black;
    }
header {
    font: 3em bold;
    }
/* Style the navigation bar links */
nav {
    background-color: rgba(255, 255, 255, .4); 
  }
.list-inline {
	font-size: 2.4vh;
	padding: 0 0 0 5px;
    margin: 0;
	}
.list-inline li {
	display: inline-flex;
	padding: 0;
	}

.list-inline li #fake-link {
    padding-left: 15px;
    cursor: pointer;
    text-decoration: none;
    /* text-shadow: 4px 4px 4px rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: ease-in-out;
    transition-duration: 250ms; */
    }

.list-inline a {
    padding-left: 15px;
    cursor: pointer;
    text-decoration: none;
    /* text-shadow: 4px 4px 4px rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: ease-in-out;
    transition-duration: 250ms; */
	}
.list-inline a:hover {
	/* text-shadow: 4px 4px 4px rgba(0, 0, 0, 1);
    background-color: rgba(46,48,62, 0.9); */
	}

.crazy-image {
  /* background-image: url('/images/adriana.jpg'); */
  background-color: transition;
  background-color linear 1s;
  background: blue;
  height: 50px;
  width: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  transition:
    width 2s,
    height 2s,
    rotate 2s;
  }

.crazy-image:hover {
      width: 200px;
      height: 200px;
    }
    
.crazy-image:hover, .crazy-image:focus {
    background-image: url('/images/adriana2.jpg');
    height: 500px;
    width: 500px;
    rotate: 360deg;
  }

section {
  text-align: center;
  margin: auto;
  }
article {
    /* border: 10px solid rgba(236,232,211, 0.5); */
    }
.art-container {
    width: 75%; margin:auto;
    background-color: rgba(255, 255, 255, .4);
    border: 1em double rgba(236,232,211, 0.5);
    border-radius: 5px 20px 5px;
    border-color: rgba(46, 48, 62, 0.2);
    box-shadow: 5px 5px 8px 5px rgba(0, 0, 0, .5);
    margin-bottom: 2em;
  }
.gallery-container {
    background-color: rgba(255, 255, 255, .4); 
    border: 1px solid rgba(236,232,211, 0.5);
    width: 50%; margin:auto;
    border-width: 1em;
    border-radius: 5px 20px 5px;
    border-style: double;
    border-color: rgba(46, 48, 62, 0.2);
    box-shadow: 5px 5px 8px 5px rgba(0, 0, 0, .5);
    margin-bottom: 2em;
    }
 .services-list {
    display: flex; justify-content: space-between; margin: auto; padding: 2em 4em;
    }
.image-container {
    float: right;
    height: 200px;
    margin: .5em;
    background-color: rgba(255, 255, 255, 0.5);
    border-width: 1em;
    border-radius: 2% 25%;
    border-style: double;
    border-color: rgba(46, 48, 62, 0.2);
    box-shadow: 5px 5px 8px 5px rgba(0, 0, 0, .5);
  }
.image-container-left {
  float: left;
  }
    /* overlay... */
/* now for some modal fun (overlays) */
.openModalButton {
    background-color: rgba(236,232,211, 0.5);
    color: #000;
    font-size: 1em;
    border: 1px solid #000;
    border-radius: 0;
    }
  
  .openModalButton:hover {
    color: #fff;
    border-radius: 50%;
    background-color: rgba(46,48,62, 0.95);
    animation-duration: 1s;
    animation-name: bounce;
    }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
    }
  
  /* The Overlay (background) */
  .overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 7; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 1s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    }
  
  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    top: 5%; /* 25% from the top */
    width: 100%;
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
    }
  .overlay-content .container {
    text-align: center;
    width: 94.5%;
    border: 25px solid rgba(88, 111, 29, .5);
    }
  .overlay-content .container form {
    text-align: left;
    }
  /*   The navigation links inside the overlay */
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
    } 
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
    }
  /* make way for the contact form :) */
/* Style inputs with type="text", select elements and textareas */
input[type=text],input[type=tel], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid rgba(88, 111, 29, 1);
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
    }
  
  /* Style the submit button with a specific background color etc */
  input[type=submit], input[type=reset], button {
    background-color: rgba(46,48,62, 0.5);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: ease-in-out;
    transition-duration: 500ms;
    }
input[type=text]:focus,input[type=tel]:focus, textarea:focus {
    outline: 2px solid orange;    /* oranges! yey */
    }
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover, input[type=reset]:hover, button:hover {
    background-color: rgba(236,232,211, 1);
    }
  
  /* Add a background color and some padding around the form */
  .container {
    border-radius: 5px;
    border-color: rgba(88, 111, 29, 1);
    background-color: #f2f2f2;
    padding: 20px;
    }
  
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    }
  
.container label {
    font-style: italic;
    }
.container select {
    width: 300px;
    margin-left: 100px;
    font-weight: bold;
    }


/* Style for the button container */
.quote-button-container {
    position: fixed;
    top: 22%;
    left: 20px;
    transform: rotate(-45deg); /* Rotate container */
    transform-origin: top left; /* Rotate around top left corner */
    z-index: 999;
    width: 250px;
    }

  /* Style for the button */
  .quote-button {
      background: rgba(244, 127, 28, .65);
      text-align: center;
      color: #fff;
      padding: 7px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-family: 'Sigmar', cursive;
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
      transition: transform 0.3s ease, background-color 0.3s ease; box-shadow 0.3s ease;
  }

  /* Style for the button hover effect */
  .quote-button:hover {
      background-color: #ff8c00; /* Lighter Orange on hover */
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 1);
  }

/* Style for the dialog box */
.dialog-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(88, 111, 29, .90);
  padding: 15px 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  text-shadow: 4px 4px 4px rgba(255, 255, 255, 0.7);
  font-style: italic;
  display: none;
  z-index: 1000;
  width: 300px;
  max-width: 350px;
  box-shadow: 10px 12px 15px rgba(0, 0, 0, 1);
  border: 1em double rgba(236,232,211, 0.5);
  border-radius: 5px 20px 5px; 
}

/* Style for the dialog box title */
.dialog-box h3, .dialog-box p {
  color: #000;
  margin-bottom: 2em;
}

/* Style for the dialog box button */
.dialog-box button {
  background: rgba(244, 127, 28, .95);
  text-align: center;
  color: #fff;
  padding: 7px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Sigmar', cursive;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.74);
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.80);
  transition: transform 0.3s ease, background-color 0.3s ease; box-shadow 0.3s ease;
  cursor: pointer;
}

/* Style for the dialog box button hover effect */
.dialog-box button:hover {
  background-color: #ff8c00; /* Lighter Orange on hover */
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 1);
}

/* now for small screens - & phones */
@media screen and (max-width: 900px) {
    * {float: none; width: 100%;}
    .dialog-box {max-width: 350px;}
    .image-container, .art-container, .gallery-container, h1, h2, h4, h5 {font-size:.80em; width: 95%;}
    h1 {color: black;}
    ul {list-style: none;}
    }