body{
  background: linear-gradient(rgb(131, 37, 37), rgb(22, 2, 2));
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


  #bigpicture_container{
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    margin: 0 auto;
    background:black;
    margin-top: 100px;
    margin-left:400px;
    justify-content: space-around;
    box-shadow: 0px 5px 5px rgb(10, 1, 1);
    border-radius:1%;
  }

    #big_picture{
      width: 700px;
      height: 700px;
      object-fit: scale-down;
      position: relative;
     }

    #leftarrow{
      object-fit: contain;
      width:100px;
      opacity:0.5;
      margin-left:20px;
    }
 
    #leftarrow:hover{
      opacity: 1;
    }
  

    #rightarrow{
     
      object-fit: contain;
      width:100px;
      opacity:0.5;
      margin-right:20px;
    
    }

    #rightarrow:hover{
      opacity: 1;
    }

    #textbox {
      background-color: rgb(131, 37, 37);
      position: absolute;
      border-radius:1%;
      width: 1000px;
      height: 100px;
      opacity: 0.8;
      text-align: left;
      color:white;
      top:700px;
      
      }

      h1{
        margin-left: 30px;
        margin-top:30px;
        font-size: 25px;
        line-height: 80%;
        font-family: "helvetica";
      }

      p{
        margin-left: 30px;
        font-family: "helvetica";
        font-size: 14px;
      }

  #thumbnail_containerr{
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    margin: 0 auto;
    justify-content: flex-start;
    margin-top:30px;
    margin-left:400px;
  
  }

  #profil{
    position: absolute;
    top:20;
    left:100px;
    border: 3px solid white;
    box-shadow: 0px 5px 5px rgb(104, 95, 95);
    border-radius:7%;

  }

  #leiras{
    width:220px;
    font-family: helvetica;
    font-size: 18px;
    color:white;
    position: absolute;
    top: 380px;
    left:80px;
    line-height: 150%;
  }

    .thumbnail{
      width: 70px;
      height:70px;
      border: 3px solid white;
      object-fit: cover;
      box-shadow: 0px 5px 5px rgb(104, 95, 95);
      border-radius:7%;
      margin-left:30px;
      margin-top:40px;
     }

    .tooltip{
      position: relative;
      display:inline-block;
    }

      .tooltip .tooltiptext{
        position: absolute;
        left: 30px;
        top:0px;
        display: none;
        right: -10px;
        bottom: 100px;
        background-color: rgb(80, 71, 71);
        color: #fff;
        text-align: center;
        padding-left:10px;
        border-radius: 6px;
        width:150px;
      }
 
        .tooltip:hover .tooltiptext {
          display: inline;
         
          margin-left: -40px;
        }

        .tooltip .tooltiptext::after {
          content: " ";
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: rgb(80, 71, 71) transparent transparent transparent;
        }

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

          #bigpicture_container{
            width:650px;
           
           
          }

          #big_picture{
            width: 550px;
            height:350px;
          }

          #thumbnail_containerr{
            width:600px;
            height:300px;
          }

          #leftarrow{
            width:30px;
          }

          #rightarrow{
            width:30px;
            
          }

          #textbox{
            width:650px;
            height:70px;
            top:385px;
            left:407px;
          
          }

          h1{
            margin-left: 30px;
            font-size: 15px;
            line-height: 80%;
            font-family: "helvetica";
          }
    
          p{
            margin-left: 30px;
            font-family: "helvetica";
            font-size: 9px;
            margin-bottom:3px;
          }