@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');

html { 
    background-color: rgb(19, 43, 0);
    background: url("../img/gobbos.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    scrollbar-width: thin;
    scrollbar-color: rgb(19, 43, 0) rgb(20,20,20);;
  }

#grid {
    display:grid;
    gap: 10px;
    grid-template-areas: ". n ."
                         ". s .";
}


  /* Navbar CSS Rules */


#grid > nav {
    grid-area: n;
    background-color: rgba(1, 26, 0, 0.842);
    color:rgb(151, 214, 99);
    padding-left: 1em;
    padding-right: 1em;
    max-width: 77ch;
    font-size: large;
    border-radius: 5px;
}

#grid > nav > a {
    transition: all 0.75s ease;
    color:rgb(151, 214, 99);
    font-size: x-large;
    text-decoration: none;
    font-family: 'Comic Sans MS', serif;
    margin: 2px;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
}

#grid > nav > a:hover {
    background-color:rgb(19, 43, 0);
    color:rgb(142, 173, 0);
}

#grid > nav > .dropdown > a{
    outline: none;
    border:none;
    color:rgb(151, 214, 99);
    background: none;
    font-family: 'Comic Sans MS', serif;
    transition: all 0.75s ease;
    font-size: x-large;
    margin: 2px;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
}

#grid > nav > .dropdown > a:after{
    margin-left: .33em;
    content:'\15D0';  /*  \2356 '\15D0'; */
    font-size:0.66em;
}

.dropdown--toggled {
    background: rgb(19, 43, 0);
    color:black;
    border-radius: 5px;
}

#grid > nav > .dropdown--toggled > a:after{
    content:'\15D1';
}

#grid > nav > .dropdown > a:hover {
    background: rgb(19, 43, 0);
    color:rgb(142, 173, 0);
}

.dropdown {
    float:right;
    overflow:hidden;
}

.dropdown-content {
    float:right;
    display: none;
    position: absolute;
    background-color: rgb(0, 22, 4);
    min-width: 110px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: medium;
    border-radius: 5px;
    overflow-y:auto;
    max-height: 25%;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 5px;
    background-color: rgb(20,20,20);
}

::-webkit-scrollbar-thumb {
    background-color: rgb(19, 43, 0);
    border-radius: 5px;
} 

.dropdown-content a {
    float: none;
    color: rgb(151, 214, 99);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: all 0.75s ease;
    border-radius: 5px;
}

.dropdown-content a:hover {
    background-color: rgb(19, 43, 0);
    color:rgb(142, 173, 0);
}

.dropdown-content--mobileactive {
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}


  /* Articles CSS rules */


#grid > #subgrid {
    grid-area: s;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

article {
    background-color: rgba(1, 26, 0, 0.842);
    color:rgb(151, 214, 99);
    padding-left: 1em;
    padding-right: 1em;
    max-width: 77ch;
    font-size: large;
    border-radius: 10px;
}

article a {
    color:rgb(151, 214, 99);
}

article a:hover{
    color:rgb(0, 173, 14);
}

#grid > #subgrid > article {
    opacity: 0;
    transition: all 0.75s ease;
}

h1 {
    font-family: 'Comic Sans MS', serif
}

p {
    font-family: 'Comic Sans MS', sans-serif;
}

ul {
    font-family: 'Comic Sans MS', sans-serif;
}

img {
    margin-left: 25%;
    width: 50%;
    transition: all 0.75s ease;
}

.script {
    font-family: 'Pinyon Script', cursive;
    font-size: x-large;
}

img:hover {
    transform: rotateZ(10deg) scale(1.1);
    filter: drop-shadow(10px 10px 6px rgba(0,0,0,0.7));
}

article > button {
    margin-left: 25%;
    width:50%;
    padding:15px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size:x-large;
    color:lightgrey;
    background: rgb(50, 45, 75);
    border:rgba(100,90,150,0.3) 1px solid;
    font-family: 'Cormorant Unicase', serif;
    transition: all 0.75s ease;
}

article > button:hover{
    background: rgb(19, 43, 0);
    border:rgba(50,45,75,0.3) 1px solid;
    color:rgb(142, 173, 0);
}

h2 {
    display: block;
    width: 50%;
    padding:13px;
    margin-bottom: 10px;
    border-radius: 10px;
    margin-left: 25%;
    font-family: 'Cormorant Unicase', serif;
    color:rgba(150,150,150,0.5);
    text-align: center;
}

::selection {
    color: rgb(142, 173, 0);
    background: rgb(19, 43, 0);
  }

  
.dark {
    text-shadow: 0 0 10px #920000;
}