/*
* {
  box-sizing: border-box;
}
*/

/*@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}
*/


/*Navigation Bar*/


.navbox{
/*  top:0;
  left:0;*/
  background-image: url("../images/bridge9.jpg");
  background-size: cover;
  opacity: 6;
  height: 3em;
  width: 100vw;  /*100% of viewport width*/
  /*position:fixed;*/
  /* z-index: 5000px; */
  background-color: rgba(114, 108, 234, 0.39);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-size: 4vmin;
 }

.navlink1, .navlink2, .navlink3, .navlink4{
  /*margin-left: 6.5em;*/
  height: 4.5vh;
  width:16vw;
/*  margin-top: .3em;
  margin-right: 3.9em;*/
  /* formerly margin-left: 160px;margin-right:100px;height:50px;width:50px;*/
  font-size: 3.25vmin;  /*formerly font-size: 25px;*/
  font-weight: bold;
  /*flex:1;*/
  text-align: center;
 }

.navlink1 a, .navlink2 a, .navlink3 a, .navlink4 a{
  text-decoration: none;
  display:inline-block;
  border-radius: 2.25em;
  padding: .1em;
  /*border-radius: 50px;
  padding: 10px;*/
  font-family: arial;
  color: #ff00aa;
 }

/*.n-link{
    transition: 1s;
    color: #ff00aa;
 }
*/
/*.n-link:hover, a.selected{
 font-size: 30px;
 }
 a.selected{
  background-color: #ff00aa;
  color: black;
 }
*/

.navlink1 a:hover, .navlink2 a:hover, .navlink3 a:hover{
   background-color: #ff00aa;
   font-size: 1.15em;
   /*font-size: 30px;*/
   color: black; 
   transition: .8s background-color;
   text-decoration: none;
   transform: scale(.9);
}

.navlink1 .target, .navlink2 .target, .navlink3 .target{
   background-color: #ff00aa;
   font-size: .9em;
   /*font-size: 24px;*/
   color: black;
   cursor: default;
}

.projectTitle{
  font-family: arial;
  font-size: 32px;
 }


.project1, .project2, .project3, .project4{
  transition: 1s;
 }

.project1:hover, .project2:hover, .project3:hover, .project4:hover{
transform: scale(1.05);
}

.contactlink, .projectlink{
  opacity:8;
  font-weight: bold;
  color: black;
  font-family: arial;
 }



/*Animated Background - bottom layer - used on all pages*/


.main-bkgd1{
  height:100%;
  width:100%;
  background-image:url("../images/geo-building11.jpeg");
  position: absolute;
  z-index: -10000;
  background-attachment: fixed;
  overflow: hidden;
  background-size: contain;
  -webkit-animation: scrollpic 10s linear infinite;
  -webkit-animation-fill-mode: forwards;
  animation: scrollpic 10s linear infinite;
  animation-fill-mode: forwards;
 }

/* Gradient Backgrounds -top layers - used on all pages*/

.main-bkgd2{
  top:-13vh;
  left: -.5vw;
  height: 108vh;
  width: 102vw;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 27%, rgba(255, 255, 204,.7) 21%, rgba(255, 230, 255, .7) 70%);
  z-index: 1000;
  /*position: relative;*/
  overflow: hidden;
  background-size: cover;
  display:flex;
  flex direction: column;
  justify-content: center;
  }

.main-bkgd3{
  left:1vw;
  height:100vh;
  width:100vw;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 28%, rgba(255, 255, 204,.7) 21%, rgba(255, 230, 255, .7) 70%);
  z-index: 1000;
  position: relative;
  overflow: hidden;
  background-size: contain;
}


@keyframes scrollpic{
    from {background-position: 0 0;}
    to {background-position: -180px 0px;}
}

@-webkit-keyframes scrollpic {
    from {background-position: 0 0;}
    to {background-position: -180px 0px;}
}



/*Page One - About Me*/

.main-flower{
  background-image:url("../images/roses-pale2.png");
  background-size: cover;
  width: 29vw;
  height: 43vh;
  top: 44vh;
  left:75vw;
  opacity: .5;
  position:absolute;
  z-index: 20000;
  flex:3;
 }
.main-flower2{
  background-image:url("../images/roses-pale2.png");
  background-size: cover;
  width: 20vw;
  height: 42vh;
  top: 16vh;
  left:80vw;
  opacity: .5;
  position:absolute;
  z-index: 20000;
  flex:3;
 }
.main-flower3{
  background-image:url("../images/roses-paletop.png");
  background-size: cover;
  font-size: 4vmin;
  width: 33vw;
  height: 48vh;
  top: -30vh;
  left:72vw;
/*  width: 500px;
  height: 450px;
  top: -150px;
  left:950px;*/
  opacity: .5;
  position:absolute;
  z-index: 20000;
  flex:3;
}
.main-flower4{
  background-image:url("../images/geo-red-dots.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 4vmin;
  width: 23.31vw;
  height: 65.5vh;
  top: 32vh;
  left: .1vw;
/*  width:290px;
  height:325px;
  top: 500px;
  left: 29px;*/
  opacity: .35;
  position:absolute;
  z-index: 20000;
  flex:3;
}

.main-flower5{
  background-image:url("../images/pinkrose-bouquet2.jpg");
  background-size: cover;
  width: 32vw;
  height: 56vh;
  top: 40vh;
  left: -6.9vw;
  opacity: .7;
  position:absolute;
  z-index: 20000;
  flex:3;
}



.introbox{
  max-width: 10vw;
  max-height: 35vh;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  }

.introPic{
  background-image:url("../images/womantech-color.png");
  font-size: 4vmin;
  top: 1.5vh;
  /*top:133px;*/
  width:8.5em;
  /*width: 300px;*/
  height: 8.5em;
  /*height: 300px;*/
  margin-left: 7.22vw;
  /*margin-left:17px;*/
  background-size: 87%;
  background-repeat: no-repeat;
  padding-bottom: 4vh;
  /*padding-bottom: 50px;*/
  position:absolute;
  z-index: 20000;
  flex-direction: row;
  flex:2;
  opacity: .7;
}
/*
large red gear*/
.gear1{

  margin-top: 1.5vh;
  margin-left: 4.5vw;
  display:inline-block;
}

.gear1 {
  position: absolute;
  margin-top: 1.5vh;
  margin-left: 4.5vw;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: block;
  cursor: pointer;
}

/*dark-green gear*/
/*.gear2{
  margin-left:1.5em;
  height: 5.8em;
  width: 3.8em;
  margin-top: -6.8em;*/
/*  margin-left:41px;
  height: 150px;
  width:100px;
  margin-top: -161px;
}*/

/*silver gear*/
/*.gear3{*/
/*  margin-left:1.6em;
  height: 4.5em;
  width: 3.8em;
  margin-top: -9.8em;*/
/*  margin-left:103px;
  height: 103px;
  width:111px;
  margin-top: -214px;
}*/


.dianeIntro{
  top: 1vh;
  left: 18vw; /*10 times .1 of viewport width*/
/*  font-size: 26px; or 8.5em*/
  font-size: 2.63vmin;
  height: 10vh;
  width: 62vw;
  text-align: center;
  position:absolute;
  z-index: 20000;
  display:flex;
  flex-direction: column;
  justify-content:space-between;
 }



.typeIntro{
  overflow: hidden;
  /*white-space: nowrap;*/
  margin: 0 auto;
  letter-spacing: .15em;
  animation: typeIntro 3.5s steps(40);
 }

/* The typeIntro effect */
@keyframes typeIntro {
  from { width: 0 ;}
  to { width: 100% ;}
}

/*.myname{
margin-left: 165px;
}*/

.dianeIntro-space{
width:30%;
height: 30em;
}

.myname{
  margin-top: 15em;
}
.myname, .ptext{
  text-align: center;
  width: 100%;
  margin:.07em;
  padding: 0;
}

/*.techboxhdg{
height: 50px;
width: 225px;
margin-top: 50px;
margin-left: 263px;
}*/

/*Page One - List of Technologies I have learned - CSS Grid Version*/

.tech-hdg{
  width: 100%;
  text-align: center;
  height: .4em;
  font-family: arial;
  text-transform: uppercase;
  margin-top: 5vh;
  font-size: 1.12em;
}

.tech1:hover, .tech2:hover, .tech3:hover, .tech4:hover, .tech5:hover, 
.tech6:hover, .tech7:hover, .tech8:hover, .tech9:hover, .tech10:hover, 
.tech11:hover, .tech12:hover, .tech13:hover, .tech14:hover, .tech15:hover, a.c-link:hover{
  -webkit-filter: grayscale(0%) sepia(0%) brightness(115%) /*invert(0%)*/ contrast(150%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  /*overlay setup*/

  /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  
} 

.tech1, .tech2, .tech3, .tech4, .tech5, 
.tech6, .tech7, .tech8, .tech9, .tech10, 
.tech11, .tech12, .tech13, .tech14, .tech15, a.c-link{
  -webkit-filter: grayscale(38%) sepia(40%) /*invert(20%)*/ contrast(92%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out; 
}


.techbox{      /*styles area of in navbar container*/
    /*box-sizing: border-box;*/
    border: solid 6px;
    height: 52vh;
    /*flex: 1;*/
    width: 53vw;
    top: 40vh;
    left: 23.6vw;
    position: absolute;
/*    background-color: rgba(17, 2, 33, 0.5);*/
    /*overflow-x: hidden; keeps the text from spilling into the navbar*/
    z-index: 100000;
    display: grid;
    grid-template-columns: 18.697% 18.697% 18.697% 18.697% 18.697%;
    grid-template-rows: 31.35% 31.35% 31.35%;
    grid-gap: .74em;
}

.techbox img{
    height: 100%;
    width: 100%;
}

.tech1back{
    background-color: rgb(0, 0, 0);
    grid-row-start:1;  grid-row-end: 2;
    grid-column-start: 1; grid-column-end: 2;
    opacity: 1;
}
.tech1{
/*    background-image: url('../images/tech-icons/CSS-trans.jpg');*/
    grid-row-start:1;  grid-row-end: 2;
    grid-column-start: 1; grid-column-end: 2;
    opacity: 1;
}
.tech2{
    /*background-image: url('HTML2.png');*/
    grid-row-start:1;  grid-row-end: 2;
    grid-column-start: 2; grid-column-end: 3;
}
.tech3{
    /*background-image: url('../images/tech-icons/javascript-trans.png');*/
    grid-row-start:1;  grid-row-end: 2;
    grid-column-start: 3; grid-column-end: 4;
}
.tech4{
    /*background-image: url('../images/tech-icons/jquery.jpg');*/
    grid-row-start:1;  grid-row-end: 2;
    grid-column-start: 4; grid-column-end: 5;
}

.tech5{
    /*background-image: url('../images/tech-icons/node-express-trans.jpg');*/
    grid-row-start: 1;  grid-row-end: 2;
    grid-column-start: 5; grid-column-end: 6;
}

.tech6{
    /*background-image: url('../images/tech-icons/reactjs-hex.jpg');*/
    grid-row-start:2;  grid-row-end: 3;
    grid-column-start: 1; grid-column-end: 2;
}

.tech7{
    /*background-image: url('../images/tech-icons/postgresql-trans.jpg');*/
    grid-row-start:2;  grid-row-end: 3;
    grid-column-start: 2; grid-column-end: 3;
}
.tech8{
    /*background-image: url('../images/tech-icons/git-color.jpg');*/
    grid-row-start:2;  grid-row-end: 3;
    grid-column-start: 3; grid-column-end: 4;
}
.tech9{
    /*background-image: url('../images/tech-icons/php-trans.png');*/
    grid-row-start:2;  grid-row-end: 3;
    grid-column-start: 4; grid-column-end: 5;
}
.tech10{
    /*background-image: url('../images/tech-icons/flexbox-square.png');*/
    grid-row-start:2;  grid-row-end: 3;
    grid-column-start: 5; grid-column-end: 6;
}

.tech11{
    /*background-image: url('../images/tech-icons/sublime2.jpg');*/
    grid-row-start: 3;  grid-row-end: 4;
    grid-column-start: 1; grid-column-end: 2;
}
.tech12{
    /*background-image: url('../images/tech-icons/grid.jpg');*/
    grid-row-start:3;  grid-row-end: 4;
    grid-column-start: 2; grid-column-end: 3;
}
.tech13{
    /*background-image: url('../images/tech-icons/rubyonrails.jpg');*/
    grid-row-start:3;  grid-row-end: 4;
    grid-column-start: 3; grid-column-end: 4;
}
.tech14{
    /*background-image: url('../images/tech-icons/jquery.jpg');*/
    grid-row-start:3;  grid-row-end: 4;
    grid-column-start: 4; grid-column-end: 5;
}

.tech15{
    /*background-image: url('../images/tech-icons/material-UI.png');*/
    grid-row-start: 3;  grid-row-end: 4;
    grid-column-start: 5; grid-column-end: 6;
}




/*Page One - List of Technologies I have learned - CSS Flexbox Version*/

.tech-hdgB{
  width: 100%;
  text-align: center;
  height: .4em;
  font-family: arial;
  text-transform: uppercase;
  margin-top: 5vh;
  font-size: 1.12em;
}

.tech1-flex:hover, .tech2-flex:hover, .tech3-flex:hover, .tech4-flex:hover, .tech5-flex:hover, 
.tech6-flex:hover, .tech7-flex:hover, .tech8-flex:hover, .tech9-flex:hover, .tech10-flex:hover, 
.tech11-flex:hover, .tech12-flex:hover, .tech13-flex:hover, .tech14-flex:hover, .tech15-flex:hover, a.c-link-flex:hover{
  -webkit-filter: grayscale(0%) sepia(0%) brightness(115%) /*invert(0%)*/ contrast(150%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  /*overlay setup*/

  /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  
} 

.tech1-flex, .tech2-flex, .tech3-flex, .tech4-flex, .tech5-flex, 
.tech6-flex, .tech7-flex, .tech8-flex, .tech9-flex, .tech10-flex, 
.tech11-flex, .tech12-flex, .tech13-flex, .tech14-flex, .tech15-flex, a.c-link{
  -webkit-filter: grayscale(38%) sepia(40%) /*invert(20%)*/ contrast(92%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out; 
}


.techbox-flex{      /*styles area of in navbar container*/
    /*box-sizing: border-box;*/
    border: solid 6px;
    height: 52vh;
    /*flex: 1;*/
    width: 53vw;
    top: 40vh;
    left: 23.6vw;
    position: absolute;
/*    background-color: rgba(17, 2, 33, 0.5);*/
    /*overflow-x: hidden; keeps the text from spilling into the navbar*/
    z-index: 100000;
    display: flex;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    /*-ms-flex-pack: space-around;*/ /* this seems to break my site!*/
    justify-content: space-around;

}

.techbox-flex img{
    height: 100%;
    width: 100%;
    max-inline-size: 10vw; 
    height: 16vh;
}


.tech1-flex{

}
.tech2-flex{
   
}
.tech3-flex{
    
}
.tech4-flex{
  
}

.tech5-flex{
  
}

.tech6-flex{
    
}

.tech7-flex{
   
}
.tech8-flex{
   
}
.tech9-flex{
 
}
.tech10-flex{
}

.tech11-flex{

}
.tech12-flex{


}
.tech13-flex{
    
}
.tech14-flex{
    
    
}

.tech15-flex{
   
}






/*Page 2 - Projects*/

.projects{
  top:75px;
  left: 300px;
  height:1200px;
  width:800px;
  padding: 15px;
  color:black;
  border-radius: 25px;
  border: 10px rgb(240, 242, 119, .7)float:left;;
  border-color: yellow;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline;
  display: inline-flex;
  flex-direction: row;
  z-index: 10000;
  position: absolute;
  flex direction: row;
  flex:2;
 }

.projectList{
  opacity:9;
  font-size: 12px;
  color: black;
  margin-left: 30px;
 }

.portfolio, .myBrand, .companies{
text-align: center;
 }

.myBrand{
  font-style:italic;
 }
.myName{
  color: blue;
 }

@-moz-keyframes scrolltext{
 0%   { -moz-transform: translateY(100%); }
 100% { -moz-transform: translateY(-40%); }
}
@-webkit-keyframes scrolltext{
 0%   { -webkit-transform: translateY(100%); }
 100% { -webkit-transform: translateY(-40%); }
}
@keyframes scrolltext {
 0%
 {
 -moz-transform: translateY(100%)*/; /* Firefox bug fix */
 -webkit-transform: translateY(40%); /* Firefox bug fix */
 transform: translateY(40%);
 }
 100%
 {
 -moz-transform: translateY(-40%); /* Firefox bug fix */
 -webkit-transform: translateY(-40%); /* Firefox bug fix */
 transform: translateY(-40%);
 }
}

.wrap{
  perspective: 800px;
  perspective-origin: 50% 100px;
}

.projectbox1{
  width: 510px
  height: 401px;
  border:black 3px;
}

.project4{
  background-image:url("../images/health_practitioner.png");
  background-size: cover;
  background-position: center;
  width: 28vw;
  height: 34vh;
  top: 14.8vh;
  left: 2vw;
 /* width: 400px;
  height: 300px;
  top: 150px;
  left: 30px;*/
  opacity: .8;
  position:absolute;
  border: 5px solid;
  z-index: 20000;
  flex:1;
}

  .project3{
    background-image:url("../images/travel-location-list.png");
    background-size: cover;
    background-position: center;
    width: 28vw;
    height: 34vh;
    top: 14.8vh;
    left: 32.2vw;
    /*width: 400px;
    height: 300px;
    top: 150px;
    left:480px;*/
    opacity: .8;
    border: 5px solid;
    position:absolute;
    z-index: 20000;
    flex:1;
}

  .project1{
    background-image:url("../images/bubblepopmania.png");
    background-size: cover;
    background-position: center;
    width: 28vw;
    height: 34vh;
    top: 14.8vh;
    left: 62vw;
    border: 5px solid;
    /*width: 400px;
    height: 300px;
    top: 150px;
    left:930px;*/
    opacity: .8;
    position:absolute;
    z-index: 20000;
    flex direction: row;
    flex:1;
}

  .project2{
    background-image:url("../images/ladyd_apothecary.png");
    background-size: cover;
    background-position: center;
    width: 28vw;
    height: 34vh;
    top: 54.8vh;
    left: 2vw;
    border: 5px solid;
/*  width: 400px;
    height: 300px;
    top: 500px;
    left:30px;*/
    opacity: .8;
    position:absolute;
    z-index: 20000;
    flex direction: row;
    flex:1;
}

.project1box:hover{
    background-color: aqua;
}

.project2box:hover{
    background-color: green;
}

.project4box:hover{
    background-color: blue;
}


/*Page 3 - Contact Me*/

.contactInfo{
  /*margin-top:5vh;*/
  /*margin-left: 27.5vw;*/
  /*height:auto;*/
  width: 12vw;
  padding-left: 14.5vw;
  padding-right: 18vw;
  padding-top: 5vh;
  padding-bottom: 5vh;
  font-size: 2vmin;
  border-radius: 25px;
  color:black;
  background-image:url("../images/geo-building16.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  /*display: inline;*/
  opacity: .6;
  z-index: 10000;
  /*position: absolute;*/
  flex direction: column;
  justify-content: center;
  align-content: center;
}


.contacthdg{
  /*top:100px;*/
  align-self: center;
  text-align: center;
  /*flex:1;*/
  /*margin-left: 17px;*/
  width: 11em;
}

.contactbox {
    width: 380px;
    height: 500px;
    display:flex;
    flex-direction:column;
    align-content: center;
    justify-content: flex-start;
   /* margin-left: -30px;*/
}

.c-link{
  display: block;
}

a.c-link:hover{
  scale: 1.3.;
}

.p-link{
  margin-top:104px;
  width: 75px;
}

.contact-label1,.contact-label3{
  height: 7vh;
  font-size: 1.1em;
  font-weight: bolder;
  /*text-align: center;*/
  /*text-wrap: unrestricted;*/
  /*position: sticky;*/
 /* align-self: center;*/
}

.contact-label2{
  height: 7vh;
  font-size: 1.1em;
  font-weight: bolder;
  text-align: center;
  margin-left: -11vw;
  /*text-wrap: unrestricted;*/
  /*position: sticky;*/
 /* align-self: center;*/
}


.email{
  background-image:url("../images/gmail-icon.png");
  background-size: cover;
  background-position: center;
  width: 10.5em;
  height: 5em;
/*  top: 150px;
  left: 30px;*/
  opacity: .9;
  /*position:absolute;*/
  border: 5px solid;
  z-index: 20000;
/*  flex:1;*/
 /* margin-left: 73px;*/
}

  .linkedin{
    background-image:url("../images/linkedin-icon-black.png");
    background-size: cover;
    background-position: center;
    width: 10.5em;
    height: 5em;
/*  top: 150px;
    left: 300px;*/
    opacity: .9;
    /*position:absolute;*/
    border: 5px solid;
    z-index: 20000;
/*  flex direction: row;
    flex:1;*/
    /*margin-left: 73px;*/
  }

  .github{
    background-image:url("../images/GitHub-Mark-120px-plus.png");
    background-size: cover;
    background-position: center;
    width: 10.5em;
    height: 5em;
/*    top: 150px;
    left: 600px;*/
    opacity: .9;
    /*position:absolute;*/
    border: 5px solid;
    z-index: 20000;
/*  flex direction: row;
    flex:1;*/
   /* margin-left: 17px;*/
  }

  .emailhdg{
    text-align: center;
    font-family: arial;
  }
  .emailForm1{
    background-image: url("../images/geo-building18.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 8vh;
    /*margin-left: 325px;*/
    width: 53vw;
    height: 85vh;
    /*display:flex;*/
    /*flex-direction:column;*/
    align-items: left;
    border: solid 3px;
    padding: 1vh;

  }

.emailfield{
  color: darkblue;
  font-weight: bold;
  font-size: 1.55em;
  font-family: arial;
  display: inline-block;
  margin-left: 3.5vw

}

.messagetext{
  color: darkblue;
  font-size: 1.2em;
  font-family: arial;
  height: 20vh;
  width: 100%;
}

  input[type=text], input[type=email] {
    width: 60%;
    padding: 12px 20px;
    margin: 1.3vw 0;
    box-sizing: border-box;
    margin-left: 1vw;
}

.emailreply{
  margin-left: 1vw;
}


  input[type=submit]{
    width: 9vw;
    height: 5vh;
    color:blue;
    margin-left: 2.5em;
    margin: 1.3vw 4.2vw;
    box-sizing: border-box;
    border: gray 2px;
    font-weight: bold;
    font-size: 1.25em;
}


   /*.emailbox{
    margin-top:300px;
    margin-left:625px;
    width: 600px;
    height: 500px;
    display:flex;
    /*flex-direction:column;*/
  /*  align-items: center;
    border: solid 3px;
  }*/