/* responsive design */
@media screen and  (min-width:480px) {
  
}





.fish {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  max-width: 50px;
  height: auto;
}

/* Ensure all elements stay within viewport */
* {
  box-sizing: border-box;
}


@font-face {
    font-family: "fishbowl";
    src: url("font(s)/fishbowl-font/Fishbowl-21vl.ttf");
}

body {
  font-family: "fishbowl";
  width:100%;
  height:100%;
  overflow-x: hidden !important;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}


major-container {
    margin-left:20px;
    margin-right:20px;
   
}


.logo-container {
    position:absolute;
    top:1;
    left:10;
    width:400px;
    height:400px;
}

.toggle-container {
    position:absolute;
    top:1;
    right:10;
    width:400px;
    height:400px;
}

.title {
    font-family:"fishbowl";
    text-align: center;
    size:300px;
}


#fish-tank {
  /*  margin:100px 50px 50px 100px; */
    display:flex;
    justify-content:center;
    gap:10px;
    
}

#posters {
    display:flex;
    justify-content:center;
    gap:20px;
    margin: 0 auto;
}
/*I don't know if I actually need this so I am leaving it out */
/*#posters img {
    max-width: 100%;
    height: auto;
    display:block;
}*/

@media screen and (min-width: 100rem) {
    .container {
        margin: 1em 2em;
    }
}



   .toggle-container {
      position: fixed; /* or absolute */
      top: 20px;
      right: 20px;
      z-index: 1000;
    }

    .toggle-switch {
      width: 60px;
      height: 30px;
      background: #ccc;
      border-radius: 15px;
      position: relative;
      cursor: pointer;
    }

    .toggle-switch::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      background: white;
      border-radius: 50%;
      transition: 0.3s;
    }

    .toggle-switch.active {
      background: #4caf50;
    }

    .toggle-switch.active::before {
      left: 33px;
    }

.side-poster {
    padding: 20px;
    overflow: hidden; /* Clearfix */
}

.side-plot-reviews {
    width: 80%;
    float: left;
    padding: 20px;
    border: 2px solid red;
    box-sizing: border-box;
}







 
#review-award-wrapper {
  display: flex;
  text-align:center;

}

.reviews, .awards{
 flex:1;
  width:50%;
}


/* adding a swimming fish */

@keyframes swimForward {
  100% { background-position: 0 50px;}
}
.swimBox {
    width:27px;
    height:27px;
    display:none;
    background-image:url("fishbowl_page/swimming-fish.png");
}

.thirdContainer {
  position:fixed;
  bottom:0;
  z-index: 3010;
}

.youtube-box {
  width:300px;
  height:300px;
  background-repeat: repeat;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  justify-content: center;
  padding:10px;
}

.fish {
  position:absolute;
  top:50%;
  left:0;
  width:100px;
  height:auto;
}