/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
   font-family: minecraftia;
  max-width: 1100px; 
  width: 100%;      
  margin: 0 auto;    
  text-decoration: none;
  }
 
 a { color:  #ed7a0e; }
 
  @font-face {
  src: url(https://dl.dropbox.com/s/gavkuhehligvhz8/PsycheLover-Regular.otf);
  font-family: psyche;}
  
  @font-face {
  font-family: minecraftia;
  src: url(https://dl.dropbox.com/s/qrro6u0lx00x66j/Minecraftia-Regular.ttf?);}
  
  @font-face {
  font-family: cheri;
  src:url(https://dl.dropbox.com/s/rnro4upxbmy7722/CHERL___.TTF?dl=0); }
  
  @font-face {
  font-family: windows;
  src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
  }


  .title,
  .title-favourite {
    font-family:'psyche';
    font-size:135%;
    margin-left: auto; margin-right: auto;
    display: block;
    text-align:center;
    transform:translateY(40px);  
  }
    
  .title {
    color:#ed7a0e;
  }
  
  .title-favourite {
    color:#544270
  }
  
  .home-page {
    background:#a4d0fc;
    background-image: url(https://i.pinimg.com/1200x/a1/1b/9f/a11b9f9b9e418df61bfbce42912a40af.jpg);
    color: #edebb9;
  }
  
  .favourite {
  background:#a4d0fc;
  background-image: url(https://i.pinimg.com/736x/c3/08/83/c30883f764abdaa862f2692076ddf016.jpg);
  color: #d4bff5;
  }
  
  .main-box,
  .main-box-favourite {
    min-height: 800px;
    width:750px;
    gap: 25px;
    margin-left: auto; margin-right: auto;
    font-size:17px; 
    padding: 30px;
    box-sizing: border-box; 
  }
  
  .main-box-favourite {
    border: 20px double #645182;
    background:#826ca6; 
    position: relative;
  }
  
    
  .main-box { 
    display: grid;
    grid-template-columns: 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr ;
    grid-template-rows: 1fr, 1fr, 1fr, 1fr, 1fr;
    border: 20px double #ed7a0e;
    background:#fca049; 
    }
    

    .first-mini-box,
   .what-i-want,
   .my-fav,
   .sitemap {
     border: dashed #fae88c 3px; 
      padding:0px 10px; 
    }
   
    .first-mini-box { 
      grid-column-start: 1; 
      grid-column-end: 6;
      grid-row-start: 1;  
      grid-row-end: 3;  
    }
    
    .what-i-want { 
      grid-column-start: 2; 
      grid-column-end: 4; 
      grid-row-start: 3;  
      grid-row-end: 4; 
      text-align: center; 
    } 
    
    .my-fav {  
      grid-column-start: 4; 
      grid-column-end: 6; 
      grid-row-start: 3;  
      grid-row-end: 6;  
      margin-bottom: 50px;
    } 
    
    .sitemap { 
      grid-column-start: 1; 
      grid-column-end: 4; 
      grid-row-start: 4; 
      grid-row-end: 6; 
      box-sizing: border-box;
      margin-bottom: 50px;
    }
      
    .butterfly-icons {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 3;
      grid-row-end: 4;
    }