/* OpenSans font-weight:300 */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/static/OpenSans-Bold.ttf') format('truetype');
    font-weight: 300;
    font-style: bold;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/static/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/static/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* instruction for cutting images round */
.circular--portrait { 
    position: relative; 
    width: 225px; 
    height: 225px; 
    overflow: hidden; 
    border-radius: 60%; 
    opacity: 0.88;
} 

.circular--portrait img { 
    width: 100%; 
    height: auto;
}

/* customized colors (for <span>) */
.hl-green {
    color: #10C7A3;
    font-style: bold;
}

/* modifying bold color globally */
b, strong{
    color: #10C7A3;  
}

/* container columns */
.columns {
    display: flex;
}

.column {
    flex: 1;
    width: unset !important;
}

/* customizing dimensions of TiU logo */
.slide-logo {
    height: 7% !important;
    width: 17% !important;
    max-width: unset !important;
    max-height: unset !important;
    position: relative;
}

/* paragraph settings */
.slide p { 
    font-family: 'Open Sans';
    font-style: normal;
}

/* .smaller */
.smaller{
    font-size: 35px !important;
}

/* vertical-center */

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

/* headers settings */
h1,
h2,
h3,
h4,
h5,
h6 { 
    font-family: 'Open Sans';
    font-style: normal;
    margin-bottom: 100px;
}

/* adding 100px margin-bottom of h2 */
h2,
h3 {
    padding-bottom: 30px;
}

/* rectangle to highlight RStudio panels */

#rectangle-rstudio {
    content:"";
    display:block;
    position:absolute;
    width:415px;
    height:205px;
    background-color: none;
    border:20px solid #10c7a2b1;
}

/* Definition and Warnings boxes */

.box {
    width:100%;
    padding: 0px 10px;
    overflow: auto;
    margin-left: 15px;
    margin-right: 15px;
}

.icon-area {
    display: flex;
    width: unset !important; /*50px;*/
    float: left; 
    display: inline-block;
}

.message-area {
    font-size: 40px;
    margin-left: 120px;
    margin-top: 15px;
    margin-bottom:15px;
    height: 100px;
    width: auto;
    float: none;
    text-align: left;
    display:block;
    overflow: auto;
}

/* box styles */
.definition {
    background: rgba(216, 204, 41, 0.204);
    border-radius: 10px;
}
.let-op {
    background: rgba(250, 128, 114, 0.122);
    border-radius: 10px;
}

/* size, dark and light */
.fa-size-90 { font-size: 90px; }
.fa-dark { color: rgba(0, 0, 0, 0.155); }
.fa-light { color: rgba(255, 255, 255, .6); }
  


/* Create a grid */

.wrapper {
    display: grid;
    width: 100%;
    height:80%; 
    grid-template-rows: repeat(2, 1fr); /* Two rows with equal height */
    grid-template-columns: repeat(4, 1fr); /* Three columns with equal width */
    gap: 10px; /* Adjust the gap between grid items */ 
}

.wrapper-item {
    /*border: 1px solid #ccc; /* optional */
    padding: 0px;
    text-align: center;
    justify-content: center;
}