/* APRIL 9th, 2024
// I want to rebuilt the HTML and CSS. I dont believe I should do mobile first, but I need to fix the appearance on mobile

/*--------------*/
/* Fonts */
/*--------------*/
/* font-family: 'Roboto Serif', 
font-family: 'DotGothic16',
font-family: 'Gruppo' */


/*--------------*/
/* Fixes */
/*--------------*/
* *::before *::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

/*--------------*/
/* LAYOUT */
/*--------------*/

.hidden {
  display: none;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.stack {
    flex-direction: column;
      
}
 

/*--------------*/
/* Button Styles */
/*--------------*/

button {
  border-radius: 15%;
  border: 2px solid #cbf6cb;
  color: #332b33;
  font-family: 'DotGothic16', 'Courier New', Courier, monospace;
  font-size: 1.6rem;
  color: #332b33;
  border: 2px solid #cbf6cb;
  border-radius: 15%;
  padding: 1.5rem;
  margin: 1.5rem 1rem 0 0;
  transition: .6s;
}

button:hover {
  background-color: mediumspringgreen;
  border-radius: 35%;
  border: 2px solid #2e2332;
  color: #1a161a;
}

button:focus {
  color: #1a161a;
  border-radius: 30%;
  background-color: rgb(42, 156, 112);
}

/*--------------*/
/* Element Styles */
/*--------------*/

h1, h2, h3 {
  font-family: 'DotGothic16';
}

h1 {
  font-size: 7rem;
  margin: 0;
  text-shadow: 1px 2px #4e917196;
}

h2 {
  font-size: 4rem;
  margin-bottom: 0;
}

h3 {
  font-size: 2.4rem;
}

h5 {
  font-size: 1.2rem;
}

p {
  line-height: 1.55;
  color: #0b150b;
  padding: 1.5rem 5rem;
  margin-top: 0;
}

h1 + p {
  margin:0;
}

header {
  padding-bottom: .75rem;
}

footer {
  font-size: 1.2rem;
  padding: 3rem;
}

body {
  font-family: 'Roboto Serif';
  font-size: 2.4rem;
  border: 3rem solid #301f30; /* Deep purple border */
  padding: 1rem;
  background: linear-gradient(90deg, rgb(193, 185, 115) 0%, #9e81d3 100%);
  background: -moz-linear-gradient(90deg, rgb(194, 186, 113) 0%, #9e81d3 100%);
  background: -webkit-linear-gradient(90deg, rgb(204, 195, 119) 0%, #9e81d3 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#D9CF79", endColorstr="#5612D6", GradientType=1 );
  padding: 1rem;
}

a {
  font-size: 1.4rem;
  color: #2b002b;
  text-decoration: none;
  transition: 0.4s;
}

a:hover {
  color: rgb(125, 235, 120);
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

 /*--------------*/
 /* Nav items */
 /*--------------*/
 nav {
  margin-bottom: 10px;
}

nav ul {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

nav a {
  padding: .5rem 1.5rem;
}

/*--------------*/
/* Additional styles */
/*--------------*/
#about {

  font-size: 1.8rem;
  line-height: 1.6;
  margin: 2rem auto;
max-width: 900px;
  background-color: #c4b8da;
  filter: drop-shadow(rgb(13, 43, 33) 0.5rem 0.5rem 1rem);
}

.addVideoHere {
  margin-top: 1rem;
}

#embed {
  background-color: #4c4c4c;
  border: solid .8rem hsla(54, 56%, 66%, 1);
  border-radius: 1rem;
}

.mmgen {
  color:rgb(13, 43, 33);
  font-size: 1.8em;
  font-weight: 900;
}

/*--------------*/
/* Responsive Breakpoints */
/*--------------*/

@media only screen and (max-width: 768px) {
  .row {
    flex-direction: column;
    align-items: center;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
  }

  #addVideoHere {
    width: 100%;
  }

  button {
    font-size:1.6rem;
    margin: .5rem;
  }
}