/*12-26-25
    spent A LOT of time re-learning how to position elements and scale them correctly, be aware of
    position uses on heiarchy such as box size, flex*/ 
    
*{
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    display: flex;
    justify-content: center;
    background-color: black;
    
}

.site-wrapper {
    height: 100%;
    width: 85vw;
}
.bg-img {
    position: absolute;
    /*background-image: url(../images/wood-591631_1920.jpg);*/
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    filter: blur(95px);
    z-index: -1;
}

.container {
    background: radial-gradient(circle, rgb(39, 20, 13) , rgb(0, 0, 0));
    /*background-color: rgba(255, 0, 0, 0);*/
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;

}

/* Inside container */

.content {
    height: 87vh;
    width: 85vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*box-shadow:  12px 12px 2px 0px rgba(58, 53, 53, 0.452);*/
}

/*** paper clip ***/

.clip-con {
    height: 15px;    

}

img {
    position: relative;
    width: 8rem;
    height: auto;

}

/*** clip end ***/

.desk-box {
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    /*background-color: rgb(31, 7, 0);*/
    width: 100%;
    height: 80vh;
    padding: 30px;
    margin: 0px;

}
.board-box {
    border: 15px solid rgb(29, 12, 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: slategray;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.paper-box {
    border-radius: 15px;
    border: 12px solid black;
    height: 85%;
    width: 500px;
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    justify-content: center;
    background-color:azure
    
}

#text {
    border: 5px double !important;
}

footer {
    width: 100%;
    height: 40vh;
    background-color: rgb(5, 0, 0);
}
h1 {
    font-size: 3rem;
    color: black;
    padding: 5px;

}

@media (max-width: 600px) {
    body {
        overflow: hidden;
    }
    
  h1 {
      color: rgb(20, 26, 26); 
      font-size: 2em;
    }
  .clip-con {
      height: 0%;
      display: flex;
      justify-content: center;
    }
  img {
      width: 95%; 
      height: 100px;
    }
  .board-box {
      width: 85vw; 
      height: 85vh;
    }
  .paper-box {
      width: 90%; 
      border: 5px solid; 
      border-radius: 0px
    }
}