@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* Reset */
 *{
   margin: 0;
   padding: 0;
   box-sizing:border-box;
   font-family: 'Ubuntu', Arial, sans-serif;
   font-size:1em;
   color:#a9c2fe;
   }

/* Global */

body { 
    background-color: #00122d;
    color: white;
    font-family: 'Ubuntu', Arial, sans-serif;
    min-height: 100vh;
    width: 100%; 
    
}

main {  background-color: #00122d; }

h2 { color: #C7FFD8; font-size: 2em; }

h4 { color: white; font-size: 1.25em; }

p { font-size:1em; }

/* Navbar */
    
header { top: 0;
   position: sticky;
   grid-area: header; 
   display: grid; 
   grid-template-columns: 20% 1fr;
   grid-template-areas: "logo nav";
   align-content: center;
   background-color: black;
   color: white; }

h1 { font-family: Lobster, cursive; color:#a9c2fe; font-size:1.5em; }

.logo { grid-area: logo;
        display:grid;
        grid-template-columns: repeat(2, min-content);
        grid-template-areas:"img h1";
        align-items: center;
        padding-left: 5%; 
        gap:1px; }

.logo img { grid-area:img; justify-content: end; }

nav { grid-area: nav;
   padding-right:5%; 
   display:grid; 
   grid-template-columns: repeat(5, min-content);
   justify-content: end;
   align-items:center; 
   gap:2em; }

a { color: white; 
    font-size:1.2rem; 
    text-decoration: none; 
     }

.active { color:red; }

/* Main */

.calclipart { display:flex; 
              align-items:center; }

.calclipart img { width:10%; }

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 2em; 
    grid-auto-rows: 1fr;    
    gap: 1px;
    border: 1px white solid;
    background-color: white;
    margin:5%;  
}

.day { text-align: center; 
       text-transform: uppercase; 
       background-color: #00122d; 
       padding:0.5em 0; } 

.calendar a { color:white; font-size:.85em; background-color:#00122d; padding:2px; }
.calendar a div { padding:4px; border-radius:7px; padding-bottom:0.5em;}

.advent { background-color: #8f00ff; }

.empty { background-color: #00122d; }

.event { background-color:orange; color:white; }

.israel { background-color: #a9c2fe; color:blue; font-weight: 500; }

.martyr { background-color: darkred; color:white; }

.gold { background-color: rgba(189, 146, 37, 0.92); color:white; font-weight: 500; }

.green { background-color: #4CBB17; color:white; }

.violet { background-color: #9400D3; }

/* Footer */

footer { grid-area: footer; 
   padding: 1em 0; 
   background-color: black; 
   color:white; }

.bottomnav { display:flex; 
   flex-direction:row; 
   justify-content: center; }

.copyright { color:white; font-size:xx-small; text-align: center; margin-bottom:2%; }

.copyright a { padding: auto auto; }

.bottomnav a { padding: 1%;  }

@media only screen and (max-width:610px){ 
    
    header { 
   grid-template-columns: 1fr;
   grid-template-areas: 
      "logo"
      "nav"
   }
   
.logo { grid-area: logo;
        grid-column: 1/ 1; 
        justify-content: center; }
   
nav { background-image: url('../images/calendar.png');
   background-size: 50%;
   background-position:center right;
   background-repeat: no-repeat;
   grid-area: nav;
   grid-column: 1/ 1;
   grid-template-rows: repeat(5,1fr);
   justify-content: start; 
   padding: 2em; 
   }
 
nav a { grid-column: 1 / 1; }
   
.calclipart img { display:none; }  
   
.calendar {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto minmax( 100px, auto);
    gap:3px; 
    margin:2%;  
}
   
   .day { display:none; }
   
}