html,
body ,

html *
{
   font-family: Arial, Helvetica, sans-serif !important;
}

/* Setting background image */
body {
    content: "";
    background-image: url("../images/Ireland_Sunset.JPG");
    background-repeat: no-repeat;
    background-position: center top;
    background-size:cover;
}

/* Add the following CSS for Masonry layout */
.masonry-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* $w: Min(10em, 50%); */

.masonry-item {
    /* width: calc(33.33% - 20px);
    margin: 10px;
    box-sizing: border-box; */
    display: grid;
    grid-template-columns: repeat(auto-fit, Min(25em, 100%));
    > * { width:  Min(25em, 100%); }
    justify-content: center;
    /* grid-gap: .5em; */
    /* padding: .5em; */
}

.masonry-item2 {
    /* width: calc(33.33% - 20px);
    margin: 10px;
    box-sizing: border-box; */
    display: grid;
    grid-template-columns: repeat(auto-fit, Min(15em, 100%));
    > * { width:  Min(10em, 100%); }
    justify-content: center;
    grid-gap: .5em;
    padding: .5em;
    grid-template-rows: masonry;
}

/* Left side layout */
.left-column {
    width: 28%;
}
#headshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
/* Right side layout */
.right-column {
    margin: auto;
    width: 60%; 
    padding: 10px;
    background-color: rgb(255, 255, 204 , 0.6);
}

/* Resume section to span across the entire webpage */
.resume {
    width: 100%;
}

/* Set styles for core text */
.header1{
    font-size: 48px;
    font-weight: bold;
}
.header2{
    font-size: 32px;
    font-weight: bold;
}
.header3{
    font-size: 26px;
    font-weight: bold;
}
.header4{
    font-size: 20px;
    font-weight: bold;
}
.header5{
    font-size: 16px;
    font-weight: bold;
}
.paragrph{
    font-size: 16px;
}
.highlight-green{
    background-color: rgb(102, 204, 0 , 0.5);
}
.underline{
    text-decoration: underline;
}

/* Icon sizing */
.f-size{
    width: 16px;
    height: 16px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    /* background-color: #c7e9c0fc; */
    background-color: rgb(204, 255, 153 , 0.5);
    color: black;
    cursor: pointer;
    /* padding: 5px; */
    width: 50%;
    border: none;
    text-align: left;
    outline: none;
}
  
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
    background-color: rgb(128, 255, 0 , 0.5);
}
  
/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    /* background-color: #edf8e9; */
    background-color: rgb(255, 255, 205 , 0.7);
}

/* Add plus/minus sign for collapsing */
.collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 12px;
    color: white;
    float: left;
    margin-left: 5px;
}
  
.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}