some css changes

src/About.js

@@ -5,8 +5,6 @@ import './styles/About.css'
 
 const About = () => {
 
-    // const [onHover, setHover] = useState("")
-
     return (
         <div className="about">
             <div className="about__container">

src/Peace.js

@@ -9,11 +9,12 @@ class Peace extends Component{
         return (
            <div className="peace">
                <p className="peace__p">This is peace</p>
-               <iframe className="video" title="nature" width="560" height="315" src="https://www.youtube.com/embed/Qm846KdZN_c" frameBorder="0" allow="accelerometer; autoplay; encrypted-media" allowFullScreen></iframe>
+               <div className='video__container'>
+                    <iframe className="video" title="nature" width="560" height="315" src="https://www.youtube.com/embed/Qm846KdZN_c" frameBorder="0" allow="accelerometer; autoplay; encrypted-media" allowFullScreen></iframe>
+               </div>
            </div>
        )
    }
     }
 
-
 export default Peace;

src/styles/About.css

@@ -2,7 +2,7 @@
 .about {
     background: url('../pictures/crystal-carole-smile.jpg');
     background-size: contain;
-    height: 100vh;
+    /* height: 100vh; */
     padding: 10px;
     color: rgb(131, 131, 131);
     text-shadow: 2px 2px 15px white;
@@ -16,24 +16,27 @@
 
 .about__container { 
     padding: 20px;
+    padding-bottom: 20px;
 }
 
 .about__columns {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
+
 }
 
 .about__column {
     display: grid;
     max-width: 400px;
     height: auto;
     border: 1px dotted white;
-    margin-top: 20px;
+    /* margin-top: 10px; */
+    margin-bottom: 100px;
     padding: 10px;
     cursor: default;
     border-radius: 10px;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
     position: relative;
 }
 @media (max-width: 903) {

src/styles/Peace.css

@@ -1,21 +1,55 @@
 
 .peace {
-    /* background-color: black; */
-    position: relative;
+    /* position: relative;
     padding-bottom: 56.25%;
-    padding-top: 25;
-    /* height: 100vh; */
+    padding-top: 25; */
+    position: absolute; 
+    width: 100%;
+    height: 100%;
+    margin-bottom: 0;
 }
 
 .peace__p {
     font-size: 15px;
 }
 
-.video {
+.video__container {
+    position: absolute; 
+    top: 0;
+    left: 0;
+    /* z-index: -2; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    filter: brightness(100%);
+}
+
+.video__container:after {
     position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    content: "";
+    width: 100%;
+    height: auto;
+}
+
+.video {
+    /* position: absolute;
     top: 0; 
     left: 0;
     width: 100%;
-    height: 100%;
+    height: 100%; */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100vw;
+    height: 56.25vw;
+    min-width: 177.6vh;
+    min-height: 100vh;
+    transform: translate(-50%, -50%);
 }
 

src/styles/Secret.css

@@ -1,15 +1,17 @@
 
 .secret {
     height: 100vh;
-    background-color: lightpink;
+    background: url('../pictures/pyramid.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
 }
 
 .secret > p {
     padding-top: 20%;
     text-align: center;
     font-size: 40px;
-    color: black;
-    padding-bottom: 10%;
+    color: magenta;
+    padding-bottom: 20%;
 }
 
 .secret__button-container {