CSS not working

Hello,

Please can I borrow some expertise I am having issues with my CSS. I am by no means a coder and have been using YouTube to assist in designing my website using code. Everything was going great and the codes were working until just now. None of them work. I am still making my website (so it's unpublished), but I can paste in the codes I had. There may be an error you guys can see and I as a non-coder wouldn't. Thank you for your time 🙂
 

.gallery-grid-item .gallery-caption-content {

white-space:pre;

}

.gallery-grid-item .gallery-caption-content::first-line {

font-size: 1.3rem;

font-weight: bold;

}

@media only screen and (max-width: 799px){

.portfolio-text{

opacity:1!important;

}

.portfolio-text *{

background:rgba(255,255,255,.5);

border-radius:3rem;

border: 1px solid #333

}

}

@media only screen and (max-width:767px) {

.gallery-fullscreen-slideshow{

height: 34vh!important

}

}

@media only screen and(min-width:767px) {section[data-section-id="66bb69a6bd0736308a9e0a90"]{display:none}}

@media only screen and (max-width:767px) {section[data-section-id="66b678be6d94e84437e3eafd"]{display:none}}

.gallery-caption {background:#fff}

.gallery-caption p {white-space:pre; text-align:center}

.gallery-caption p:first-line {font-size: 1.2rem; font-weight:bold}

.gallery-caption p:second-line {colour:#6E7B8B;}

.gallery-caption p:second-line {colour:grey; font-size: 1rem; font-weight:bold}

 

//smooth scroll

 

html {scroll-behavior: smooth;}

 

@media screen and (max-width:767px) {section[data-section-id="66b4dbd40d0a2437e37cac42" {

.desktop-arrows.user-items-list-carousel__arrow-wrapper {

    display: flex !important;

}

.mobile-arrows {

    display: none !important;

}

}}

 

@media only screen and(min-width:767px) {section[data-section-id="66c721bd33e3907dd01a5703"], section[data-section-id="66c72b997ae7e711293bd880"]{display:none}}

@media only screen and (max-width:767px) {section[data-section-id="66c638c7673abf3110f4b62f"], section[data-section-id="66c72be44a5cee62ea64d53f"]{display:none}}

 

#page {

overflow-x:hidden

}

section[data-section-id="66c798c5eff7f27569a716c3"] .gallery-grid-wrapper {

display:flex !important;

animation: slideshow 40s linear infinite

}

section[data-section-id="66c798c5eff7f27569a716c3"] .gallery-grid-wrapper .gallery-grid-item {

 min-width: 50%;

 margin-right: 5%

}

@keyframes slideshow {

  0%    { left: 0; }

  100%  { left: -225%; }

}

@media only screen and(min-width:767px) {section[data-section-id="66c862c9fdac53361cf86554"]{display:none}

}

@media only screen and (max-width:767px) {section[data-section-id="66b39da355d16c0254748fc6"]{display:none}

}

}

22 minutes ago, LucyCSmith_FineArtist said:

There may be an error you guys can see and I as a non-coder wouldn't. Thank you for your time

There were quite a few errors, missing backets, too many brackets, mis-spellings (colour not color) etc. I've fixed everything I could find here:

.gallery-grid-item .gallery-caption-content {
    white-space:pre;    
    }
    
    .gallery-grid-item .gallery-caption-content::first-line {    
    font-size: 1.3rem;    
    font-weight: bold;    
    }
    
    @media only screen and (max-width: 799px){    
    .portfolio-text{    
    opacity:1!important;    
    }    
    .portfolio-text *{    
    background:rgba(255,255,255,.5);    
    border-radius:3rem;    
    border: 1px solid #333;    
    }    
    }
    
    @media only screen and (max-width:767px) {    
    .gallery-fullscreen-slideshow {    
    height: 34vh!important;    
    }    
    }
    
    @media only screen and(min-width:767px) {section[data-section-id="66bb69a6bd0736308a9e0a90"]{display:none}}
    
    @media only screen and (max-width:767px) {section[data-section-id="66b678be6d94e84437e3eafd"]{display:none}}
    
    .gallery-caption {background:#fff;}
    
    .gallery-caption p {white-space:pre; text-align:center;}
    
    .gallery-caption p:first-line {font-size: 1.2rem; font-weight:bold;}
    
    .gallery-caption p:second-line {color:#6E7B8B;}
    
    .gallery-caption p:second-line {color:grey; font-size: 1rem; font-weight:bold;}
    
     
    
    //smooth scroll
    
     
    
    html {scroll-behavior: smooth;}
    
     
    
    @media screen and (max-width:767px) { 
        section[data-section-id="66b4dbd40d0a2437e37cac42"] {    
    .desktop-arrows.user-items-list-carousel__arrow-wrapper {    
        display: flex !important;    
    }
    .mobile-arrows {    
        display: none !important;    
    }    
    }
}
    
     
    
    @media only screen and(min-width:767px) {
        section[data-section-id="66c721bd33e3907dd01a5703"], section[data-section-id="66c72b997ae7e711293bd880"] {
            display:none;
        }
    }
    
    @media only screen and (max-width:767px) {
        section[data-section-id="66c638c7673abf3110f4b62f"], section[data-section-id="66c72be44a5cee62ea64d53f"] {
            display:none;
        }
    }
    
    
    #page {    
    overflow-x:hidden;    
    }
    
    section[data-section-id="66c798c5eff7f27569a716c3"] .gallery-grid-wrapper {    
    display:flex !important;    
    animation: slideshow 40s linear infinite;    
    }
    
    section[data-section-id="66c798c5eff7f27569a716c3"] .gallery-grid-wrapper .gallery-grid-item {
     min-width: 50%;    
     margin-right: 5%;    
    }
    
    @keyframes slideshow {    
      0%    { left: 0; }    
      100%  { left: -225%; }    
    }
    
    @media only screen and(min-width:767px) { 
        section[data-section-id="66c862c9fdac53361cf86554"]{
            display:none;
        }
    }
    
    @media only screen and (max-width:767px) { 
        section[data-section-id="66b39da355d16c0254748fc6"] {
            display:none;
        }
    }

 

That does not surprise me at all! Thank you so much I've been staring at it for hours and making it worse I think. I appreciate you taking the time to correct my pitiful attempt aha, it all works great now. 

Thanks again!

No problem!