html {
  scroll-behavior: smooth;
}

body {
  background: #eedebd;


}

h1{
     color: #495563;
     font-family: "pill-gothic-900mg", sans-serif;
   font-weight: 800;
   font-style: normal;


}

h2, h3, h4, p{
  color: #495563;
  font-family: "pill-gothic-900mg", sans-serif;
font-weight: 700;
font-style: normal;
}

.topRow{
    background-color: #eedebd;
}

.navbar-brand {
  font-size: 40px;
  color: #495563;
  margin-left: 45%;
}

.navbar-toggler-icon{
  background-color: #495563;
}

.posForLogo{
  margin: auto;

}

/* .logo {
  position: absolute;
  top: 0px;
  left: 0px;
} */

.logoImage {
  width: 100%;
/*  margin-left: 10%; */

}

.logoBackg{

  width: 100%;

}

.intro{
  text-align: center;
  background-color: #eedebd;
}

.introTitle{
  color: #495563;
  font-size: 3.5rem;
  margin-top: 2%;
}

.introSplash{
  font-size: 3rem;
}

.creativeSub{
  margin-left: 20%;
}

p {
  color: #495563;

}

#link {
  color: #495563;
}

.dropdown{
   margin-left: 70%;
}

.nav-link {
    color: #495563;
}

.dropdown-menu {
    background-color: #495563;
}

.dropdown-item {
  color: #eedebd;
}

#pageButtons{
  margin-top: 2%;
  margin-bottom: 5%;
  margin-left: 15%;

}

.mainButts{
    background-color: #eedebd;

}

.fcc-btn{
  background-color: #495563;
    color: #eedebd;
    padding: 15px 25px;
    text-decoration: none;
    border-radius: 95px;
    font-family: "pill-gothic-900mg", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fcc-btn:hover{
 background-color: #495563;
}

.brandLink{

}

.contentLink{

}

.creativeLink{

}

.btn{
  border: 1px solid #495563;
}

.btn:hover {
  background-color:  rgba(169,169,169, 0.5) /* Add a dark-grey background on hover */

}

.mediaTitle {
  margin-top: 5%;
    color: #495563;
    text-align: center;
}

.mediaTitle2{

  margin-top: 5%;
  margin-bottom: 5%;
    color: #495563;
    text-align: center;
}

.video {
  margin-left: 21.5%;
  margin-top: 1%;
  width: 840px;
  height: 472.5px;
}



.resumeImg{
  width: 100%;
}

.sullyVideo {
  width: 100%;
  height: 60%;
}

.sullyVideo:hover{
  transform: scale(1.5);
}

.sullyImage{
  margin-top: -20%;
  width: 400px;
}

.sullyImage:hover{
  transform: scale(1.4);
}

.grantFace{
  width: 52%;
margin-left: 20%;
}

.grantFace:hover{

}

.aboutText{
  background-color: #eedebd;
  font-size: 1.8rem;
  margin-left: -10%;
  text-align: center;
  text-align: justify;

}

.aboutText:hover{


  object-fit: cover;

}

.aboutRow{
  margin-left: 4%;
  margin-right: 4%;
  margin-top: 1%;
}

.aboutText2{

  background-color: #eedebd;
  font-size: 1.8rem;
  text-align: center;
  text-align: justify;
}

.aboutText2:hover{


  object-fit: cover;

}

.aboutText3{
  background-color: #eedebd;
  font-size: 1.8rem;
}

.aboutText3:hover{


  object-fit: cover;

}

.wrapUp{
  margin-top: 128px;
  margin-left: 29.5%;
    background-color: #eedebd;
}

.icons{
  margin-left: 24%;
  margin-bottom: 20px;
  color: #495563;
}

/*.about{

  background-color:

} */

.contact{
  text-align: center;
  font-size: 4rem;
  text-shadow: -1px 1px 1px #000,
				  1px 1px 1px #000,
				 1px -1px 1px #000,
         -1px -1px 0 #000;

}

.connect{
  font-size: 2rem;
  text-shadow: -0.5px 0.5px 0 #000,
				  0.5px 0.5px 0 #000,
				 0.5px -0.5px 0 #000,
				-0.5px -0.5px 0 #000;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  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] {
  background-color: #000000;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #495563;

}

/* Add a background color and some padding around the form */
.container {

  border-radius: 5px;
  padding: 20px;
}



#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: 1px solid #495563; /* Remove borders */
  outline:  none; /* Remove outline */
  background-color: #eedebd; /* Set a background color */
  color: #495563; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #495563; /* Add a dark-grey background on hover */
  color: #eedebd;
  border: 1px solid #eedebd;
}

@media (max-width: 414px){
  body{
    height: 3250px;
  }

.introTitle{
  font-size: 1.5rem;
}

  .logoImage{
    width: 200px;

  }
.navbar-toggler-icon{
  width: 20px;
  height: 20px;
}

.dropdown{
  margin-top: -14%;
}

.brandLink{
  margin-top: 5%;
}



.contentLink{
  margin-top: 5%;
}

.sullyVideo {
  height: 80%;
  margin-top: 5%;
}

.sullyImage{
  width: 80%;
  margin-left: 10%;
  margin-top: 15%;
}

.mediaTitle{
margin-top: 30%;

}

.sullyVideo:hover{
  transform: scale(1);
}

.sullyImage:hover{
  transform: scale(1);
}

.mediaTitle2{
  margin-top: 25%;
}

.mediaTitle3{

text-shadow: -1px 1px 1px #000,
        1px 1px 1px #000,
       1px -1px 1px #000,
       -1px -1px 0 #000;
}

.mediaTitle4{
  margin-top: 50%;
  text-shadow: -1px 1px 1px #000,
				  1px 1px 1px #000,
				 1px -1px 1px #000,
         -1px -1px 0 #000;

}

.grantFace{
  visibility: hidden;
}

.aboutText{
  font-size: 1.05rem;

  margin-left: 0;

}

.aboutText2{
font-size: 1.05rem;

}



.container{
  margin-left: 5%;
  margin-top: 15%;
}

.contact{
  font-size: 2rem;
}

.connect{
  margin-top: 2%;
  font-size: 1rem;
}

.btn{
    margin-top: 20%;
}

}