/* have a nice day! */

@font-face {
  font-family: "Standard";
  src: url('fonts/Actor-Regular.ttf') format('truetype');    
}

@font-face {
  font-family: "Fancy";
  src: url('fonts/ArchitectsDaughter-Regular.ttf') format('truetype');    
}

@font-face {
  font-family: "Header";
  src: url('fonts/BerkshireSwash-Regular.ttf') format('truetype');    
}

.container {
  display: grid;
  grid-template:
    "Header Header Header"
    "Intro Intro Sidebar"
    "Main1 Main2 Sidebar"
    "Footer Footer Footer"
    / 2fr 2fr 1fr;
  grid-gap: 10px;
  max-width: 1400px;
  width: 95%;
  margin: 20px auto;
}

@media (max-width: 800px) {
  .container {
    grid-template:
      "Header"
      "Sidebar"
      "Intro"
      "Main1"
      "Main2"
      "Footer";
  }
  h1{
    font-size:40px;
    }
  h2{
    font-size:35px;
    }
  .fontOverride {
    font-size:12pt !important;
    }
  .side { flex-direction: row;
  }
}

.headerBox {
  grid-area: Header;
  margin-bottom:10px;
  padding-left: 35px;
  background-color: #5F6F52;
  border-style: solid;
  border-width: 1px;  
  border-color: #5F6F52;
  border-radius: 15px; 
  color: #FEFAE0;
  font-family: "Header";    
  }

.topMain {
  grid-area: Intro;
  margin-bottom: 10px;
  gap:10px;
  }
  
.leftMain {
  grid-area: Main1;
  margin-bottom: 10px;
  gap:10px;
  }

.rightMain {
  grid-area: Main2;
  margin-bottom: 10px;
  gap:10px;
  }

.Box {
  background-color: #FEFAE0;
  border-style: solid;
  border-width: 5px;
  border-color: #B5F6F52;
  border-radius: 15px;  
  padding: 5px;
  padding-left: 25px;
  gap: 10px;
  margin: 10px;
  }
  
.side {
  grid-area: Sidebar;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  }

.mainLink {
  background-color: #5F6F52;
  color: #FEFAE0;
  border-style: solid;
  border-width: 5px;
  border-color: #B5F6F52;
  border-radius: 15px;  
  padding: 8px;
  margin: 5px;
  font-family: "Fancy";
  font-size: 24pt;
  }
  
.subLink {
  background-color: #FEFAE0;
  color: inherit;
  border-style: solid;
  border-width: 5px;
  border-color: #B5F6F52;
  border-radius: 15px;  
  padding: 8px;
  margin: 5px;
  font-family: "Fancy";
  font-size: 24pt;
  }

a {
  color: #B99470;
  text-decoration: none
  }

a.subLink:hover {
    background-color: #5F6F52;
    color: #FEFAE0;
  }

h2 {
  font-family: "Fancy";
  }

  
  body {
  background-image: url(images/background3.jpg);
  background-size: cover;
  background-attachment: fixed;
  color: #5F6F52;
  font-family: "Standard",Verdana;
  font-size: 18pt;
  }