@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=UnifrakturCook:wght@700&family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&family=Special+Elite&family=UnifrakturCook:wght@700&family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&family=Linden+Hill:ital@0;1&family=Special+Elite&family=UnifrakturCook:wght@700&family=UnifrakturMaguntia&display=swap');

body {
  background-color: #ffe4c4;
  color: #30341D;
  font-family: "Linden Hill", "Times New Roman", serif;
  text-align: center;
} 

/*LINK FORMATTING*/
/* normal & visited link */
a:link, a:visited {color: #3F4E35; font-family: Garamond, "Times New Roman", serif;}

/* mouse over link  */
a:hover {color: #BB8225; font-family: Garamond, "Times New Roman", serif;}

/* navigation links */
a.nav:link, a.nav:visited {color:#8b4513; font-family: "Eagle Lake", "Times New Roman", serif; text-decoration-line: none; font-size: 1.2em;}
a.nav:hover {color:#919f67; font-family: "Eagle Lake", "Times New Roman", serif; font-size: 1.2em;}


/* SECTION FORMATTING*/
/* heading 1 */
h1 {
  color: #7b241c;
  font-family: "UnifrakturMaguntia", cursive;
}

/* heading 2 */
h2 {
  color:#807f4e;
  font-family: "UnifrakturMaguntia", cursive;
}

/* heading 3 */
h3 {
  color:#a9a871;
    font-family: "UnifrakturMaguntia", cursive;
}

/*italics */
em {
  color:#3f4e35;
}

/* paragraph style */
p {
  margin: 0% 10% 0%;
  font-size: 1.1em;
}

/* image captions*/
.caption {
  font-size: 1.1;
  font-weight: bold;
  color:#7F3B07;
  margin: 0% 15% 1%;
}

/* image set up for gallery*/
.gallery {
        width: 250px;
        height: auto;
        overflow: hidden;
    }
    
    
/* grid display for gallery*/

.grid-container-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 20px;
  width: 70%;
  margin: auto;
}

.grid-container-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 20px;
  width: 50%;
  margin: auto;
}

/*cv box coding*/
.grid-container-cv{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 4fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  padding: 20px;
  background-color: #a16435;
  border-radius: 25px;
  margin: auto;
  width: 60%;
  }
  
.cv-text{
  color: #ffe4c4;
  }
  
em.cv-text{
  color: #fff0de;
  }
  
.cv-header{
  color: #ffe4c4;
  grid-column-start: 1;
  grid-column-end: 5;
  }
  
h1.cv-header{
    color: #ffe4c4;
  }




/*helps formatting in layout sections*/
*{
  box-sizing: border-box;
}

/*formatting for side section*/
aside {
  float: left;
  width: 30%;
  padding: 1%;
  background-color:#515f3d;
  color:#edd38c;
  margin: 0% 0% 10px 0%;
}

.aside {
  margin: 0px 20px 5px;
  color:#edd38c;}

/*formatting for nav section*/
nav {
  text-align: center;
  padding: 10px;
  float: none;
  color:#8b4513;
  
}

/*formatting for header section*/
header{
  text-align: center;
  width: 100%;
 
  float: none;

  
}

/*formatting for main sections*/
article {
  margin: auto;
  padding: 0px 20px 20px 20px;
  width: 70%;
}  
  
section::after {
  content: "";
  display: table;
  clear: both;
}
  
  
@media (max-width: 600px) {
  aside, article {
    width: 100%;
    height: auto;
  }
}
  
/* flip card code */

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 250px;
  height: 250px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  left: 40%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #E0D695;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #BB8225;
  color: #edd38c;
  transform: rotateY(180deg);
} 

/*centre*/
.container {
  width: 50%;
  height: 250px;
  display: flex;
  justify-content: center;
}