/*!
Theme Name: Amazing Swagger
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: amazing-swagger
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Amazing Swagger is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*!
Theme Name: Amazing Swagger
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: amazing-swagger
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Amazing Swagger is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
button.menu-toggle {
  background-color: blanchedalmond;
}

.entry-title {
  display: none;
}

.entry-header {
  display: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  height: 100vh;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: title;
  src: url(fonts/Star\ Vintage\ -\ \(Demo\)\ hanscostudio.com.ttf);
}
@font-face {
  font-family: edition;
  src: url(fonts/MADE\ Sunflower\ PERSONAL\ USE.otf);
}
@font-face {
  font-family: bastro;
  src: url(fonts/Bastro.ttf);
}
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #ffeaa4;
  width: 100%;
  scroll-behavior: smooth;
}

header {
  overflow: hidden;
  background-color: #ffd968;
  border: 2px solid black;
}

a {
  text-decoration: none;
}

nav a {
  float: none;
  display: block;
  text-align: left;
  color: black;
  padding: 10px;
  font-size: 18px;
  font-family: edition;
  margin: 1px;
  margin-top: 1px;
  margin-bottom: 2px;
  background-color: #ffaa00;
  border: 2px solid black;
  border-radius: 5px;
}

.title a {
  font-size: 45px;
  font-family: title;
  color: black;
}

.title:hover a {
  color: rgb(255, 78, 38);
  cursor: pointer;
}

.title a:active {
  background-color: dodgerblue;
  color: white;
}

nav {
  float: none;
}

nav a:hover {
  background-color: rgb(255, 78, 38);
  color: #ffeaa4;
  cursor: pointer;
}

nav a:active {
  background-color: dodgerblue;
  color: white;
}

.hero {
  width: 100%;
  position: absolute;
}

.heroimg {
  content: url(https://datcmedia.com/bencton/Davis%20Tech/Advanced%20CSS%20and%20Wordpress/wordpress/wp-content/uploads/2025/03/herocompact.png);
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 0svw;
     object-position: 0svw;
  border: 2px solid black;
}

.tagline {
  text-align: center;
  background-color: #ffd968;
  display: block;
  width: 55svw;
  padding-bottom: 1.5svw;
  padding-top: 1.5svw;
  font-size: 6svw;
  font-family: edition;
  margin: auto;
  position: relative;
  bottom: 6.5svw;
  border: black 2px solid;
  margin-bottom: -20px;
}

.introduction {
  text-align: justify;
  width: 80%;
  margin: auto;
  font-size: 20px;
  font-family: Georgia, "Times New Roman", Times, serif;
}

h3 {
  font-family: bastro;
  font-size: 13.5svw;
  margin: auto;
  background-color: #ffd968;
  text-align: center;
  display: block;
  margin: auto;
  width: 85%;
  border: black 2px solid;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 15px;
  margin-top: 15px;
}

.contact {
  margin-top: 15px;
}

.linkbox {
  font-family: edition;
  font-size: 4svw;
  margin: auto;
  background-color: #ffd968;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  width: 85%;
  border: black 2px solid;
  margin-bottom: 15px;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: sticky;
  top: 0;
}

.linkbox a {
  border: black 2px solid;
  padding: 10px;
  background-color: #ffaa00;
  border-radius: 5px;
  color: black;
  margin: 5px;
}

.linkbox a:hover {
  background-color: rgb(255, 78, 38);
  color: #ffeaa4;
  cursor: pointer;
}

.linkbox a:active {
  background-color: dodgerblue;
  color: white;
}

.portfoliocontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.portfolioimg {
  margin-bottom: 35px;
}

.portfolioimg h3 {
  font-size: 30px;
  padding: 15px;
  width: auto;
  display: inline-block;
}

.portfolioimg img {
  width: 84.6%;
  margin: auto;
  display: block;
  border: 4px double black;
}

.servicescontainer {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  width: 87%;
  margin: auto;
}

.service {
  background-color: #ffd968;
  border: 4px double black;
  margin: 10px;
}

h4 {
  font-size: 30px;
  font-family: edition;
  margin: 15px;
  margin-bottom: 0px;
}

ul {
  font-size: 22px;
  list-style: inside square;
}

li {
  margin: 10px;
}

.aboutcontainer {
  width: 82%;
  margin: auto;
}

.aboutme {
  text-align: left;
  width: 100%;
  margin: auto;
  font-size: 20px;
  font-family: Georgia, "Times New Roman", Times, serif;
  float: none;
  text-align: left;
}

.me {
  width: 300px;
  height: 300px;
  border: 4px double black;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  float: right;
  shape-outside: ellipse();
  margin-left: 10px;
  max-width: 50svw;
  margin-bottom: 10px;
}

.buttoncontainer {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

button {
  margin: auto;
  margin-top: 20px;
  font-size: 6svw;
  font-family: edition;
  background-color: #ffaa00;
  text-justify: center;
  padding: 10px;
  border-radius: 10px;
  width: 80svw;
  -webkit-transition: none;
  transition: none;
}

button:hover {
  background-color: rgb(255, 78, 38);
  color: #ffeaa4;
  cursor: pointer;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

button:active {
  background-color: dodgerblue;
  color: white;
}

.pagebody {
  margin-bottom: 55px;
}

@-webkit-keyframes grow {
  0% {
    height: 1svw;
  }
  100% {
    height: 30svw;
  }
}
textarea {
  -webkit-animation: grow 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: grow 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  width: 85%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  resize: vertical;
  margin-bottom: 15px;
  border: 4px double black;
  background-color: #fdf6bc;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin-top: none;
}

.emailcontainer {
  width: 85%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.email {
  margin-bottom: 15px;
  border: 4px double black;
  background-color: #fdf6bc;
  font-family: Georgia, "Times New Roman", Times, serif;
  width: 75%;
  font-size: 18px;
}

.submit {
  border: black 2px solid;
  background-color: #ffaa00;
  color: black;
  font-family: edition;
  height: 100%;
  font-size: 20px;
  width: 25%;
}

.submit:hover {
  background-color: rgb(255, 78, 38);
  color: #ffeaa4;
  cursor: pointer;
}

.submit:active {
  background-color: dodgerblue;
  color: white;
}

#Contact p {
  display: block;
  margin: auto;
  width: 85%;
  text-align: center;
  color: #d2b661;
}

.map {
  display: block;
  text-align: center;
  margin: auto;
  border: black 4px double;
  width: 85%;
  margin-top: 15px;
}

.map iframe {
  width: 100%;
  border-radius: inherit;
  height: inherit;
}

footer {
  width: 100%;
  background-color: #ffd968;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: left;
  padding: 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
  border: black 2px solid;
  margin-top: 100px;
}

@media screen and (min-width: 810px) {
  nav a {
    float: left;
    text-align: center;
    display: inline-block;
  }
  .title {
    display: inline-block;
  }
  nav {
    float: right;
  }
}
@media screen and (min-width: 950px) {
  .linkbox a {
    font-size: 40px;
  }
}
@media screen and (min-width: 600px) {
  .introduction {
    font-size: 3svw;
  }
  .heroimg {
    content: url(https://datcmedia.com/bencton/Davis%20Tech/Advanced%20CSS%20and%20Wordpress/wordpress/wp-content/uploads/2025/03/heroimage.png);
    width: 85%;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 0px;
  }
  h3 {
    font-family: bastro;
    font-size: 80px;
    margin: auto;
    background-color: #ffd968;
    text-align: center;
    display: block;
    margin: auto;
    width: 85%;
    border: black 2px solid;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 15px;
    margin-top: 15px;
  }
  .aboutme {
    margin-left: 0%;
  }
  #Portfolio h3 {
    width: 85%;
  }
  .linkbox {
    font-family: edition;
    margin: auto;
    background-color: #ffd968;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    width: 85%;
    border: black 2px solid;
    margin-bottom: 15px;
  }
  header {
    border: 2px solid black;
  }
}
@media screen and (min-width: 1024px) {
  .tagline {
    font-size: 5svw;
    width: 50svw;
    margin-bottom: -6.5svw;
  }
  .introduction {
    font-size: 2svw;
    padding: 0.25svw;
    padding-top: 15px;
    margin-top: 0px;
  }
  .buttoncontainer {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 87%;
    padding: none;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-transition: none;
    transition: none;
  }
  .buttoncontainer a {
    font-family: edition;
    border-radius: 10px;
    width: 40svw;
    margin-bottom: 50px;
  }
  #About .buttoncontainer a {
    font-family: edition;
    border-radius: 10px;
    width: 40svw;
  }
  .buttoncontainer a button {
    font-size: 4.5svw;
    width: 100%;
    -webkit-transition: 0.1s;
    transition: 0.1s;
  }
  .portfoliocontainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .portfolioimg {
    width: 50%;
    margin: auto;
    margin-top: 15px;
  }
}
/* Additional CSS for Responsive Design and Styling */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 1.2em;
}

.container img {
  width: 100%;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 4px double black;
}

.container img:hover {
  cursor: pointer;
  -webkit-transform: scale(1.025);
          transform: scale(1.025);
}

.container img:focus {
  cursor: pointer;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(255, 234, 164, 0.8745098039); /* Black w/ opacity */
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 95svw;
  border: 4px double black;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  margin-top: 15px;
  display: block;
  width: 80%;
  max-width: 400px;
  text-align: center;
  color: #000000;
  font-family: bastro;
  font-size: 30px;
  background-color: #ffd968;
  border: 2px solid black;
  padding: 10px;
}

/* Add Animation */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@keyframes zoom {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/* The Close Button */
.close-button {
  position: absolute;
  top: 15px;
  right: 35px;
  color: rgb(0, 0, 0);
  font-size: 40px;
  background-color: #ffaa00;
  padding-bottom: 5px;
  padding-left: 3px;
  padding-right: 3px;
  width: 40px;
  height: 40px;
  border: 2px solid black;
  border-radius: 10px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.close-button:hover {
  background-color: rgb(255, 78, 38);
  color: #ffeaa4;
  cursor: pointer;
}

.close-button:active {
  background-color: dodgerblue;
  color: white;
}

.scroll-button {
  margin: auto;
  margin-top: 20px;
  font-size: 3svw;
  font-family: edition;
  background-color: #ffaa00;
  text-justify: center;
  padding: 0.5em;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 10px;
  width: 40svw;
  -webkit-transition: none;
  transition: none;
  margin-bottom: 200px;
}

/* Media Queries */
/* Tablet Size */
@media (min-width: 600px) {
  .container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    justify-items: center;
  }
  .scroll-button {
    font-size: 30px;
  }
}
/* Desktop Size */
@media (min-width: 1024px) {
  .container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal-content {
    max-width: 45svw;
  }
}
.site-branding {
  float: left;
  display: inline-block;
}

.site-description {
  display: none;
}

#site-navigation {
  float: right;
  clear: none;
  width: auto;
}

.site-branding img {
  width: 60svw;
  height: auto;
}