/*----->__Fonts_______________________ */

.big-shoulders-inline {
  font-family: "Big Shoulders Inline", sans-serif;
  font-optical-sizing: auto;
  font-weight:100, 300, 700, 900;
  font-style: normal;
}
.oswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200, 400, 700, 900;
  font-style: normal;
}
.roboto{
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100, 400, 700, 900;
  font-style: normal;
}
/* ----------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.2rem;
    line-height: 1.45rem;
    background-color: rgb(93, 103, 152, 0.9);
    
}
.h1-title{
  
     font-family: 'Oswald', sans-serif;
    text-shadow: #070707 2px 2px 4px;
    font-optical-sizing: auto;
    font-size: 6.5vw;
    line-height: 3rem;
    text-align: center;
}  
.backgroundImage {
  background-image: url("../images/evictKulak.jpg");
  border: 1px solid rgb(33, 33, 36);
  background-size: contain; 
  background-position: center;
  margin-inline: 1rem;
  background-repeat: repeat-x;
  
  
}

.transbox {
  margin-top: 9rem;
  margin-bottom: 2rem;
  margin-inline: 18%;
  background-repeat: no-repeat;
}

div.transbox .h1-title {
padding-inline: 3rem;
  font-weight:700;
  color: #eee7e8;
  text-shadow: #010101 3px 3px ;
}

a {
  text-decoration:none;
  color: #024157;
  cursor: pointer;
}

a:visited {
text-decoration: none;
color:rgb(7, 91, 217);
cursor: auto;
}

a:hover{
  color:rgb(61, 147, 234);
}

a:active{
  color: (rgb(14, 145, 216));
}



/* ---------h2 modified------------------ */
.h2mod{
    color: #f8f9f8;
    font-style: oblique;
    font-weight: 400;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.6rem;
    text-align: center;
    border: rgb(106, 104, 138) 4px double;
    background-color:rgb(93, 103, 152, 0.7);
    margin-bottom: .5rem;
    /* p::after { content: " - Remember this";} */
}




/* ------------ */






/* ----------main grid------------------------- */
.grid-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(350px,100%),1fr));
    gap: 0.5rem;
    margin-inline: 0.8rem; 
    margin-bottom: auto;
}

.griditem { 

padding-block: 1rem;
padding-inline: 2rem;
text-align: justify;
background-color: rgb(231, 239, 231);
} 

img {
  display: block;
  max-width: 349px;
  padding-block: 1rem;
  padding-inline:2rem;
  
}
/* display BLOCK  enables CENTERING as img has INLINE property */
figcaption{
    font-style: oblique;
    font-weight: 400;
    padding-top: .2rem;
    padding-bottom: 1.5rem;
    font-size: smaller;
    text-align: center;
}

.griditem .h2mod +p{
margin-top: 1.5rem;
}


.griditem:nth-child(2) figure{
  padding-bottom:1rem;
}


.griditem .furtherReading{
    text-align: end;
    color:#444488;
}

.griditem7 p{ 
padding-top: 1rem;
} 

.griditem8 p{
padding-top: 1rem;
}