@import url(layoutStyle.css);

/* h */
h2{
    font-weight: bold;
    text-indent: 1em;
}
h3{
        text-indent: 1em;
}

/* LEFT */

#left {
    margin: 0px 0px 0px 12%;
}

.textImg {
 margin-top: 18px;
}

.textImg img{
width:98%;
margin : 12px 0px 24px 0px;
}

.text {
    display: block;
    padding: 9px;
    align-content: start;
}

.textImg{
    display: block;
}

.textSolo p{
    margin-top: 0;
}

.textImg p, .textSolo p {
   text-indent: 1em;
    text-align: justify;
    margin-bottom: 6px;

}


.textSolo {
    margin-top: 18px;
    padding-right: 18px;
    text-align: justify;
}


ul{
      margin: 0;
}

.noListStyle{
    list-style-type: none;
     padding-left: 0;
}

/* REVIEWS */
.reviews p{
        font-style: italic;
        text-indent: 0;
}
.reviewer, .link{
    text-align: right;
}
.reviews a{
   color: black;
    text-decoration: none;
}

.reviews > div{
    margin-top: 24px;
}

.reviews span{
    font-style: normal;
}

.linkYoutube{
    margin-bottom: 12px;
    text-indent: 1em;
}

/* MENU */

aside:before {
    /* A pseudo element is created before outer_cont that will display the background image and its position property is set to absolute */
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("img/whitebranchV1.jpg");
    opacity: var(--opacity);
    width: 100%;
    height: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}


/* RESPONSIVE */

@media screen and (max-width: 900px) {
  
    .textSolo {
        padding: 0px;
    }
}

/* DARK MODE */

@media (prefers-color-scheme: dark) {
  .textImg img{
border: none;
}
}